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(){

功能实现

}

} ,

...

{