JQueryUI 介绍
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含
底层用户交互、动画、特效和可更换主题的可视控件。
下载地址： http:///download
1. 支持的浏览器
IE 6.0+
Firefox 3+
Safari 3.1+
Opera 9.6+
Google Chrome
2. JQueryUI 优点
JQueryUI 是基于Jquery 的扩展，它与Jquery 的插件及其它JS UI 框架相比，它具有下例优点：
1. JQueryUI 是由JQuery 官方提供的对Jquery 的扩展，具有统一的版本控制。
2. JQueryUI 提供界面组件的完整支持及样式控制。
3. JQueryUI 具有良好的用户交互性。
4. 降低开发人员对界面组件的开发成本提升开发效率。
3. JQueryUI 组成
3.1. UI 核心
Core: 文件jquery.ui.core.js， 它是JQueryUI 的核心，所有交互和组件都依赖它
Widget: 文件jquery.ui.widget.js， 组件工厂，所有组件都依赖它
Mouse: 文件jquery.ui.mouse.js， 处理鼠标操作
Position: 文件jquery.ui.position.js, 处理组件位置
3.2. UI 交互
Draggable: 文件jquery.ui.draggable.js， 提供组件的拖拉操作
Droppable：文件jquery.ui.droppable.js， 提供组件的投掷操作
Resizable：文件jquery.ui.resizable.js， 提供组件的改变大小操作
Selectable: 文件jquery.ui.selectable.js， 提供组件的拖拉选择等操作
Sortable： 文件jquery.ui.sortable.js， 提供组件的排序操作
3.3. UI 组件
Accordion： 文件jquery.ui.accordion.js， 提供手风琴效果的导航组件
Autocomplete： 文件jquery.ui.autocomplete.js， 提供自动补全组件
Button： 文件jquery.ui.button.js， 提供按钮组件
Dialog： 文件jquery.ui.dialog.js， 提供可拖拽，改变大小的对话框组件
Slider： 文件jquery.ui.slider.js， 提供滑块组件
Tabs： 文件jquery.ui.tabs.js， 提供TAB 标签组件
Datepicker： 文件jquery.ui.datepicker.js， 提供日期选择组件
Progressbar： 文件jquery.ui.progressbar.js， 提供进度条组件
3.4. UI 效果
以jquery.effects.开头JS 文件，提供对组件的显示特效
上面是JQueryUI 的各模块的组成，官方也提供一个合并的文件jquery-ui-1.8.17.custom.min.js，
包含上面所有功能
4. JQueryUI 目录结构
JS : 放的是jquery 框架及包含所有UI 组件的JS
CSS : 放的是JQueryUI 的主题，控制的是UI 的样式，一个子文件夹代表一种主题
Development-bundle: 是一些对开发的帮助文件及UI 的子模块JS(非必需)
5. JQueryUI 的示例
development-bundle/demos 目录
6. JQueryUI 的原理
JqueryUI 使用统一的命名规范和编码风格，所有UI 模块都是基于widget 方法的扩展。
$.widget 此函数完成了对jQuery 本身的扩展，根据第一个参数来确定模块的命名空间和函
数名；第二个参数确定模块的基类（默认是$.Widget）；第三个参数实现模块本身的方法。
比如标签切换插件jquery.ui.tabs.js 中开始：
$.widget(“ui.tabs”, {…}); //这里只有两个参数，那么基类就默认是$.Widget
第一个参数：”ui.tabs”用来表示在jQuery 上选择（或增加）一个命名空间，即如果jQuery.ui
不存在，则定义 jQuery.ui = {},然后在 jQuery.ui 上增加一个函数，名称为 tabs.最后调用
$.widget.bridge 将tabs 方法挂在jQuery 对象上。这样，所有的jquery 对象将拥有tabs 方
法。
7. 效果演示
7.1. TABS 标签面效果
代码：
1. 引入主题文件 jquery-ui-1.8.17.custom.css
2. 引入JS 文件 jquery.js
3. 引入JQuery UI
如上图：只要符合上述结构就可以轻松构建TAB 标签页效果。
1. 一个放置TAB 标签及内容的外部容器DIV
2. 标签列表元素 或
3.
列表为各tab 标签对应展示的内容。
5. $("#myTabs").tabs(); 该JS 将tabs 效果作用到myTabs 对应的DIV 上
CSS 文件会做下面动作：
在myTabs 对应DIV 中，在class 添加
ui-tabs 使其具有TAB 效果
ui-widget 设置字体
ui-widget-content 主题样式
ui-corner-all 圆角
根据图中的class 样式可更改相应的主题
TABS 选项
disabled: 使能或禁用TAB 标签
类型 Boolean 默认值 false
示例：
1. 属性设值
$( ".selector" ).tabs({ disabled: true });
2. 取值
var disabled = $( ".selector" ).tabs( "option", "disabled" );
3. 设值
$( ".selector" ).tabs( "option", "disabled", true );
4. 事件
tabsselect,
tabsload,
tabsshow
tabsadd,
tabsremove
tabsenable,
tabsdisable
$('#example').bind( 'tabsselect' /*事件类型*/, function(event, ui) {/*事件处理函数*/
ui.tab //被选中tab 标签页的链接
ui.panel //被选中标签对应的内容元素对象
ui.index //被选中tab 标签页索引，基于0
});
5. 方法
执行方法：$( ".selector" ).tabs( "destroy" ) 则执行了对应的destory 方法
注意
1. 有些属性设置或方法调用必须在组件初始化之后调用。
|
