jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。

学习jQuery UI插件需要引入jquery-ui-1.9.2.min.js，

拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()

方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

写法： $("#x").draggable({axis:'x'});//只能X轴拖拽

$("#y").draggable({axis:'y'})//只能Y轴拖拽

注意写法是draggable不是dragable

放置插件——droppable

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

例：<div class=”cart”><div id=”tip”>购物车中还没有产品</div></div>

Var intNum = 0

$(function(){

$(“.drag”).draggable();

$(“.cart”).droppable({

drop:function(){

intNum++

$(this).addClass(“focus”).find(“#tip”).html(“购物车共有” + intNum + “个产品”);

}

});

});

拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，

例：<ul>

<li>1)足球</li>

<li>2)散步</li>

<li>3)篮球</li>

<li>4)乒乓球</li>

<li>5)骑自行车</li>

</ul>

$(function(){

$(“ul”).sortable({

delay: 2, //为防止与点击事件冲突延时2s

opacity：0.35 //透明度

});

});

面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：

$(selector).accordion({options});

其中，参数selector为整个面板元素，options参数为方法对应的配置对象。

例：<div id="accordion">

<h3>

<a href="#">白富美</a></h3>

<p>咱们结婚吧!</p>

<h3>

<a href="#">土豪族</a></h3>

<p>咱们交个朋友吧!</p>

</div>

$(function () {

$("#accordion").accordion();

});//第一个默认展开的，其他默认关闭，展开一个后，其他自动关闭

选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

例：<div id="tabs">

<ul>

<li><a href="#tabs-1">最爱吃的水果</a></li>

<li><a href="#tabs-2">最喜欢的运动</a></li>

</ul>

<div id="tabs-1">

<p>橘子</p>

<p>香蕉</p>

<p>葡萄</p>

<p>苹果</p>

<p>西瓜</p>

</div>

<div id="tabs-2">

<p>足球</p>

<p>散步</p>

<p>篮球</p>

<p>乒乓球</p>

<p>骑自行车</p>

</div>

</div>

Js部分：$(function () {

$("#tabs").tabs({

//设置各选项卡在切换时的动画效果

fx: { opacity: "toggle", height: "toggle" },

event: "mousemove" //通过移动鼠标事件切换选项卡

})

});

对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

$(selector).dialog({options});

selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

<div id="divtest">

<div>

<span id="spnName">张三</span>

<input id="btnDelete" type="button" value="删除" class="fr"/>

</div>

<div id='dialog-modal'></div>

</div>

<script type="text/javascript">

$(function () {

$("#btnDelete").bind("click", function () { //询问按钮事件

if ($("#spnName").html() != null) { //如果对象不为空

sys_Confirm("您真的要删除该条记录吗？");

return false;

}

});

});

function sys_Confirm(content) { //弹出询问信息窗口

$("#dialog-modal").dialog({

height: 140,

modal: true,是否生成模态窗口

title: '系统提示',

hide: 'slide',//explode表示分解式删除,slide表示向左滑动删除

buttons: {

'确定': function () {

$("#spnName").remove();

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

},

'取消': function () {

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

}

},

open: function (event, ui) {

$(this).html("");

$(this).append("<p>" + content + "</p>");

}

});

}

</script>

菜单工具插件——menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象

例<ul id="menu">

<li><a href=”#”>菜单1</a>

<ul>

<li><a href="#">子菜单01</a></li>

<li><a href="#">子菜单02</a></li>

<li><a href="#">子菜单03</a></li>

</ul>

<li>

</ul>

Js部分：$(function () {

$("#menu").menu();

});

微调按钮插件——spinner（知道就行）

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

例：选取颜色：<span id="spnColor" class="input fl"><input /></span>

$(function () {

//定义变量

var intR = 0, intG = 0, intB = 0, strColor;

$("input").spinner({

//初始化插件

max: 10,

min: 0,

//设置微调按钮递增/递减事件

spin: function (event, ui) {

if (ui.value == 8)

spnPrev.style.backgroundColor = "red";

else

spnPrev.style.backgroundColor = "green";

},

//设置微调按钮值改变事件

change: function (event, ui) {

var intTmp = $(this).spinner("value");

if (intTmp < 0) $(this).spinner("value", 0);

if (intTmp > 10) $(this).spinner("value", 10);

if (intTmp == 8)

spnPrev.style.backgroundColor = "red";

else

spnPrev.style.backgroundColor = "green";

}

});

});

工具提示插件——tooltip

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

例： <label for="name">姓名</label>

<input id="name" name="name" title="请输入你的名字" />

Js部分：//显示对应的title

$(function () {

$("#name").tooltip({

show: {

effect: "slideDown",

delay: 350

},

hide: {

effect: "explode",

delay: 350

},

position: {//my (x, y) at (x, y)

my: "left top",

at: "left bottom"

}

});

});