jQuery UI:http://jqueryui.com/

jQuery UI介绍:

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容  IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。

组件构成
  jQuery UI 主要分为3个部分:交互、微件和效果库。
交互
  交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortable等。
微件
  主要是一些界面的扩展,包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,新版本的UI将包含更多的微件。
效果库
  用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。
编辑本段其它
  jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件
  jQuery UI 与 jquery 的主要区别是:
  (1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
  (2) jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。
  (3) jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。

jQueryUI tab

1 属性
1.11 ajaxOptions
,当选项卡加载内容时,添加一个ajax选项。只有ajax时,添加的ajax选项才起作用。默认值为null。上面的例子中,添加了beforeSend和success两个选项。ajax还有一些选项请参考jquery ajax,这里不做详解。。。
1.12 初始化设置例:请注意,$('.selector')是tabs 的类名,在本例中.selector=#tabs,以后不再说明。
$('.selector').tabs({ ajaxOptions: { async: false } });//这里是将异步改为了同步。
1.13 初始化后的参数获取和设置:请注意:getter为获取,发音:盖特儿,setter为设置,发音:塞特儿,以后不再说明。
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

1.21 cache 默认为false,无缓存。这个选项用于ajax调用,简单的说无缓存,就是每次发送请求都刷新;有缓存就是第一次请求刷新,以后就不刷新了,关闭页面是另外一回事。ajaxOptions:{cache:false}应该和这个功能是一样的吧。
1.22 初始化设置例:
$('.selector').tabs({ cache: true });
2.23 初始化后的参数获取和设置:
//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);

1.31collapsible,意思是可折叠的,默认选项是false,不可以折叠。如果设置为true,允许用户将已经选中的选项卡内容折叠起来。这样说吧:点击一次选项卡2,选项卡2内容显示出来了,这时候再次点击选项卡2,选项卡的内容区就收了起来,再次点击选项卡2,选项卡的内容区则又展开了。明白否?知道你不明白,不明白就用最上面的例子试试吧。
1.32 初始化设置例:
$('.selector').tabs({ collapsible: true });
1.33 初始化后的参数获取和设置:请参考1.23...

1.41 cookie 默认值为null,需要cookie插件。保存最后一次选择的选项卡到cookie 中。可使用的选项例:(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
1.42 初始化设置例:$('.selector').tabs({ cookie: { expires: 30 } });
1.43 初始化后的参数获取和设置:请参考1.23...

1.51deselectable 默认为false,作用似乎和collapsible一样。

1.61 disabled 设置哪些选项卡不可用,是一个数组例[0,1,2],也就是第一个、第二个、第三个选项卡。默认为[]。
1.62 初始化设置例:$('.selector').tabs({ disabled: [1, 2] });
1.63 初始化后的参数获取和设置:请参考1.23...

1.71 event ,切换选项卡的事件,默认为'click',点击切换选项卡。
1.72 初始化设置例:$('.selector').tabs({ event: 'mouseover' }); //鼠标滑过切换选项卡
1.73 初始化后的参数获取和设置:请参考1.23...

1.81 fx,切换选项卡时的动画效果,默认为:null,无动画效果,
1.82 初始化设置:请参看最上面的例子。
1.83 初始化后的参数获取和设置:请参考1.23...

1.91 idPrefix ,在使用ajax时,idPrefix选项可以为其添加一个唯一的id,默认为:'ui-tabs-' 。
1.92 初始化设置例:$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
1.93 初始化后的参数获取和设置:请参考1.23...

1.101 selected,初始化时,哪个选项卡被选中,默认为0,就是第一个选项卡被选中。
1.102 初始化设置例:$('.selector').tabs({ selected: 3 });
1.103 初始化后的参数获取和设置:请参考1.23...

1.111 spinner,当远程内容加载的时候,(ajax),spinner字符串的html内容将被显示在选项卡的标题上。(我很奇怪,我自己试了,怎么不起作用?)
1.112 初始化设置例:$('.selector').tabs({ spinner: 'Retrieving data...' });
1.113 初始化后的参数获取和设置:请参考1.23...

1.121 panelTemplate ,

1.131 tabTemplate ,

2 事件
先给出一个事件绑定的例子,请注意:
$('#example').bind('tabsselect', function(event, ui) {
   ui.tab     // 被选中(点击后)的选项卡元素
   ui.panel   //这个元素包含被选中(点击后)的选项卡的内容
   ui.index   //返回一个被选中(或点击后)选项卡的索引值(从0开始)
});

2.11 select 类型:tabsselect ,点击选项卡时触发该事件。
2.12 初始化时绑定事件:
$('.selector').tabs({
   select: function(event, ui) { ... }
});
2.13 在初始化后使用事件绑定绑定该事件:
$('.selector').bind('tabsselect', function(event, ui) {
...
});

2.21 load,类型:tabsload 一个远程(ajax)选项卡的内容被加载完成后触发该事件。
2.22 参考2.12
2.23 参考2.13
2.31 show,类型:tabsshow 当选项卡显示后触发该事件。
2.41 add,类型:tabsadd ,当一个选项卡被添加后触发。
2.51 remove ,类型tabsremove ,当一个选项卡被删除后触发。
2.61 enable ,类型tabsenable ,当一个选项卡可用时触发。
2.71 disable,类型tabsdisable,当一个选项卡不可用时触发。

3 方法
3.11 destroy,哈哈,又到了我最喜欢的摧毁地球时间。例:.tabs( 'destroy' ) 
3.21 disable,整个选项卡不可用。
3.31 enable,整个选项卡可用。.tabs( 'enable' ) 
3.41 option,设置属性。例:.tabs( 'option' , optionName , [value])
3.51 add,remove,添加、删除选项卡。例:.tabs( 'add' , url , label , [index]) ,.tabs( 'remove' , index )
3.61 enable,设置某个选项卡标签可用。例:.tabs( 'enable' , index ) 
3.71 disable,设置某个选项卡标签不可用。例:.tabs( 'disable' , index ) 
3.81 select,选择一个选项卡标签。例:.tabs( 'select' , index ) ,index从0开始。
3.91 load,重载一个ajax选项卡的内容,这个一直载入远程内容,即使cache设置为true,第二个参数是要重载选项卡的索引值。例:.tabs( 'load' , index )
3.101 url,当一个ajax选项卡将要加载时,改变url。.tabs( 'url' , index , url ) 
3.111 abort,中止所有运行在tab标签上的ajax请求或动画。.tabs( 'abort' ) 
3.121 rotate, 自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒,是两个标签自动翻滚所需要的时间,设为0或null为停止翻滚。第三个参数是设置当用户选择一个选项卡标签后是否继续翻滚,默认为:false,不继续。
真累,歇歇再说吧。。。
4 技巧
4.1 如何接收已选中选项卡标签的索引值?
例:var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
4.2 如何用一个其它元素代替选项卡单击事件来切换选项卡?
例:var $tabs = $('#example').tabs(); // 第一个标签被选中
$('#my-text-link').click(function() { // 绑定单击事件
    $tabs.tabs('select', 2); // 切换到第三个选项卡标签
    return false;
});
4.3 如何立刻选择刚添加的选项卡标签?
例:var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});
4.4 如何在一个新窗口中打开选项卡标签?
例:$('#example').tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, 'load.tabs');
        return false;
    }
});

