jQuery UI

jquery ui是 jquery官方推出的配合jquery使用的用户界面组件集合！包含了许多的界面操作功能，如我们常用的表格排序，拖拽，TAB选项卡，滚动条，相册浏 览，日历控件，对话框等JS插件~~可以很方便的开发用户界面上的功能，使得您的开发工作事半功倍~~不用写繁琐的JS代码~
下载地址：http://ui.jquery.com/download 
下载后会发现里面有很多的JS文件，也有DOME，您可以一一演示，现在，我介绍一些常用的UI库的使用

基本的鼠标互动：

拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

各种互动效果：

手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条

(sliders)、表格排序(table sorters)、页签(tabs)

放大镜效果(magnifier)、阴影效果(shadow)

第一部分：鼠标交互

1.1 Draggables:拖拽

所需文件：

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

用法：文件载入后，可以拖拽class = “block”的层

  1. $(document).ready(function(){             
  2.         $(".block").draggable();          
  3. });      

draggable(options)可以跟很多选项

选项说明：http://docs.jquery.com/UI/Draggables/draggable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

1.2 Droppables

所需要文件，drag drop

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

ui.droppable.js

ui.droppable.ext.js

用法：

  1. $(document).ready(function() {     
  2.      $(".block").draggable({ helper: 'clone' });     
  3.      $(".drop").droppable({     
  4.         accept: ".block",     
  5.          activeClass: 'droppable-active',     
  6.          hoverClass: 'droppable-hover',     
  7.          drop: function(ev, ui) {     
  8.              $(this).append("Dropped!");     
  9.          }     
  10.      });     
  11. });  

选项说明：http://docs.jquery.com/UI/Droppables/droppable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

1.3　Sortables　排序

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.sortable.js

用法：

  1. $(document).ready(function(){     
  2.      $("#myList").sortable({});     
  3. });   

dimensions文档http://jquery.com/plugins/project/dimensions

选项说明：http://docs.jquery.com/UI/Sortables/sortable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

1.4 Selectables 选择

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.selectable.js

