jQuery UI 插件

jQuery UI 插件

1、概述

1.简介 UI -> User Interface用户界面

jQuery UI是jQuery官方提供的插件,他强化了jQuery中搭载的动画效果及特效,以实现更高级的处理与显示效果,并且提供了实现交互式web应用程序的小部件(widget)

2.分类 -> 大致分为三大类

1)交互组件 -> 拖动,投放,缩放等

2)页面部件 -> 折叠,按钮,对话框,标签,日期选择,选项卡等

3)effect特效

3.构成: 由JavaScript与CSS构成,在jQuery UI官方网站上可以选择主题, 颜色,和设计个人独特的小部件

4.下载: http://jqueryui.com/ -> jquery-ui-1.8.20.custom.zip

5.搭建jQuery UI 环境

1)解压 jquery-ui-1.8.20.custom.zip后

index.html -> 显示页面

js目录 -> jquery-1.7.2.min.js、jquery-ui-1.8.20.custom.min.js

css目录 -> 包含jQuery UI插件对应的主题样式,默认为ui-lightness

2)在项目中导入

ui-lightness

jquery-1.7.2.min.js

jquery-ui-1.8.20.custom.min.js

2、jQuery UI交互组件

1.拖放组件

语法: 元素节点.draggable([options])

其中options为键值对的参数, 多个使用逗号隔开

在页面中导入js和css:

<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.20.custom.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>

2.投放组件 -> droppable

3.缩放组件 -> resizable

3、jQuery页面部件

1.按钮部件 -> button

1)页面结构

<input type="button" value="".. />

type=submit,reset,image

<div>...</div>

<button id="btn">....</button>

...

注: 一般使用button标签

2)语法

$("#btn").button({

选项1：值1 ,

选项2：值2 ,

...

选项n：值n

}) ;

3)选项(Options)

是否可用(激活):disabled:true/false

按钮文字: label:string

图标: icons

{

primary:"ui-icon-search", //前面图标

secondary:"ui-icon-search" //后面图标

}

图标在JQuery中有提供, 具体可查文档

是否显示文字: text:true/false

4)事件

create:function() {

创建button时触发...

}

5)方法

禁用: button("disable")

启用: button("enable")

销毁: button("destroy")

更新按钮布局: button("refresh")

获取按钮的JQuery对象: button("widget")

获取选项参数的值: button("option",param)

设置选项参数的值: button("option",param,value)

节点.buttonset() : 把节点下所有的节点设置按钮UI

2.对话框部件 -> dialog

1) 对话框页面结构

<div id="dialog" title="标题">
​
 <p>Dialog content goes here.</p>
​
</div>

2)选项(Options)

语法:

$("#dialog").dialog({

选项1: 值1 ,

选项2: 值2 ,

...

选项n: 值n

}) ;

外观选项:title+button

标题定义:

title:"标题名"

按钮定义:

//对象定义法,$(this)为当前的对话框

button: {

按钮标题名称 : function() {

按钮事件-功能实现

} ,

...

"关闭":function() {

$(this).dialog("close") ;

}

}

//数组定义法,$(this)为当前的对话框

button: [

{

text:"按钮标题名称",

click:function(){

功能实现

}

} ,

...

{

text:"关闭" ,

click:function() {

$(this).dialog("close") ;

}

}

]

大小设置:

宽: width:"400px" ,

高: height:250 ,

最大宽: maxWidth:600 ,

最小宽: minWidth:300 ,

最大高: maxHeight:400 ,

最小高: minHeight:150

注:

默认单位为px,当指定单位时，要加双引号

高度默认为：auto

显示效果:

淡入淡出:

show:true/false

hide:true/false

其它:

blind

bounce

clip

slide

drop

fold

highlight

puff

scale

pulsate

行为选项:

是否自动打开(一般用于先定义,后打开): autoOpen:true/false

是否可移动对话框: draggable:true/false

是否可改变对话框大小: resizable:true/false

是否为模式对话框: modal:true/false

设置关闭按钮的提示文字: closeText:string

3)事件

语法:

语法一:

事件:function(e[,ui]) {

}

eg:

focus:function() {

alert("获取焦点了") ;

}

语法二: on方法处理

节点.on("事件名",function(){

}) ;

其中, 事件名有:

dialogfocus

dialogcreate,

dialogopen,

...

eg:

$("#login").on("dialogopen",function(){

alert("打开...") ;

}) ;

分类:

focus

create

open

close

beforeClose

功能基本与close相同，当return false，对话框不关闭

drag

dragStart

dragStop

获取前前移动的坐标

ui.position.top/left

ui.offset.top/left

resize

resizeStart

resizeStop

获取改变后长宽: ui.size.width/height

获取改变后坐标位置: ui.position.top/left

获取改变前长宽: ui.originalSize.width/height

