jQuery篇之插件

目錄
    1. 常用插件
        validate (驗(yàn)證規(guī)則，即時(shí)顯示異常信息；允許自定義驗(yàn)證規(guī)則)
        ajaxForm （提交表單 并在指定元素上顯示服務(wù)器返回的html格式數(shù)據(jù)）
        autocomplete  (輸入框 以下拉列表形式展示搜索提示；雙擊空白框顯示全部提示/輸入文本后顯示匹配到的所有選項(xiàng))
        cookie（保存、刪除、讀取 數(shù)據(jù)）
        lightBox （選中圖片后大圖瀏覽）
        jqzoom（在圖片上移動(dòng)時(shí) 右邊顯示放大后的效果,圖片放大鏡）
        contextMenu （任意元素右鍵 彈出快捷菜單）

        lifocuscolor 自定義插件（鼠標(biāo)在表項(xiàng)<li>元素移動(dòng)時(shí)，自定義其獲取焦點(diǎn)時(shí)的背景色）
        twoaddresult 自定義插件（加法減法）

    2. UI類型插件
        draggable （拖拽）
        droppable (放置---其他元素使用draggable完全拖拽進(jìn)本元素后會(huì)調(diào)用)
        sortable (拖拽排序：將序列元素（例如<option>、<li>）按任意位置進(jìn)行拖曳從而形成一個(gè)新的元素序列)
        accordion （折疊）
        tabs (選項(xiàng)卡)
        dialog (對(duì)話框)
        menu (鼠標(biāo)移動(dòng)在元素上顯示菜單項(xiàng))
        spinner （input微調(diào)按鈕）
        tooltip (工具提示插件)
1. 常用插件

validate (驗(yàn)證規(guī)則，即時(shí)顯示異常信息；允許自定義驗(yàn)證規(guī)則)