jQuery UI dialog

1 属性

1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知道.dialog("open")的时候才弹出dialog窗口。默认为:true。

1.12 初始化例:请注意,$('.selector')是dialog 的类名,在本例中.selector=#dialoag,以后不再说明。

$('.selector').dialog({ autoOpen: false });

1.13 初始化后,得到和设置此属性例:

//获得

var autoOpen = $('.selector').dialog('option', 'autoOpen');

//设置

$('.selector').dialog('option', 'autoOpen', false);

1.21 bgiframe 默认为false ,When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

在IE6下,让后面那个灰屏盖住select。

1.22 初始化例:

$('.selector').dialog({ bgiframe: true });

1.23 初始化后,得到和设置:

//获取

var bgiframe = $('.selector').dialog('option', 'bgiframe');

//设置

$('.selector').dialog('option', 'bgiframe', true);

1.31 buttons 显示一个按钮,并写上按钮的文本,设置按钮点击函数。默认为{},没有按钮。

最上面的例子中已经有buttons属性的用法,请注意。

1.32 初始化例:

$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });

1.33 初始化后,得到和设置:

//获取

var buttons = $('.selector').dialog('option', 'buttons');

//设置

$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 closeOnEscape 为true的时候,点击键盘ESC键关闭dialog,默认为true;

1.42 初始化例:

$('.selector').dialog({ closeOnEscape: false });

1.43 初始化后,得到和设置:

//获取

var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');

//设置

$('.selector').dialog('option', 'closeOnEscape', false);

1.51 dialogClass 类型将被添加到dialog,默认为空

1.52 初始化例:

$('.selector').dialog({ dialogClass: 'alert' });

1.53 初始化后,得到和设置:

//获取

var dialogClass = $('.selector').dialog('option', 'dialogClass');

//设置

$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 draggable、resizable : draggable是否可以使用标题头进行拖动,默认为true,可以拖动;resizable是否可以改变dialog的大小,默认为true,可以改变大小。

