jQuery UI
| 开发者 | The jQuery Project |
|---|---|
| 当前版本 | 1.8.23（2012年8月15日[1]） |
| 预览版本 | 1.9 RC（2012年8月24日） |
| 源代码库 | |
| 编程语言 | JavaScript |
| 类型 | Web应用框架外挂 |
| 许可协议 | GPL 与 MIT |
| 网站 | http://jqueryui.com/ |
jQuery UI 是一套 JavaScript 函式库，提供抽象化、可自订主题的 GUI 控件与动画效果。基于 jQuery JavaScript 函式库，可用来建构互动式的互联网应用程序。在2007年9月 John Resig 于 jquery.com 部落格里的一篇文章里正式公诸于世[2]。最新的版本需要 jQuery 1.3.2 或更新的版本。[3]
功能
以 1.8.11 版本为例[4]。
互动
- 拖曳（Draggable） – 让元素可以用鼠标拖曳。
- 拖放（Droppable） – 让控件可以接受其他拖曳进来的元素。
- 调整大小（Resizable） – 让元素可以调整大小[5] 。
- 选取（Selectable） – 提供进阶的大量元素选择功能。
- 排序（Sortable） – 让列表可以更容易排序。
控件
jQuery UI 的所有控件都能自订主题样式[6]。
- 手风琴式选单（Accordion） – 如手风琴般可伸缩的控件。
- 自动完成（Autocomplete） – 根据使用者的输入来自动完成文字栏。
- 按钮（Button） – 增强按钮外观，将单选与复选控件转变成按钮型式。
- 日期选择器（Datepicker） – 进阶的日期选择工具。
- 对话框（Dialog） –在页面最上层显示对话框。
- 进度条（Progressbar） – 动态与静态的进度指示条。
- 滑动条（Slider） – 完全可以自订的滑动条与各种功能[7]。
- 页签（Tabs） – 页签切换控件，可以内嵌或动态载入内容。
效果
- 颜色动画（Color Animation） – 产生颜色转变的动画效果。
- 切换 Class、新增 Class、移除 Class、开关 Class – 让页面上元素样式转变时有动画效果。
- 效果（Effects） – 各种效果（显示、下拉、爆炸、淡入等等）。
- 切换（Toggle） – 切换效果开关。
- 隐藏、显示 - 使用上述的效果。
工具
- 位置（Position） – 根据另一个元素来设定目标元素的位置（对齐）。
范例
<script type="text/javascript">
// 讓 #draggable 可以拖曳
$(function() {
$("#draggable").draggable();
});
</script>
<div id="draggable" style = "width: 150px; height: 150px; padding: 0.5em;" class="ui-widget-content">
<p>Drag me around</p>
</div>
这段程式码会让使用者的鼠标游标可以拖曳 ID 为“draggable”的 DIV 元素。
参考资料
- ^ González, Scott. jQuery UI 1.8.23. 2012-08-15.
- ^ John Resig. jQuery UI: Interractions and plug-ins. jQuery blog. 17 September 2007 [12 August 2012].
- ^ Build Your Download
- ^ jQuery UI Demos. jQuery UI. [12 August 2012].
- ^ Jquery UI Examples – Crop Images With Jquery Resize. Innovative PHP. 16 June 2011 [12 August 2012].
- ^ jQuery UI: ThemeRoller. jQuery UI. [12 August 2012].
- ^ Jquery UI Examples – Creating a Page Content Slider. Innovative PHP. 21 July 2011 [12 August 2012].
外部链接
- 官方网站 （英文）