jQuery UI Widgets（小部件）

Accordion(逐个展开)
实现类似手风琴的效果
HTML

 <!--创建个div来承载要实现效果的模块-->
<div id="accordion">

        <h3>选项一</h3>
        <!--创建个div来承载文字内容-->
        <div>
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            </p>
        </div>
        <h3>选项一</h3>
        <!--创建个div来承载文字内容-->
        <div>
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            </p>
        </div>
        <h3>选项一</h3>
        <!--创建个div来承载文字内容-->
        <div>
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            </p>
        </div>
        <h3>选项一</h3>
        <!--创建个div来承载文字内容-->
        <div>
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            </p>
        </div>
    </div>

Autocomplete（自动补全）

<!--
    <label> 标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。
-->
    <label for="tags">Tags:</label>
    <input id="tags">

//创建一个数组，承载要补全的单词
    var autotags=["iwen","ime","html","javascript","java","android"];
    $("#tags").autocomplete({
        //这里面不能有分号
        source:autotags
    });

Button
Datepicker(日期选择器)

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

   $("#datepicker").datepicker();

Dialog
弹出对话框

<!--设置div用来承载要弹出的内容-->
        <div id="div4">
            <p>这是一个对话框Dialog</p>
        </div>
        <!--设置一个按钮  点击按钮弹出对话框-->
    <a  href="#" id="btn1">按钮</a>

$("#btn1").button().on("click",function () {
        $("#div4").dialog();
    })

Menu

<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>html</li>
         <li>css</li>
         <li>js</li>
         </ul>

  //menu 可以设置弹出的二级菜单的位置 如下所示 直接定义position即可
    $("#menu").menu({
        position:{at:"right top"}
    });

如果想要设置成水平菜单，我们可以查看页面元素用类来定义

 .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: 10px;
            width: auto;
        }

Progressbar

<!--定义一个div承载进度条-->
    <div id="pb"></div>

var pb;
var max=100;
var current = 0;
//以上变量为进度条的初始化、最大值和当前值
$(document).ready(function(){
	  pb=  $("#pb");
         pb.progressbar({max:100})
        //使用计时器来进行操作，直接调用函数来执行
    	setInterval(changepb,100);//每100毫秒进行刷新
});
function changepb() {
    current++;
    if(current>=100){
        //到达最大值以后从0 开始
        current=0;
    }
    pb.progressbar("option","value",current)
}

Spinner

<input id="input">
        <button id="btn5">GetValue</button>

 $("#input").spinner();
    //设置spinner的默认值为10
    $("#input").spinner("value","10");
    //点击按钮获得输入框的值
    $("#btn5").on("click",function(){
        alert( $("#input").spinner("value"));
    })

Tab

 <div id="tabs">
            <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">
                1你好你好
            </div>
            <div id="hello2">
                2你好你好
            </div>
            <div id="hello3">
                3你好你好
            </div>
        </div>

直接调用tabs函数即可

//tab
    $("#tabs").tabs();

Slider可拖动的进度条（）

<!--用span 来获取拖动的值-->
<span id="span">0</span>
        <div id="slider"></div>

var valueSpan,slider;
$(document).ready(function(){
	slider= $("#slider");
	   valueSpan = $("#span");
	   slider.slider({
	       change:function (event,ui) {
	           valueSpan.text(slider.slider("option","value"))
	       }
	   });
});