jQuery UI

-------------------------------------------UI插件-------------------------------------------

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

$(".drag").draggable({containment:"parent"});

$("#x").draggable({axis:"x"});

$("#y").draggable({axis:"y"});

$(selector).droppable({options})   //除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中

$(".drag").draggable();

                $(".cart").droppable({

                    drop: function () {

                            $(this)

                           .addClass("focus")

                           .find("#tip").html("")

                    }

                })

$(selector).sortable({options});  拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能   

$("ul").sortable({

                        delay:2,

                        opacity:0.35

                })

$(selector).accordion({options});   //面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容

<div id="divtest">

            <div id="accordion">

                <h3>

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

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

                <h3>

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

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

            </div>

        </div>

        <script type="text/javascript">

            $(function () {

                $("#accordion").accordion({

        collapsible: true

}

);

            });

        </script>

$(selector).tabs({options});  //使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容,selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容

$("#tabs").tabs ({

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

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

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

                })

$(selector).dialog({options}); //等于js中的alert()和confirm()

$("#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',//隐藏动画

                    buttons: {

                        '确定': function () {

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

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

                        },

                        '取消': function () {

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

                        }

                    },

                    open: function (event, ui) {

                        $(this).html("");

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

                    }

                });

菜单:

$(selector).menu({options});  //菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标,     selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

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

微调:

$(selector).spinner({options}); //微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值               selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件

//定义变量

                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";

                    }

                });

$(selector).tooltip({options});  //工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置           其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置

$("input").tooltip({

                    show: {

                        effect: "slideDown",

                        delay: 350

                    },

                    hide: {

                        effect: "explode",

                        delay: 350

                    },

                    position: {

                        my: "left top",

                        at: "left bottom"

                    }

                });