用法：

  1. $(document).ready(function(){     
  2.      $(”#myList”).selectable();     
  3. });   

选项说明：http://docs.jquery.com/UI/Selectables/selectable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

1.5　Resizables改变大小

所需要的文件　，此例子需要几个css文件

jquery.dimensions.js

ui.mouse.js

ui.resizable.js

用法：

  1. $(document).ready(function(){       
  2.           $(”#example”).resizable();         
  3. });     

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Resizables/resizable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.resizable.html

第二部分：互动效果

2.1 Accordion 折叠菜单

所需要的文件:

ui.accordion.js

jquery.dimensions.js

用法：

  1. $(document).ready(function(){       
  2.        $(”#example”).accordion();         
  3. });      

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Accordion/accordion#options

选项实例：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1

2.2 dialogs 对话框

所需要的文件：

jquery.dimensions.js

ui.dialog.js

ui.resizable.js

ui.mouse.js

ui.draggable.js

用法：

JavaScript代码
  1. $(document).ready(function(){     
  2.          $("#example").dialog();     
  3. });   

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Dialog/dialog#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

2.3 sliders 滑动条

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.slider.js

用法：

  1. $(document).ready(function(){     
  2.       $("#example").slider();     
  3. });   

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Slider/slider#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

2.4 Tablesorter表格排序

所需要的文件

ui.tablesorter.js

用法：

JavaScript代码
  1. $(document).ready(function(){     
  2.        $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});     
  3. });   

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options

选项实例：http://tablesorter.com/docs/#Demo

2.5 tabs页签(对IE支持不是很好)

所需要的文件

ui.tabs.js

用法：

  1. $(document).ready(function(){     
  2.      $("#example > ul").tabs();     
  3. });   

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Tabs/tabs#initialoptions

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html

tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

第三部分：效果

3.1 Shadow 阴影

实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html

3.2 Magnifier 放大

实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html

http://jqueryui.net/tutorial/

本文档适用于 1.7.x 任意版本（1.7、1.7.1、1.7.2等）。

使用 jQuery UI 前，需了解 jQuery 核心库使用方法和 HTML、CSS、JavaScript 基础知识。

jQuery UI 践行渐进增强原则，通过标准 HTML 代码保证禁用 JavaScript 环境或移动设备的内容可访问性。利用 JavaScript 代码增强主流浏览器中交互特性，并兼容 WAI-ARIA 标准。各组件“综述”页会提供实例化各组件所需的标准 HTML 结构。

本页“属性”“事件”“方法”页面将提供各组件通用方法及修改属性、绑定事件、调用方法的语法规则。各组件页对应页面将提供各组件各自的 API 文档。

加载代码

首先在网页中加载开发包中 jQuery 核心库文件，再按需加载 ui.core.js、effects.core.js 及各组件代码文件，如设置可视组件外观需同时加载 CSS 主题文件。可参考开发包中各演示文件源代码。

创建组件实例方法

每个 jQuery UI 组件提供一个可串联的标准 jQuery 方法，创建实例时，仅需在 jQuery 对象上调用组件方法。如：

$("#login-form").dialog(); // 创建对话框

组件方法可串联使用：

创建可拖动位置、可调整大小的对象

$("#id").draggable().resizable();

创建标签页，设置每5秒自动切换标签

$("#news-panel").tabs().tabs("rotate",5000);
属性 类型 默认值

属性名称 属性值数据类型 默认属性值

创建实例时设置属性值

创建组件实例时，以 Object 型参数设置实例的属性。

$(".class").组件名({属性名1:值1,属性名2:值2});

如：

$(".class").draggable({axis:"x",cursor:"crosshair"});
获得属性值

组件实例化后，可以通过 option 方法获得属性值。

var a = $(".class").组件名("option",属性名);

如：

var axis = $(".class").draggable("option","axis");
重设属性值

组件实例化后，可以通过 option 方法重设属性值。

$(".class").组件名("option",属性名,属性值);

如：

$(".class").draggable("option","axis","y");
事件 类型

事件 事件类型

各事件均有两个参数。第一个参数为原始浏览器事件；第二个参数为包含组件相关元素、数值的 Object 型参数，其具体内容请参看各组件“综述”。

创建实例时设置事件

创建组件实例时，以 Object 型参数设置实例的事件。

$(".class").组件名({事件1:函数1,事件2:函数2});

如：

$(".class").draggable({ start:function(event,ui){...}, drag:function(event,ui){...} });
实例化后时绑定事件

组件实例化后，通过 bind 方法绑定事件。

$(".class").bind("事件类型",函数);

如：

$(".class").bind("dragstart",function(event,ui){...});

事件类型通常为“组件名+事件”或“动作名+事件”，当“动作名”与“事件”相同时，仅使用“动作名”。

方法 调用

方法名 .组件名("方法名")

组件实例化后，可调用组件方法执行特定功能。每个组件均有四个通用方法：disable、enable、destroy、option，也有组件自己的特定方法。

disable 禁止操作组件

组件依然可见，但暂停响应用户操作。

以下代码使日期选择控件暂停响应用户操作：

$("#id").datepicker("disable");

enable 允许操作组件

重新允许操作暂停响应用户操作的组件。

以下代码使日期选择控件暂停响应用户操作：

$("#id").datepicker("enable");

destroy 销毁组件实例

销毁组件实例后，由 jQuery UI 添加的 HTML 标签、DOM 事件均被删除，恢复原始 HTML 代码。

option 修改或获取属性值

详见上方“属性”说明。

jQuery UI 各组件生成固定格式的 HTML 代码和 CSS 类名，可通过修改 CSS 的方式改变样式。各组件文档页将提供所生成的标准代码，可参考该代码配置 CSS。

通过 ThemeRoller，可为 jQuery UI 制定各种主题，可配置字体、字号、文字颜色、底纹样式、底纹颜色、圆角大小等。

posted @ 2011-09-01 22:52  Mr-sniper  阅读(537)  评论(0)  编辑  收藏  举报