$(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>表單驗(yàn)證插件</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">表單驗(yàn)證插件</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(
                  {
                      /*自定義驗(yàn)證規(guī)則*/
                      rules: {
                            email:{
                                required:true,
                                email:true,
                            }
                      },
                      /*錯(cuò)誤提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      }
                  }
                );
            });
        </script>
    </body>
</html>

ajaxForm （表單 向服務(wù)器發(fā)送數(shù)據(jù)，并接收返回?cái)?shù)據(jù)）

$(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">個(gè)人信息頁</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 (輸入框 以下拉列表形式展示搜索提示；雙擊空白框顯示全部提示/輸入文本后顯示匹配到的所有選項(xiàng))

$(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  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, //雙擊空白文本框時(shí)顯示全部提示數(shù)據(jù)
                    formatItem: function (data, i, total) {
                        return "<I>" + data[0] + "</I>"; //改變匹配數(shù)據(jù)顯示的格式
                    },
                    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（保存、刪除、讀取 數(shù)據(jù)）

讀?。?.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="設(shè)置" />
                </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"  />
        <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">我的相冊(cè)</span>
            </div>
            <div class="content">
                <div class="divPics">
                    <ul>
                        <li><a  title="第1篇風(fēng)景圖片">
                            <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
                        </a></li>
                        <li><a  title="第2篇風(fēng)景圖片">
                            <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
                        </a></li>
                        <li><a  title="第3篇風(fēng)景圖片">
                            <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", //圖片瀏覽時(shí)的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //圖片切換時(shí)的速度
                })
            });
        </script>
    </body>
</html>

jqzoom（在圖片上移動(dòng)時(shí) 右邊顯示放大后的效果,圖片放大鏡）

$(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  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  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, //小圖片所選區(qū)域的寬
                    zoomHeight: 123, //小圖片所選區(qū)域的高
                    zoomType: 'reverse' //設(shè)置放大鏡的類型
                });
            });
        </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  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">點(diǎn)擊右鍵</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("您點(diǎn)擊了“保存”項(xiàng)");
                         },
                         'Li4': function (Item) {
                             $(".tip").show().html("您點(diǎn)擊了“退出”項(xiàng)");
                         }
                     }
                  });
            });
        </script>
    </body>
</html>

lifocuscolor 自定義插件(鼠標(biāo)在表項(xiàng)<li>元素移動(dòng)時(shí)，自定義其獲取焦點(diǎn)時(shí)的背景色)

$(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>自定義對(duì)象級(jí)別插件</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">對(duì)象級(jí)別的插件</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") //調(diào)用自定義的插件
            })
        </script>
    </body>
</html>

/*------------------------------------------------------------/
功能：設(shè)置列表中表項(xiàng)獲取鼠標(biāo)焦點(diǎn)時(shí)的背景色
參數(shù)：li_col【可選】 鼠標(biāo)所在表項(xiàng)行的背景色
返回：原調(diào)用對(duì)象
示例：$("ul").focusColor("red");
/------------------------------------------------------------*/
(function($) {
    $.fn.extend({
        "focusColor": function(li_col) {
            var def_col = "#ccc"; //默認(rèn)獲取焦點(diǎn)的色值
            var lst_col = "#fff"; //默認(rèn)丟失焦點(diǎn)的色值
            //如果設(shè)置的顏色不為空，使用設(shè)置的顏色，否則為默認(rèn)色
            li_col = (li_col == undefined) ? def_col : li_col;
            $(this).find("li").each(function() { //遍歷表項(xiàng)<li>中的全部元素
                $(this).mouseover(function() { //獲取鼠標(biāo)焦點(diǎn)事件
                    $(this).css("background-color", li_col); //使用設(shè)置的顏色
                }).mouseout(function() { //鼠標(biāo)焦點(diǎn)移出事件
                    $(this).css("background-color", "#fff"); //恢復(fù)原來的顏色
                })
            })
            return $(this); //返回jQuery對(duì)象，保持鏈?zhǔn)讲僮?        }
    });
})(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>自定義類級(jí)別插件</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">自定義類級(jí)別插件</span> 
                <span class="fr">
                    <input id="btnCount" type="button" value="計(jì)算" />
                </span>
            </div>
            <div class="content">
                兩數(shù)相+：
                <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>

/*------------------------------------------------------------/
功能：計(jì)算二個(gè)數(shù)字相加或相減的結(jié)果
參數(shù)：數(shù)字p1,p2
返回：兩數(shù)相加后的結(jié)果
示例：$.AddNum(1,2);
/------------------------------------------------------------*/
(function($) {
    $.extend({
        "addNum": function(p1, p2) {
            //如果傳入的數(shù)字不為空，使用傳入的數(shù)字，否則為0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        "subNum": function(p1, p2) {
            //如果傳入的數(shù)字不為空，使用傳入的數(shù)字，否則為0
            var intResult = 0;
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if (p1 > p2) { //如果傳入的參數(shù)前者大于后者
                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完全拖拽進(jìn)本元素后會(huì)調(diào)用)

$(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">產(chǎn)品區(qū)</div>
                <div class="drag"><div>蘋果</div></div>
            </div>
            <div class="box">
                <div class="title">回收站</div>
                <div class="cart"><div id="tip">還沒有產(chǎn)品</div></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {     // 完全拖拽進(jìn)入后調(diào)用
                        $(this).addClass("focus").find("#tip").html("");
                    }
                })
            });
        </script>
    </body>
</html>

sortable (拖拽排序：將序列元素（例如<option>、<li>）按任意位置進(jìn)行拖曳從而形成一個(gè)新的元素序列)

$(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">我最喜歡的運(yùn)動(dòng)</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,   // 避免和點(diǎn)擊事件沖突
                    opacity:0.35,  // 拖拽時(shí)透明度0.35
                })
            });
        </script>
    </body>
</html>

accordion （折疊）

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

默認(rèn)為第一個(gè)面板的內(nèi)容為展示狀態(tài)，點(diǎn)擊第二個(gè)面板主題時(shí)，展示主題對(duì)應(yīng)內(nèi)容，同時(shí)關(guān)閉上一個(gè)面板內(nèi)容。

例

<!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>咱們結(jié)婚吧!</p>
                <h3>
                    <a href="#">土豪族</a></h3>
                <p>咱們交個(gè)朋友吧!</p>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>
    </body>
</html>

tabs (選項(xiàng)卡)

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


將<ul>中的<li>選項(xiàng)定義為選項(xiàng)標(biāo)題，在標(biāo)題中，再使用<a>元素的“href”屬性設(shè)置選項(xiàng)標(biāo)題對(duì)應(yīng)的內(nèi)容

例

<!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>選項(xiàng)卡插件</title>
        <link  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">最喜歡的運(yùn)動(dòng)</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 ({
                    //設(shè)置各選項(xiàng)卡在切換時(shí)的動(dòng)畫效果
                    fx: { opacity: "toggle", height: "toggle" },
                    event: "mousemove" //通過移動(dòng)鼠標(biāo)事件切換選項(xiàng)卡
                })
            });
        </script>
    </body>
</html>

dialog (對(duì)話框)

$(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>對(duì)話框插件</title>
        <link  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) { //如果對(duì)象不為空
                        sys_Confirm("您真的要?jiǎng)h除該條記錄嗎？");
                        return false;
                    }
                });
            });
            function sys_Confirm(content) { //彈出詢問信息窗口
                $("#dialog-modal").dialog({
                    height: 140,
                    modal: true,
                    title: '系統(tǒng)提示',
                    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 (鼠標(biāo)移動(dòng)在元素上顯示菜單項(xiàng))

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

通過<ul>創(chuàng)建多級(jí)內(nèi)聯(lián)或彈出式菜單，支持通過鍵盤方向鍵控制菜單滑動(dòng)，允許為菜單的各個(gè)選項(xiàng)添加圖標(biāo)

例

<!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" />
        <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微調(diào)按鈕）

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

不僅能在文本框中直接輸入數(shù)值，還可以通過點(diǎn)擊輸入框右側(cè)的上下按鈕修改輸入框的值

例

<!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>微調(diào)按鈕插件</title>
        <link  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,
                    //設(shè)置微調(diào)按鈕遞增/遞減事件
                    spin: function (event, ui) {
                        if (ui.value == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    },
                    //設(shè)置微調(diào)按鈕值改變事件
                    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});

當(dāng)鼠標(biāo)在目標(biāo)元素上方時(shí)，顯示目標(biāo)元素title屬性中的內(nèi)容

例

<!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" />
        <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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容