jQuery UI型插件介绍

发表于   |   分类于   |     |   阅读次数

jQuery UI型插件

拖拽插件：draggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：
$(selector). draggable({options})

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//使id号为“x”和“y”的<div>元素只能沿X轴和Y轴拖曳。
$(function () {
        $("#x").draggable({axis:"x"});
        $("#y").draggable({axis:"y"});
    });

//类名为drag的div元素只能在外层的父div元素中任意拖拽。
<body>
   <div id="divtest">
       <div class="drag">任意拖拽A</div>
       <div class="drag">任意拖拽B</div>
   </div>
   <script type="text/javascript">
       $(function(){
            $(".drag").draggable({containment:"parent"})
       });
   </script>     
</body>

放置插件：droppable

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <div id="divtest">
        <div class="box">
            <div class="title">产品区</div>
            <div class="drag"><div>苹果</div></div>
        </div>
        <div class="box">
            <div class="title">回收站</div>
            <div class="cart"><div id="tip">还没有产品</div></div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".drag").draggable();
            $(".cart").droppable({
                drop: function () {
                    $(this).addClass(".focus")
                    .find("#tip").html("");
                }
            })
        });
    </script>
</body>

推拽排序插件：sortable

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

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

例如，在页面中，通过加载sortable插件将

    元素中的各个
  • 表项实现拖曳排序的功能，如下图所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <div id="divtest">
        <div class="title">
            <span class="fl">我最喜欢的运动</span>
        </div>
        <div class="content">
            <ul>
                <li>1)足球</li>
                <li>2)散步</li>
                <li>3)篮球</li>
                <li>4)乒乓球</li>
                <li>5)骑自行车</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("ul").sortable({
                delay:200,
                opacity:0.5
            })
        });
    </script>
</body>

面板折叠插件：accordion

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

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

例如，通过accordion插件展示几个相同区域面板的折叠效果，如下图所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <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>
</body>

选项卡插件：tabs

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

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。
参考：http://www.css88.com/jquery-ui-api/tabs/

例如，在页面中，添加选项卡的标题和内容元素，并绑定tabs插件，当点击标题时，以选项卡的方式切内容，如下图所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <div id="divtest">
        <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>
    </div>
    <script type="text/javascript">
        $(function () {
           $("#tabs").tabs ({
                //设置各选项卡在切换时的动画效果,fx: 切换选项卡时的动画效果
                //opacity:透明度 设置为toggle就表示点击后，先透明然后不透明
                fx: { opacity: "toggle", height: "toggle" },
                event: "mousemove" //通过移动鼠标事件切换选项卡
            })
        });
    </script>
</body>

对话框插件：dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：
$(selector).dialog({options});
selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

当点击按钮删除时，调用dialog插件弹出带模式的询问信息对话框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
    <div id="divtest">
        <div class="content">
            <span id="spnName" class="fl">张三</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',
                buttons: {
                    '确定': function () {
                        $("#spnName").remove();
                        $(this).dialog("close");
                    },
                    '取消': function () {
                        $(this).dialog("close");
                    }
                },
                open: function (event, ui) {
                    $(this).html("");
                    $(this).append("<p>" + content + "</p>");
                }
            });
        }
    </script>
</body>

菜单工具插件：menu

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

例如，在页面中，通过<ul>元素内联的方式构建一个三层结构的导航菜单，并将最外层<ul>元素通过menu()方法绑定插件，实现导航菜单的功能，如下图所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
    <ul id="menu">
        <li><a href="#">小明一中</a>
            <ul>
                <li><a href="#">高中部</a>
                    <ul>
                        <li><a href="#">高一(1)班</a></li>
                        <li><a href="#">高一(2)班</a></li>
                        <li><a href="#">高一(3)班</a>
                            <ul>
                                <li><a href="#">小胡</a></li>
                                <li><a href="#">小李</a></li>
                                <li><a href="#">小陈</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">初中部</a>
                    <ul>
                        <li><a href="#">初一(1)班</a></li>
                        <li><a href="#">初一(2)班</a></li>
                        <li><a href="#">初一(3)班</a></li>
                    </ul>
                </li>
                <li><a href="#">教研部</a></li>
            </ul>
        </li>
        <li class="ui-state-disabled"><a href="#">大明二中</a></li> 
         //将<li>元素的class属性值设为“ui-state-disabled”，可将菜单选项置为不可用状态。
    </ul>
    <script type="text/javascript">
        $(function () {
            $("#menu").menu();
        });
    </script>
</body>

微调按钮插件：spinner

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//将输入文本框与微调插件相绑定，并调用插件的spinner()方法，动态改变<div>元素显示的背景色。
<body>
    <div id="divtest">
        <div class="title">
            选择颜色值</div>
        <div class="content">
            <span id="spnColor" class="input fl">
                <input />
            </span>
            <span id="spnPrev" class="prev fr"></span>
        </div>
    </div>
    <script type="text/javascript">
        $(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";//$("#spnPrev").css('background-color','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";
                }
            });
        });
    </script>
</body>

工具提示插件：tooltip

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

示例：将文本输入框元素绑定提示插件，当鼠标在文本输入框中移动时，在指定的位置并以动画的效果显示对应的title属性值内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <div id="divtest">
        <div class="title">
            工具提示插件</div>
        <div class="content">
            <div>
                <label for="name">
                    姓名</label>
                <input id="name" name="name" title="我是土豪，欢迎与我做朋友" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#name").tooltip({
                show: {
                    effect: "slideDown",
                    delay: 350
                },
                hide: {
                    effect: "explode",
                    delay: 350
                },
                position: {
                    my: "left top",  
                    at: "left bottom" 
                    //my是弹出的图片的位置，即提示框位置，
                    //at是当前的文字的位置，表示的意思是，弹出的提示框的左上角在文本框的左下角
                    //at是目标元素的位置，my是被定位元素的位置，my需要相对于at定位.
                }
            });
        });
    </script>
</body>

坚持原创技术分享，您的支持将鼓励我继续创作！