Jquery 插件学习笔记

时间：2016-06-02 14:31:54 阅读：171 评论：0 收藏：0 [点我收藏+]

标签：

Jquery 插件
1表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
    </head>
    <body>
        <form id="frmV" 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 () {
                $("#frmV").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                            email:{
                                required:true,
                                email:true
                            }
                      },
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      }
                  }
                );
            });
        </script>
    </body>
</html>

2表单插件——form
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：

$(form). ajaxForm ({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://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: "http://www.imooc.com/data/form_f.php", 
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });
        </script>
    </body>
</html>

3 图片灯箱插件——lightBox

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，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="http://www.imooc.com/data/jquery.notesforlightbox.css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://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>

4图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，
在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，
显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称，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="http://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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://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="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
        	         <img src="http://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>

5cookie插件——cookie
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

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

其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://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(?);
                }
                $("#btnSet").bind("click", function () {
                    if ($("#chksave").is(":checked")) {
                        $.cookie("email",$("#email"),val(), {
                            path: "/", expires: 7
                        })
                    }
                    else {
                        $.cookie("email",null, {
                            path: "/"
                        })
                    }
                });
            });
        </script>
    </body>
</html>

6 搜索插件——autocomplete（输入部分字符，显示匹配的字符串）

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，
当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

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

其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数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="http://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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://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>

7右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，
便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：

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

Selector参数为绑定插件的元素，meunId为快捷菜单元素，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="http://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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://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 () {
                $(".fl").contextMenu('sysMenu',
                  { bindings:
                     {
                         'Li3': function (Item) {
                             $(".tip").show().html("您点击了“保存”项");
                         },
                         'Li4': function (Item) {
                             $(".tip").show().html("您点击了“退出”项");
                         }
                     }
                  });
            });
        </script>
    </body>
</html>

8自定义对象级插件——lifocuscolor插件
自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：

$(Id).focusColor(color)

其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。

  <!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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
            <script src="http://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 () {
                    $("ul").focusColor("red") //调用自定义的插件
                })
            </script>
        </body>
    </html>

9 自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：

$.addNum(p1,p2) 和 $.subNum(p1,p2)

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://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(
                        $.subNum($("#Text1").val(),
                        $("#Text2").val())
        			);
                });
            });
        </script>
    </body>
</html>

10拖曳插件——draggable

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

$(selector). draggable({options})

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

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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({
                     axis:"x"
                });
                
                 $("#y").draggable({
                     axis:"y"
                });
                
            });
        </script>
    </body>
</html>

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

$(selector).droppable({options})

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

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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">回收站(<span>0</span>)</div>
                <div class="cart"><div id="tip">还没有产品</div></div>
            </div>
        </div>
        
        <script type="text/javascript">
          var intSum=0;
            $(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                            intSum++;
                            $(this)
                            .addClass(".focus")
                            .find("#tip").html("");
                            $(".title span").html(intSum);
                            
                    }
                })
            });
        </script>
    </body>
</html>

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

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

selector参数为进行拖曳排序的元素，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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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,//为防止与点击事件冲突，延迟2S
                    opacity:0.35//以透明度0.35随意拖动
                })
            });
        </script>
    </body>
</html>

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

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

其中，参数selector为整个面板元素，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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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>

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

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

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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>

15对话框插件——dialog
对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

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

selector参数为显示弹出对话框的元素，通常为<div>，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="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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>

16菜单工具插件——menu
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

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

selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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>

17 微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

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

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://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>

Jquery 插件学习笔记

标签：

原文地址：http://blog.csdn.net/c_c123/article/details/51546507

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行