自定義一個jQuery二級選單插件

自定義jQuery插件需要了解：

命名規范:jQuery.插件名-版本.js
以工具(全域)函式形式加到jQuery中:

$.extend({函式名:function(){功能代碼}});
使用時：$.函式名();

以成員(區域)函式形式加到jQuery中:

$.fn.extend({函式名:function(){功能代碼}});
使用時:$("選擇元素").函式名();

以成員形式應回傳jQuery物件，便于鏈式操作，

1.創建關聯檔案

創建插件名.js檔案

創建頁面名.css檔案

然后引入html中

        <!-- 引入創建的名為myPlugin-menu的css -->
        <link rel="stylesheet" type="text/css" href="../css/myPlugin-menu.css"/>
        <!-- 引入jQuery庫，必須在前面，后面的插件檔案基于jQuery -->
        <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入創建的名為jquery-myPluginmenu-1.0.js -->
        <script src="../js/jquery-myPluginmenu-1.0.js" type="text/javascript" charset="utf-8"></script>

現在先寫出所需基本html代碼

一個div里面包含一個ul六個li標簽

<body>
        <div id="menu">　　<!-- id設定為menu -->
            <ul>
                <li>menu1
                    <div>
                        <a href="#">menu1</a>
                        <a href="#">menu2</a>
                        <a href="#">menu3</a>
                        <a href="#">menu4</a>
                    </div>
                </li>
                <li>menu2
                    <div>
                        <a href="#">menu1</a>
                        <a href="#">menu2</a>
                        <a href="#">menu3</a>
                        <a href="#">menu4</a>
                    </div>
                </li>
                <li>menu3
                    <div>
                        <a href="#">menu1</a>
                        <a href="#">menu2</a>
                        <a href="#">menu3</a>
                        <a href="#">menu4</a>
                    </div>
                </li>
                <li>menu4
                    <div>
                        <a href="#">menu1</a>
                        <a href="#">menu2</a>
                        <a href="#">menu3</a>
                        <a href="#">menu4</a>
                    </div>
                </li>
                <li>menu5
                    <div>
                        <a href="#">menu1</a>
                        <a href="#">menu2</a>
                        <a href="#">menu3</a>
                        <a href="#">menu4</a>
                    </div>
                </li>
                <li>menu6
                    <div>
                        <a href="#">menu1</a>
                        <a href="#">menu2</a>
                        <a href="#">menu3</a>
                        <a href="#">menu4</a>
                    </div>
                </li>
            </ul>
        </div>
    </body>

初始界面如下：

在名為myPlugin-menu的css中寫入樣式

/* 設定一個類名sunmenu */
/* 找到menu里面的ul */
.sunmenu >ul{
    margin: 0px;    /* 外邊距 */
    padding: 0px;    /* 內邊距 */
    list-style: none;    /* 串列屬性 */
}
/* 找到ul里的li */
.sunmenu >ul >li{
    float: left;    /* 左浮動 */
    display: inline-block;    /* 水平居中顯示 */
    width: 120px;    /* 寬度 */
    height: 30px;    /* 高度 */
    line-height: 30px;    /* 行高 */
    background-color: #333333;    /* 背景顏色 */
    color: #FFFFFF;    /* 字體顏色 */
    text-align: center;    /* 文本居中 */
    margin-right: 2px;    /* 右邊距 */
}
/* 找到li里的div */
.sunmenu > ul>li>div{
    width: 120px;    /* 寬度 */
    background-color: #999999;    /* 背景顏色 */
    position: absolute;    /* 相對定位 */
}
/* 找到div里的a */
.sunmenu >ul>li>div a:link{
    text-decoration: none;/* 文本修飾 去掉下劃線 */
}

.astyle{
    color: #DDDDDD;    /* 字體顏色 */
}

我們需要用js來呼叫這些樣式，讓它們隱藏或是顯示，

在創建的插件.js中以成員函式的形式來設定插件:

//以成員函式形式設定插件
(function($){
    $.fn.extend({
        submenu:function(){
            //添加樣式
            this.addClass("sunmenu");
            //隱藏div
            this.find("ul>li>div").hide();
            //當滑鼠經過li時
            this.find("ul>li").on("mouseover",function(){    
                //此處的this表示事件源
                $(this).find("div").show();    //顯示div
                //當滑鼠離開li時
            }).on("mouseout",function(){    
                $(this).find("div").hide();    //隱藏div
            });
            //再給a標簽添加一個滑鼠移入移出事件
            $("a").mouseover(function(){
                $(this).addClass("astyle");
            }).mouseout(function(){
                $(this).removeClass("astyle");
            })
            
            return this;    //為了支持鏈式操作 要回傳當前物件
        }
    })
})(jQuery);

最后在HTML中運行自定義的插件：

        <script type="text/javascript">
            $(function(){
                $("#menu").submenu();//選擇id為menu的元素呼叫成員函式submenu
            })
        </script>

運行結果：

當滑鼠移入移出時：

如果覺得有用不妨點個贊:D

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/24991.html

標籤：jQuery

上一篇：xamarin ios 極光推送的問題

下一篇：Ajax異步按下回車提交表單

jQuery自定義插件

自定義一個jQuery二級選單插件

1.創建關聯檔案