jQuery自定義插件

時間 2019-12-09

原文原文鏈接

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

自定義jQuery插件須要瞭解：javascript

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

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

以成員(局部)函數形式加到jQuery中:

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

以成員形式應返回jQuery對象，便於鏈式操做。

1.建立關聯文件

建立插件名.js文件css

建立頁面名.css文件html

而後引入html中java

        <!-- 引入建立的名爲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代碼jquery

一個div裏面包含一個ul六個li標籤ide

<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中以成員函數的形式來設置插件:this

//以成員函數形式設置插件
(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