1.62 初始化例:

$('.selector').dialog({ draggable: false,resizable:false });

1.63 初始化后,得到和设置:

//获取

var draggable = $('.selector').dialog('option', 'draggable');

//设置

$('.selector').dialog('option', 'draggable', false);

1.71 width、height ,dialog的宽和高,默认为auto,自动。

1.72 初始化例:

$('.selector').dialog({ height: 530,width:200 });

1.73 初始化后,得到和设置:请参考1.63

1.81 maxWidth、maxHeight、minWidth、minHeight ,dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false,为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。

1.82 初始化例:

$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });

1.83 初始化后,得到和设置:请参考1.63

1.91 hide、show ,当dialog关闭和打开时候的效果。默认为null,无效果

1.92 初始化例:最上面的实例中用到,请自己看吧。

1.93 初始化后,得到和设置:请参考1.63

1.101 modal,是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。

1.102 初始化例:$('.selector').dialog({ modal: true });

1.103 初始化后,得到和设置:请参考1.63

1.111 title,dialog的标题文字,默认为空。

1.112 初始化例:见最上面的实例。1.113 初始化后,得到和设置:请参考1.63

1.121 position ,dialog的显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。

1.122 初始化例:$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后,得到和设置:请参考1.63

1.131 zIndex, dialog的zindex值,默认值为1000.

1.132 初始化例:$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后,得到和设置:请参考1.63

1.141 stack 默认值为true,当dialog获得焦点是,dialog将在最上面。

1.142 初始化例:$('.selector').dialog({ stack: false }); 1.143 初始化后,得到和设置:请参考1.63

2 事件

2.11 beforeclose 类型dialogbeforeclose , 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。

2.12 初始化例:$('.selector').dialog({

beforeclose: function(event, ui) { ... }

});

2.13 使用类型绑定此事件例:$('.selector').bind('dialogbeforeclose', function(event, ui) {

...

});

2.21 close 类型:dialogclose ,当dialog被关闭后触发此事件。

2.22 初始化例:$('.selector').dialog({

close: function(event, ui) { ... }

});

2.23 使用类型绑定此事件例:$('.selector').bind('dialogclose', function(event, ui) {

...

});

2.3 open 类型:dialogopen ,当dialog打开时触发。(篇幅有限,该省略的就省略了啊,初始化例和使用类型绑定事件可以向上参考。)

2.4 focus 类型:dialogfocus ,当dialog获得焦点时触发。

2.5 dragStart 类型:dragStart,当dialog拖动开始时触发。

2.6 drag 类型:drag ,当dialog被拖动时触发。

2.7 dragStop 类型:dragStop ,当dialog拖动完成时触发。

2.8 resizeStart 类型:resizeStart ,当dialog开始改变窗体大小时触发。

2.9 resize 类型:resize,当dialog被改变大小时触发。

2.10 resizeStop 类型:resizeStop,当改变完大小时触发。

3 方法

3.1 destroy ,我喜欢这个哦,摧毁地球。。。 例:.dialog( 'destroy' )

3.2 disable,dialog不可用,例:.dialog('disable');

3.3 enable,dialog可用,例,如3.2

3.4 close,open,关闭、打开dialog

3.5 option ,设置和获取dialog属性,例如:.dialog( 'option' , optionName , [value] ) ,如果没有value,将是获取。

3.6 isOpen ,如果dialog打开则返回true,例如:.dialog('isOpen')

3.7 moveToTop ,将dialog移到最上层,例如:.dialog( 'moveToTop' )

jQuery UI accordion

