自定义一个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>

运行结果：