获取改变前坐标位置: ui.originalPosition.top/left

4)方法

打开对话框: dialog("open")

关闭对话框: dialog("close")

销毁对话框: dialog("destroy")

判断对话框是否打开: dialog("isOpen")

获取对话框JQuery对象: dialog("widget")

将对话框置前: dialog("moveToTop")

获取选项参数值(getter): dialog("option",param)

设置选项参数值(setter): dialog("option",param,value)

3.日期选择器部件 -> datepicker

1)页面结构

文本框

2)语法

$("seleter").datepicker({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

1.定义日期格式

dataFormat 如:yy-mm-dd

2. 定义星期标题显示的格式, 分别为长格式, 短格式, 最小格式(中文只显示最小格式)

dayNames

dayNamesShort

dayNamesMin

3.定义月份标题显示的格式, 分别为长格式, 短格式(中文只显示最长格式)

monthNames

monthNamesShort

4.指定日期显示的目标位置和显示格式,#ID名

altField altFormat

5.追加提示信息

appendText

6.是否显示周

showWeek

7.指定从星期几开始, 默认为0(从周日开始)

firstDay

8.是否可用

disabled:true/false

9.显示月份的个数

numberOfMonths:n/[row,col]

10.是否显示非本月份的其它日期

showOtherMonths:true/false

11.是否可选择非本月份的其它日期，必须设置 -> showOtherMonths:true

selectOtherMonths:true/false

12.设置是否选择年份和月份

changeYear:true/false

changeMonth:true/false

13.日历可以选择的最小日期

minDate:-x/"-xm"/"-xw" 如: -3或-3m或-3w

14.日历可以选择的最大日期

maxDate:x/"xm"/"xw" 如:3或3m或3w

15.设置预设默认选定日期, 没有指定, 则默认为当天

defaultDate

16.设置年份的范围

yearRange:"from:to"

17.设置是否显示上一月或下一月

hideIfNoPrevNext:true/false

18.是否反向显示日期

isRTL:true/false

19.显示日期的文本框是否自适应日期的长度

autoSize:true/false

20.设置日历显示方式

showOn:string-focus(默认),button,both

21.设置触发按钮文本内容

buttonText

22.设置触发按钮图片内容

buttonImage

23.设置是否只显示图片内容

buttonImageOnly:true/false

24.是否显示面板按钮

showButtonPanel:true/false

25.关闭按钮的文本

closeText

26.当前按钮的文本

currentText

27.上一个月的文本

nextText

28.下一个月的文本

preText

29.设置年份后的文本

yearSuffix

30.prev,next和current中的文本文本内容是否支持格式化(mm,dd,yy)

navigationAsDateFormat:true/false

31.月份是否显示在年份的后面

showMonthAfterYear:true/false

32.设置动画效果,默认是fadeIn, 可以指定其他动画效果(查文档)

showAnim:fadeIn/String

33.设置动画显示持续时间, 默认是300毫秒

duration:300/数值

4)事件

beforeShow

beforeShowDay

onChangeMonthYear

onClose

onSelect

//该事件有一个参数, 返回值为数组[bool,"class","tips"]

//周六, 周日不能选择

beforeShowDay:function(date) {

if(date.getDay()==6 || date.getDay()==0) {

return [false,"dis","双休"] ;

} else {

return [true] ;

}

}

5)方法

是否禁用:datepicker("isDisable")

显示:datepicker("show")

隐藏:datepicker("hide")

销毁:datepicker("destroy")

刷新:datepicker("refresh")

获取当前选择的日历:datepicker("getDate")

设置当前选择的日历:datepicker("setDate",date)

获取日历的JQuery对象:datepicker("widget")

获取选项参数的值:datepicker("option",param)

设置选项参数的值:datepicker("option",param,value)

4.选项卡部件 -> tabs

1)页面结构

 <div id="tabs">
​
    <ul>
​
       <li>Nunc tincidunt</li>
​
       <li>Proin dolor</li>
​
       <li>Aenean lacinia</li>
​
    </ul>
​
    <div id="tabs-1">
​
       <p>Tab 1 content</p>
​
    </div>
​
    <div id="tabs-2">
​
       <p>Tab 2 content</p>
​
    </div>
​
    <div id="tabs-3">
​
       <p>Tab 3 content</p>
​
    </div>
​
 </div>
​

2)语法

$("seleter").tabs({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

1.是否支持折叠

collapsible:true/false

2.是否禁用

disabled:true/false或数组[], 如: [0,1]

3.指定触发事件,默认为click

event

active:bool或数值

bool:设置是否折叠, 结合collapsible:true一起用

数值: 设置某个选项卡默认打开

heightStyle

content:根据内容伸展高度

auto: 自动根据最高的那一选项作为基准

fill:填充一定的可用高度

指定动画效果

show

hide

4)事件

create

activate

beforeActivate

load

beforeLoad

5)方法