1 选项:
1.1 active 这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。哈哈。
初始化设置例:$('#accordion').accordion({ active: 2 });
在初始化之后的获取和设置例:
//获取 var active = $('#accordion').accordion('option', 'active'); //设置 $('#accordion').accordion('option', 'active', 2);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果,或不使用动画效果(设置false),除了默认设置,使用'bounceslide'和'easeslide'需要UI Effects Core 。。。嘿嘿。。。
初始化设置例: $('#accordion').accordion({ animated: 'easeslide' });
在初始化之后的获取和设置例:
//获取
var animated = $('#accordion').accordion('option', 'animated');
//设置
$('#accordion').accordion('option', 'animated', 'easeslide');
1.3 autoHeight 默认是true,如果设置,所有内容部分的高被设定为其中最高内容的高。 初始化设置:$('#accordion').accordion({ autoHeight: false });
初始化以后的获取或设置
//获取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置
$('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false,似乎是清除style,哈哈~~~
初始化设置 $('#accordion').accordion({ clearStyle: true });
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5 event 默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例:$('#accordion').accordion(event:"mouseover");
初始化后的设置请参考上面的 ,此处省略。。。
1.6 fillSpace ,充满父元素的高,默认为false ,使用此项,autoHeight无效。
初始化设置例:$('#accordion').accordion({ fillSpace: true });
初始化后的获取和设置请参考上面的 ,此处省略。。。
1.7 header,设置头元素(见上面实例),默认值为:'> li > :first-child,> :not(li):even'
此处省略,自己理解。。。
1.8 icon,设置小图标,默认值为: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
另外,请看下面的英国字儿~~~只可意会不可言传。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated byjQuery UI ThemeRoller

初始化设置例:$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。
1.9 navigation 和navigationFilter暂时不知道到底是做什么用的,回头再说吧。。。

2 事件
2.1 change事件 accordion改变时触发的事件,有两种绑定方法
第一种:
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 对象, 激活 header
ui.oldHeader // jQuery 对象, 之前 header
ui.newContent // jQuery 对象, 激活 content
ui.oldContent // jQuery 对象, 之前 content
});这种方法在前面的例子中已经都有喽~~
第二种:
$('#accordion').accordion({
   change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。

3 方法
3.1 destroy :毁灭地球...
使用方法:.accordion( 'destroy' ) 
3.2 disable:accordion不可用,使之无效。
使用方法:.accordion('disable')
3.3 enable: 可用,使之有效,使用方法:略...
3.4 option:参数,使用方法:前面都已经用过了,例:.accordion( 'option' , optionName ,[value]) 
3.5 activate:也是设置默认选项,和参数active 作用一样。例:.accordion( 'activate' , index )

JQUERY插件学习之jQuery UI的更多相关文章

  1. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  2. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  3. 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

    [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...

  4. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  5. jQuery插件学习(一)

    由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...

  6. jquery插件 - 学习笔记 (插件参数及函数的调用)

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  7. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  8. JQuery 入门学习附常用UI模块

    一.简介 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操 ...

  9. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. AndroidManifest.xml文件详解(application)

    http://blog.csdn.net/think_soft/article/details/7557101 语法(SYNATX): <application android:allowTas ...

  2. 阿里云轻量级学生机搭建FTP最新教程

    碰了几次壁,我整理一下分析自己在阿里云上成功安装FTP的教程. 1.使用root用户进入云服务器. 2.rpm  -qa|grep vsftpd 查看是否安装了ftp,一般阿里云服务器你以前没安装过, ...

  3. go chapter 4 - 不定长参数

    https://www.cnblogs.com/chase-wind/p/5644838.html 空接口可以指向任何数据对象,所以可以使用interface{}定义任意类型变量,同时interfac ...

  4. 如何将hdf5文件转换成tflite文件

    我们用keras训练模型后,通常保存的模型格式类型为hdf5格式,也就是.h5文件. 但如果我们想要移植到移动端,特别是基于tensorflow支持的移动端,那就需要转换成tflite格式. 如何转换 ...

  5. CentOS7编译安装PostgreSQL

    创建组和用户 groupadd postgres useradd -g postgres postgres passwd postgres 编译安装 yum install -y gcc gcc-c+ ...

  6. [BZOJ 2668] 交换棋子

    Link: BZOJ 2668 传送门 Solution: 重点在于对于每条转移路径:首尾算一次,中间节点算两次 可以一点拆三点,将原流量拆成入流量和出流量 但其实也可以就拆两点,分前后是否是一首尾点 ...

  7. 【分类讨论】【计算几何】【凸包】hihocoder 1582 ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 E. Territorial Dispute

    题意:平面上n个点,问你是否存在一种黑白染色方案,使得对于该方案,无法使用一条直线使得黑色点划分在直线一侧,白色点划分在另一侧.如果存在,输出一种方案. 如果n<=2,显然不存在. 如果所有点共 ...

  8. SourceTree运行慢的解决方案

    以下两个Git命令可以解决SourceTree运行慢: git gc git prune 可以在SourceTree点击命令行模式打开Git命令行窗口输入,等待片刻执行完成,SourceTree的运行 ...

  9. Mac下的MySQL修改默认连接字符集

    进入命令行执行以下命令: sudo vim /etc/my.cnf [client] default-character-set=utf8 [mysqld] character-set-server= ...

  10. <摘录>Linux 环境下编译 0.11版本内核 kernel

    系统环境:Fedora 13 + gcc-4.4.5 最近在看<linux内核0.11完全注释>一书,由于书中涉及汇编语言的地方众多,本人在大学时汇编语言学得一塌糊涂,所以实在看不下去了, ...