<script src="../../jquery-2.1.3.min.js"></script><script src="../../jquery-ui.min.js"></script><script src="js.js"></script><link type="text/css" href="../../jquery-ui.min.css" rel="stylesheet"><a href="http://www.baidu.com" id="a_btn">百度</a>
<button>百度</button>
<input type="text">

js.js:

$(document).ready(function () {$("#a_btn").button();$("input").datepicker();
});

2.jQuery UI Interactions

1.draggable

<div style="width: 100px;height: 100px;border: 2px solid red;" id="div"></div>

$(document).ready(function () {$("#div").draggable();//变成可拖动的
});

2.droppable

<div style="width: 100px;height: 100px;border: 2px solid blue;" id="Rect1"></div>
<div style="width: 200px;height: 200px;border: 2px solid #ffff00;" id="Rect2"></div>

$(document).ready(function () {$("#Rect1").draggable();//拖动$("#Rect2").droppable();//放置$("#Rect2").on("drop",      //drop事件需要droppable()function (event, ui) {//event事件type,ui表示触发的事件对象$("#Rect2").text("drop事件");});
});

3.resizeable

<div style="width: 100px;height: 100px;border: 2px solid blue;" id="div"></div>

$(document).ready(function () {$("#div").resizable();//尺寸,可放大/缩小
});

4.selectable

<strong>世界上最美丽的人是?</strong>
<ul id="selector"><li id="right">A.mm</li><!--正确答案--><li>B.U</li><li>C.me</li>
</ul>
<a href="#" id="btn">提交</a>

css:

<style>.ui-selected{background-color: #ffff00;}</style>

$(document).ready(function () {$("#btn").button();$("#selector").selectable();//选择时添加class:  ui-selected$("#btn").on("click", function () {if($("#right").hasClass("ui-selected")){alert("答对了!");}});
});

5.sortable

<ul id="sortable"><li>苹果</li><li>梨子</li><li>香蕉</li><li>桃子</li>
</ul>

$(document).ready(function () {$("#sortable").sortable();//选项可拖动->换位置
});

3.jQuery UI Widgets

1.Accordion

<div id="accordion"><h3>选项1</h3><div><p>hello</p></div><h3>选项2</h3><div><p>world</p></div><h3>选项3</h3><div><p>hehe</p></div><h3>选项4</h3><div><p>haha</p></div></div>

$(document).ready(function () {$("#accordion").accordion();//类似手风琴,展开选项
});

2.AutoComplete

<label for="tags">Tags:</label>
<input id="Tags">

$(document).ready(function(){var autotags=["hello","world","mm","css","html","android","mi","moia","mm"];$("#Tags").autocomplete({//自动补全,类似百度搜索source:autotags});
});

3.Datepicker

<p>Date:<input type="text" id="datepicker">
</p>

$(document).ready(function () {$("#datepicker").datepicker();
});

4.Dialog

<div id="div"><p>这是一个Dialog对话框</p>
</div>
<a id="btn" href="#">按钮</a>

$(document).ready(function(){$("#btn").button().on("click", function () {$("#div").dialog();});
});

5.progressbar

<div id="pb"></div>

var pb;
var current = 0;$(document).ready(function () {/*  $("#pb").progressbar(//进度条{value:50}//固定值);*/pb = $("#pb");pb.progressbar({max:100})//进度条满的值,默认100setInterval(changepb,100);//计时器,每100ms刷新一次
});function changepb(){current++;if(current>=100){current = 0;}pb.progressbar(
//        {value:current}//都行"option","value",current);
}

 <style>/* #menu{width: 150px;}*//* 横向排列(jQuery UI没提供横向的)*/.ui-menu:after{content:".";display: block;clear: both;visibility:hidden;line-height: 0;height: 0;}.ui-menu .ui-menu-item{display: inline-block;float: left;margin: 0;padding: 10;width: auto;}</style>
<ul id="menu"><li><a href="#">JAVA</a><ul><li><a href="#">JAVA EE</a> </li><li><a href="#">JAVA SE</a> </li><li><a href="#">JAVA ME</a> </li></ul></li><li>C</li><li>C++</li><li>php</li>
</ul>

$(document).ready(function () {$("#menu").menu(//菜单{position:{at:"left bottom"}}//左下//       {position:{at:"right top"}}//右上(默认));
});

7.slider

<div id="slider"></div>
<span id="span">0</span>

var valueSpan,slider;
$(document).ready(function () {/*  $("#slider").slider();//可拖动的进度条*/slider = $("#slider");valueSpan = $("#span");slider.slider({/*change: function (event,ui) {//change事件(移动结束后执行)valueSpan.text(slider.slider("option","value"));}*/slide: function (event,ui) {//拖动时就调用valueSpan.text(slider.slider("option","value"));}});
});

8.spinner

<input id="input">
<button id="btn">获取数据</button>

$(document).ready(function () {$("#input").spinner();//带有上下箭头的输入数字的输入框$("#input").spinner("value",10);//默认为10$("#btn").button().on("click", function () {alert($("#input").spinner("value"));});
});

9.table

<div id="table"><ul><li><a href="#hello1">hello</a></li><li><a href="#hello2">hello</a></li><li><a href="#hello3">hello</a></li></ul><div id="hello1">hello1hellohellohellohello</div><div id="hello2">hello2hellohellohellohello</div><div id="hello3">hello3hellohellohellohello</div>
</div>

$(document).ready(function () {$("#table").tabs();//table
});

4.jQuery UI Effects

 <style>div{width: 100px;height: 100px;background-color: gray;}.changediv{width: 200px;height: 200px;background-color: red;}</style>
<div></div>

/*
addClasshttp://api.jqueryui.com/addClass/.addClass( className [, duration ]           [, easing ]        [, complete ] )名称        执行时间(默认400ms)                     回调函数(执行完触发)easing:动画特效,默认swing ;  http://jqueryui.com/easing/  */
$(document).ready(function () {$("div").on("click", function () {$(this).addClass("changediv",1000,"easeInCirc", function () {//1秒事件把class变了//          alert("完成");})});
});

2.Blind

<style>#toggle{width: 100px;height: 100px;background-color: gray;}</style>
</head>
<body>
<div id="toggle"></div>

$(document).click(function () {//给文档添加事件//   $("#toggle").toggle("blind");//百叶窗,默认向上$("#toggle").toggle("blind", {direction: "down"});//向下(消失)//  up, down, left, right, vertical, horizontal.
});

 <style>#elem{border: 4px solid red;color: blue;background-color: #ffff00;font-size: 25px;padding: 1mm;text-align: center;}</style><div id="elem">color animations</div>
<button id="toggle">按钮</button>

$(document).ready(function () {$("#toggle").button().click(function () {$("#elem").animate({//功能和addClass很像color:"green",backgroundColor:"pink",borderColor:"gray",width:"200px",height:"200px"});});
});

4.hide

 <style>div{width: 100px;height: 100px;background: #ffff00;border: 1px solid red;}</style><button>隐藏div</button><div></div>

/*
.hide( effect [, options ] [, duration ] [, complete ] )特效      属性        执行时间      回调函数*/
$(document).ready(function () {$("button").button().click(function () {$("div").hide("drop",{direction:"left"},2000);//2s,向左消失});
});

5.removeClass

 <style>div{width: 100px;height: 100px;background-color: gray;}.changediv{width: 200px;height: 200px;background-color: red;}</style><div class="changediv"></div>

$(document).ready(function () {$("div").on("click",function(){//和addClass相对应$(this).removeClass("changediv",1000,"easeInCirc");});
});

6.show

 <style>div{display: none;/*隐藏*/width: 100px;height: 100px;background-color: gray;}</style>
</head>
<body>
<button>show div</button>
<div></div>

$(document).ready(function () {$("button").button().click(function () {//       $("div").show();//直接显示,和hide用法一样$("div").show("drop",{direction:"right"},1000);//右向左,默认左向右});
});

7.toggleClass

 <style>div{width: 100px;height: 100px;background-color: gray;}.changediv{width: 200px;height: 200px;}</style><div></div>

/*.toggleClass( className              [, switch ]          [, duration ] [, easing ] [, complete ] )定义好的class名称      选择(默认显示/隐藏)   时间           效果          回调*/
$(document).ready(function(){$("div").click(function () {//toggleClass:addClass+removeClass//       $(this).toggleClass("changediv",1000,"easeOutSine");
//        $(this).toggleClass("changediv",true,1000,"easeOutSine");//点击addClass,再点击不会removeClass$(this).toggleClass("changediv",false,1000,"easeOutSine");//点击没效果,只在已经添加了class时有效,执行removeClass});
});