分别引入关于ui的两个文件，js和css

Interaction 交互

1. button() 将这个标签加入一个变成美化过的按钮效果

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

2. draggable()将目标区域变得可拖动

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

3. droppable()放置，当被拖放到后会产生一个事件

$(document).ready(function () {
    $("#div1").draggable();
    $("#div2").droppable();
    $("#div2").on("drop",function (event,ui) {
        $("#div2").text("drop");
    });
});

4. resizable()可以改变尺寸，鼠标放置上去可以拖动放大缩小

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

5. selectable()选择后会产生一个class，ui-selected，可以改变这个class来改变当选择某个选项产生的效果

$(document).ready(function () {
    $("a").button();
    $("#uid").selectable();

});

.ui-selected{
    background-color: #1c94c4;
}

6. 设定一个正确选项id为right，当正确选择提交后，会弹出会话框（接上）

$("a").on("click",function () {
      if ($("#right").hasClass("ui-selected")){
          alert("回答正确");
      }

7. sortable()可以拖动列表，交换位置

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

---

Widgets小部件

1. accordion()可以收拢展开多段文字，当其中一段文字展开时其他段文字收拢

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

2. autocomplete自动补全,用于文本框，类似浏览器的输入提示，source指定当前使用的资源

$(document).ready(function () {
    var autotags=["html","css","jQuery","javascript"];
    $("#tags").autocomplete( {
        source:autotags
    });
});

3. datepicker()点击文本框会出现一个日历表，选择具体时间会输入到文本框中

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

4. dialog()将目标内容转换成对话框

$(document).ready(function () {

    $("#aid").button().on("click",function () {
        $("#div1").dialog();
    });
});

5. progressbar进度条，使用计时器让进度条增加，当进度条到100%时归零

var pb;
var  max=100;
var  current=0;
$(document).ready(function () {
    pb=$("#div1");
    pb.progressbar({max:100});
    setInterval(changepb,100);
});
function changepb() {
    current++;
    if(current>100){
        current=0;
    }
    pb.progressbar("option","value",current);
}

6. menu()菜单，position:设置菜单位置，默认右上方

$(document).ready(function () {
    $("#uid").menu({position:{at:"left bottom"}});

    });

7. slider()拖动滑块改变数值,数值随着滑块的拖动而改变

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

8. spinner()下拉列表，文本框可以通过上下箭头更改数值，设置默认值10

$(document).ready(function () {
    $("#input").spinner();
    $("#input").spinner("value","10");
});

9. tabs()创建具有多个面板的内容区域，每个面板与列表中的标题关联

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

<div id="div1">
    <ul>
        <li><a href="#h1">a</a></li>
        <li><a href="#h2">b</a></li>
        <li><a href="#h3">c</a></li>
    </ul>
    <div id="h1">
        1
    </div>
    <div id="h2">
        2
    </div>
    <div id="h3">
        3
    </div>
</div>

---