jQuery篇之插件

目录
    1. 常用插件
        validate (验证规则，即时显示异常信息；允许自定义验证规则)
        ajaxForm （提交表单 并在指定元素上显示服务器返回的html格式数据）
        autocomplete  (输入框 以下拉列表形式展示搜索提示；双击空白框显示全部提示/输入文本后显示匹配到的所有选项)
        cookie（保存、删除、读取 数据）
        lightBox （选中图片后大图浏览）
        jqzoom（在图片上移动时 右边显示放大后的效果,图片放大镜）
        contextMenu （任意元素右键 弹出快捷菜单）

        lifocuscolor 自定义插件（鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色）
        twoaddresult 自定义插件（加法减法）

    2. UI类型插件
        draggable （拖拽）
        droppable (放置---其他元素使用draggable完全拖拽进本元素后会调用)
        sortable (拖拽排序：将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列)
        accordion （折叠）
        tabs (选项卡)
        dialog (对话框)
        menu (鼠标移动在元素上显示菜单项)
        spinner （input微调按钮）
        tooltip (工具提示插件)
1. 常用插件

validate (验证规则，即时显示异常信息；允许自定义验证规则)

$(form).validate({options})

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单验证插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="https://www.imooc.com/data/jquery.validate.js"></script>
        <!--<script type="text/javascript" src="https://www.imooc.com/data/jquery.validate.messages_cn.js"></script>-->
    </head>
    <body>
        <form id="from" method="get" action="#">
            <div id="divtest">
                <div class="title">
                    <span class="fl">表单验证插件</span> 
                    <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
                </div>
                <div class="content">
                    <span class="fl">邮箱：</span><br />
                    <input id="email" name="email" type="text" /><br />
                    <span class="tip"></span>
                </div>
            </div>
        </form>
        
        <script type="text/javascript">
            $(function () {
                $("#from").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                            email:{
                                required:true,
                                email:true,
                            }
                      },
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      }
                  }
                );
            });
        </script>
    </body>
</html>

ajaxForm （表单 向服务器发送数据，并接收返回数据）

$(form). ajaxForm ({options})

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="https://www.imooc.com/data/jquery.form.js"></script>
    </head>
    
    <body>
        <form id="frmV" method="post" action="#">
            <div id="divtest">
                <div class="title">
                    <span class="fl">个人信息页</span> 
                    <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
                </div>
                <div class="content">
                    <span class="fl">用户名：</span><br />
                    <input id="user" name="user" type="text" /><br />
                    <span class="fl">昵称：</span><br />
                    <input id="nick" name="nick" type="text" />
                    <div class="tip"></div>
                </div>
            </div>
        </form>
        
        <script type="text/javascript">
            $(function () {
                var options = {
                    url: "https://www.imooc.com/data/form_f.php", 
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });
        </script>
    </body>
</html>

autocomplete (输入框 以下拉列表形式展示搜索提示；双击空白框显示全部提示/输入文本后显示匹配到的所有选项)

$(textbox).autocomplete(data,[options]);

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>搜索插件</title>
        <link href="https://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="https://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">搜索插件</span>
            </div>
            <div class="content">
                <span class="fl">用户名</span><br />
                <input id="txtSearch" name="txtSearch" type="text" />
                <div class="tip">
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
                $("#txtSearch").autocomplete(arrUserName,{
                    minChars: 0, //双击空白文本框时显示全部提示数据
                    formatItem: function (data, i, total) {
                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
                    },
                    formatMatch: function (data, i, total) {
                        return data[0];
                    },
                    formatResult: function (data) {
                        return data[0];
                    }
                }).result(SearchCallback); 
                function SearchCallback(event, data, formatted) {
                    $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
                }
            });
        </script>
    </body>
</html>

cookie（保存、删除、读取 数据）

读取：$.cookie(key)，
保存：$.cookie(key，value)；
删除：$.cookie(key，null)

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>cookie插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="https://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">cookie插件</span> 
                <span class="fr">
                    <input id="btnSet" type="button" value="设置" />
                </span>
            </div>
            <div class="content">
                <span class="fl">邮箱：</span><br />
                <input id="email" name="email" type="text" /><br />
                <input id="chksave" type="checkbox" />是否保存邮箱
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                if ($.cookie("email")) {
                    $("#email").val($.cookie("username"));
                }
                $("#btnSet").bind("click", function () {
                    if ($("#chksave").is(":checked")) {
                        alert("s");
                        $.cookie("username",$("#username").val(), {
                            path: "/", expires: 7
                        })
                    }
                    else {
                        $.cookie("username",null,  {
                            path: "/"
                        })
                    }
                });
            });
        </script>
    </body>
</html>

lightBox （选中图片后大图浏览）

$(linkimage).lightBox({options})

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>图片灯箱插件</title>
        <link rel="stylesheet" type="text/css" href="https://www.imooc.com/data/jquery.notesforlightbox.css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="https://www.imooc.com/data/jquery.notesforlightbox.js"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的相册</span>
            </div>
            <div class="content">
                <div class="divPics">
                    <ul>
                        <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
                            <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
                            <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
                            <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $(".divPics a").lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });
        </script>
    </body>
</html>

jqzoom（在图片上移动时 右边显示放大后的效果,图片放大镜）

$(linkimage).jqzoom({options})

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>图片放大镜插件</title>
        <link href="https://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="https://www.imooc.com/data/jquery.jqzoom.js"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">图片放大镜</span> 
            </div>
            <div class="content">
                <a href="https://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
                     <img src="https://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
                </a>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#jqzoom").jqzoom({ //绑定图片放大插件jqzoom
                    zoomWidth: 123, //小图片所选区域的宽
                    zoomHeight: 123, //小图片所选区域的高
                    zoomType: 'reverse' //设置放大镜的类型
                });
            });
        </script>
    </body>
