jQuery UI
jQuery UI是一套JavaScript 函数库，提供抽象化、可自订主题的GUI控制项与动画效果。基于jQuery JavaScript函数库，可用来建构交互式的互联网应用程序。在2007年9月约翰·雷西格于jquery.com博客里的一篇文章里正式公诸于世[5]。最新的版本需要jQuery 2.1.1或更新的版本。[6]
| 开发者 |
|
|---|---|
| 当前版本 | |
| 源代码库 | |
| 编程语言 | JavaScript |
| 类型 | 插件 |
| 许可协议 | MIT许可证[4] |
| 网站 | https://jqueryui.com/ |
功能
以1.9.0版本为例[7]。
交互
- 拖曳（Draggable）–让元素可以用鼠标拖曳。
- 拖放（Droppable）–让控制项可以接受其他拖曳进来的元素。
- 调整大小（Resizable）–让元素可以调整大小[8]。
- 选取（Selectable）–提供高端的大量元素选择功能。
- 排序（Sortable）–让列表可以更容易排序。
控制项
jQuery UI的所有控制项都能自订主题样式[9]。
- 手风琴式菜单（Accordion）–如手风琴般可伸缩的控制项。
- 自动完成（Autocomplete）–根据用户的输入来自动完成文本栏。
- 按钮（Button）–增强按钮外观，将单选与复选控制项转变成按钮型式。
- 日期选择器（Datepicker）–高端的日期选择工具。
- 对话框（Dialog） –在页面最上层显示对话框。
- 菜单（Menu） - 显示多阶层式的菜单。
- 进度条（Progressbar） –动态与静态的进度指示条。
- 滑动条（Slider）–完全可以自订的滑动条与各种功能[10]。
- 微调选择器（Spinner） - 上下控制的数字微调输入栏。
- 页签（Tabs）–页签切换控制项，可以内嵌或动态加载内容。
- 工具提示（Tooltip） - 弹出式提示框。
效果
- 颜色动画（Color Animation）–产生颜色转变的动画效果。
- 切换Class、添加Class、移除Class、开关Class –让页面上元素样式转变时有动画效果。
- 效果（Effects）–各种效果（显示、下拉、爆炸、淡入等等）。
- 切换（Toggle）–切换效果开关。
- 隐藏、显示 - 使用上述的效果。
工具
- 位置（Position） –根据另一个元素来设置目标元素的位置（对齐）。
范例
// 让#draggable可以拖曳
$(function() {
$("#draggable").draggable();
});
<div id="draggable" style="width:150px;height:150px;padding:0.5em" class="ui-widget-content">
<p>Drag me around</p>
</div>
这段代码会让用户的鼠标光标可以拖曳ID为「draggable」的DIV元素。
参考文献
- . jqueryui.com. The jQuery Foundation. [5 February 2016]. （原始内容存档于2012-02-29）.
- . 2022年7月14日 [2022年10月24日].
- https://registry.npmjs.com/jquery-ui; 检索日期: 2023年3月3日.
- . jQuery.com. The jQuery Foundation. [2014-06-12]. （原始内容存档于2021-01-23）.
- John Resig. . jQuery blog. 17 September 2007 [12 August 2012]. （原始内容存档于2012-08-18）.
- . [2012-09-02]. （原始内容存档于2021-02-04）.
- . jQuery UI. [14 October 2012]. （原始内容存档于2012-05-13）.
- . Innovative PHP. 16 June 2011 [12 August 2012]. （原始内容存档于2011年12月13日）.
- . jQuery UI. [12 August 2012].
- . Innovative PHP. 21 July 2011 [12 August 2012]. （原始内容存档于2012年7月27日）.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.