禁用:datepicker("disable")/datepicker("disable",index)

启用:tabs("enable")/datepicker("enable",index)

隐藏:datepicker("load")

销毁:datepicker("destroy")

刷新:datepicker("refresh")

获取日历的JQuery对象:datepicker("widget")

获取选项参数的值:datepicker("option",param)

设置选项参数的值:tabs("option",param,value)

5.提示部件 -> tooltip

1)页面结构

    在节点元素中添加title属性,指定要提示的内容

2)语法

$("seleter").tooltip({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

是否可用(激活):disabled:true/false

设置提示内容(title属性值):content:string

设置选择器以限定范围(过滤):items

给提示指定class样式:tooltipClass

设置位置:position

eg:

position:{

my:"left center" ,

at:"right+5 center" //可以加减某个数进行微调

}

my:以目标点左下角为基准

at:以my为基准

视觉效果:

淡入淡出

show:true/false

hide:true/false

其它

blind

bounce

clip

slide

drop

fold

highlight

puff

scale

pulsate

设置是否跟随鼠标移动:track:true/false

4)事件

create:function(e,ui) {

创建button时触发...

}

open:function(e,ui) {

创建button时触发...

}

close:function(e,ui) {

创建button时触发...

}

5)方法

禁用:tooltip("disable")

启用:tooltip("enable")

销毁:tooltip("destroy")

打开:tooltip("open")

关闭:tooltip("close")

获取按钮的JQuery对象:tooltip("widget")

获取选项参数的值:tooltip("option",param)

设置选项参数的值:tooltip("option",param,value)

6.表单验证插件 -> validate

1)页面结构

form下面的各控件

2)语法

$("seleter").validate({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

是否必选:required:true ,

是否验证Emaile:true

是否验证日期​date:​true

是否验证数字:number:true

是否正整数:digits:true

最小字符数:minlength:5 ,

最大字符数:maxlength:10

字符数量范围:rangelength:[3,6]

最小值:min:5,

最大值:max:10

数值范围:range:[1,5] ,

success:"class" //设置某一项成功后加某个class类

//内置的样式，不需要使用success指定

.valid {

background: url("succuess.png") no-repeat right;

}

//可使用success属性指定,success:"suc"

.suc {

background: url("succuess.png") no-repeat right;

}

4)事件

//表单所有的验证成功后执行

submitHandler:function(form) {

alert("验证成功") ;

$(form).serialize() ;

$(...).ajax() ;

}

success:function(label) {

label.addClass("success").text("yes") ;

}

highlight:function(element,errorClass) {

$(element).css("border","1px solid red") ;

}

unhighlight:function(element,errorClass) {

$(element).css("border","1px solid #ccc") ;

}

7.自动填充插件 -> autocomplete

1)页面结构

文本框

指定数据源

2)语法

$("seleter").autocomplete({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

是否可用(激活):disabled:true/false

指定数据源:source

触发补全列表最少输入字符数(默认为1):minLength

延迟显示(默认300毫秒):delay

第一个项目是否自动被选定:autoFocus:true/false

设置位置:position

eg:

position:{

my:"left center" ,

at:"right+5 center" //可以加减某个数进行微调

}

my:以目标点左下角为基准

at:以my为基准

on方法实现事件

autocompleteopen

autocompleteclose

autocompletesearch

autocompletefocus

....

eg:

$("#search").on("autocompleteopen",function(){

....

}) ;

4)事件

create

open

close

focus:function(e,ui) {

alert(ui.item.label) ;

alert(ui.item.value) ;

ui.item.value = ui.item.label + "@qq.com" ;

}

select:选择项目列表

change:改变项目列表(文本框内容改变且失去焦点时触发)

search:搜索项目列表完毕后触发

response:功能基本同上,ui有一个content集合(包含label,value两个属性),表示搜索结束后的结果(数组集合)

response:function(e,ui) {

alert(ui.content[0].value) ;

}

5)方法

禁用:autocomplete("disable")

启用:autocomplete("enable")

销毁:autocomplete("destroy")

关闭:autocomplete("close")

在数据源获取匹配的字符串(自动搜索):autocomplete("search","value")

获取按钮的JQuery对象:autocomplete("widget")

获取选项参数的值:autocomplete("option",param)

设置选项参数的值:autocomplete("option",param,value)

3、自定义部件

1.jQuery插件开发

1) $.extend -> 如果把jQuery当成一个类，$.extend相当于为该类添加了静态方法extend

2) $.fn ->$.fn等于​$.prototype

2.jQuery UI部件开发

用$.widget()方法开始定义你的组件,它只接收三个参数: 第一个是组件名称, 第二个是可选的基类组件(默认的基类是$.Widget), 第三个是组件的原型