</html>

contextMenu （任意元素右键 弹出快捷菜单）

$(selector).contextMenu(menuId,{options});

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>右键菜单插件</title>
        <link href="https://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="https://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title"><span class="fl">点击右键</span></div>
            <div class="content">
                <input id="btnSubmit" type="button" value="提交" />
                <div class="tip"></div>
            </div>
            <div class="contextMenu" id="sysMenu">
                <ul>
                    <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
                    <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnSubmit").contextMenu("sysMenu",
                  { bindings:
                     {
                         'Li3': function (Item) {
                             $(".tip").show().html("您点击了“保存”项");
                         },
                         'Li4': function (Item) {
                             $(".tip").show().html("您点击了“退出”项");
                         }
                     }
                  });
            });
        </script>
    </body>
</html>

lifocuscolor 自定义插件(鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色)

$(Id).focusColor(color)

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>自定义对象级别插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="https://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">对象级别的插件</span>
            </div>
            <div class="content">
                <ul id="u1">
                    <li><span>橘子</span><span>水果</span></li>
                    <li><span>芹菜</span><span>蔬菜</span></li>
                    <li><span>香蕉</span><span>水果</span></li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#u1").focusColor("#bbb") //调用自定义的插件
            })
        </script>
    </body>
</html>

/*------------------------------------------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】 鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/------------------------------------------------------------*/
(function($) {
    $.fn.extend({
        "focusColor": function(li_col) {
            var def_col = "#ccc"; //默认获取焦点的色值
            var lst_col = "#fff"; //默认丢失焦点的色值
            //如果设置的颜色不为空，使用设置的颜色，否则为默认色
            li_col = (li_col == undefined) ? def_col : li_col;
            $(this).find("li").each(function() { //遍历表项<li>中的全部元素
                $(this).mouseover(function() { //获取鼠标焦点事件
                    $(this).css("background-color", li_col); //使用设置的颜色
                }).mouseout(function() { //鼠标焦点移出事件
                    $(this).css("background-color", "#fff"); //恢复原来的颜色
                })
            })
            return $(this); //返回jQuery对象，保持链式操作
        }
    });
})(jQuery);

twoaddresult (自定义插件 加法减法)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>自定义类级别插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="https://www.imooc.com/data/jquery.twoaddresult.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定义类级别插件</span> 
                <span class="fr">
                    <input id="btnCount" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                两数相+：
                <input id="Text1" type="text" class="txt" />
                +
                <input id="Text2" type="text" class="txt" />
                =
                <input id="Text3" type="text" class="txt" />
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCount").bind("click", function () {
                    $("#Text3").val(
                        $.addNum($("#Text1").val(),$("#Text2").val())
                    );
                });
            });
        </script>
    </body>
</html>

/*------------------------------------------------------------/
功能：计算二个数字相加或相减的结果
参数：数字p1,p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/------------------------------------------------------------*/
(function($) {
    $.extend({
        "addNum": function(p1, p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        "subNum": function(p1, p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            var intResult = 0;
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if (p1 > p2) { //如果传入的参数前者大于后者
                intResult = parseInt(p1) - parseInt(p2);
            }
            return intResult;
        }
    });
})(jQuery);
2. UI类型插件

draggable （拖拽）

$(selector).draggable({options})

$(selector).draggable("enable")
$(selector).draggable("disable")

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>拖曳插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div id="x" class="drag">沿x轴拖拽</div>
            <div id="y" class="drag">沿y轴拖拽</div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#x").draggable({
                   containment:"parent",
                   axis:"x",
                });
                $("#y").draggable({
                   containment:"parent",
                   axis:"y",
                });
            });
        </script>
    </body>
</html>

droppable (放置---其他元素使用draggable完全拖拽进本元素后会调用)

$(selector).droppable({options})

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>放置插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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>
</html>

sortable (拖拽排序：将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列)

$(selector).sortable({options});

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>拖曳排序插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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:2,   // 避免和点击事件冲突
                    opacity:0.35,  // 拖拽时透明度0.35
                })
            });
        </script>
    </body>
</html>

accordion （折叠）

$(selector).accordion({options});

默认为第一个面板的内容为展示状态，点击第二个面板主题时，展示主题对应内容，同时关闭上一个面板内容。

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>面板折叠插件</title>
        <link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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();
            });
        </script>
    </body>
</html>

tabs (选项卡)

$(selector).tabs({options});


将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>选项卡插件</title>
        <link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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", height: "toggle" },
                    event: "mousemove" //通过移动鼠标事件切换选项卡
                })
            });
        </script>
    </body>
</html>

dialog (对话框)

$(selector).dialog({options});

selector 一般为div元素，

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>对话框插件</title>
        <link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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>
</html>

menu (鼠标移动在元素上显示菜单项)

$(selector).menu({options});

通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>菜单工具插件</title>
        <link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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>
        </ul>
        
        <script type="text/javascript">
            $(function () {
                $("#menu").menu();
            });
        </script>
    </body>
</html>

spinner （input微调按钮）

$(selector).spinner({options});

不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>微调按钮插件</title>
        <link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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";
                        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>
</html>

tooltip (工具提示插件)

$(selector).tooltip({options});

当鼠标在目标元素上方时，显示目标元素title属性中的内容

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>工具提示插件</title>
        <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <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"
                    }
                });
            });
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容