jQuery custom navigation plug-in development process

foreword

In the development process, we often use plug-ins, which are convenient and flexible, but if you can't find a plug-in that you are satisfied with on the market, or you want to encapsulate a plug-in for others to use, you need to write a jQuery yourself. plugin too.
According to the function, plugins can be divided into the following three categories:

1. Plug-ins that encapsulate object methods (that is, jQuery objects based on DOM elements, with locality)
2. Plug-ins that encapsulate global functions (global encapsulation)
3. Selector plugins (similar to .find())

After such a long period of plug-in development, developers have gradually agreed on some rules to resolve various errors and conflicts caused by plug-ins, including the following rules:

1. It is recommended to use jquery.[plugin name].js for the plugin name to avoid conflicts with other js files or other libraries;
2. Local objects are attached to jquery.fn objects, and global functions are attached to jquery;
3. Inside the plugin, this points to the current local object;
4. All elements can be traversed through this.each;
5. All methods or plugins must end with a semicolon to avoid problems;
6. The plug-in should return a jquery object to ensure chain connection;
7. Avoid using $ inside plugins, pass jQuery if you must.

Let's custom develop a simple navigation plugin.

---

Plugin development

First define a navigation bar:

<ul class="list">
        <!-- html -->
        <li>导航列表
            <ul class="nav">
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
            </ul>
        </li>
    </ul>

Then write css and set the style for the navigation bar:

.list {
    list-style: none;
    padding: 0;
    font-style: 13;
    color: #fff;
    width: 500px;
    margin: 50px auto;
}

.list li {
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #333;
    cursor: pointer;
}

Next, start to write the plug-in js implementation part, first set the style and drop-down effect for the navigation bar:

$(".nav").css({
        'list-style' : 'none' ,
        'margin' : 0,
        'padding' :0,
        'display' : 'none'
    });

    $(".nav").parent().hover(function(){
        $(this).find('.nav').slideDown('normal');
    },function(){
        $(this).find('.nav').slideUp('normal');
    })

Pay attention to the parent() above, because we don't know the external situation when using the plug-in, so we can't directly specify a label or class to locate, and it's definitely not wrong to specify the parent element directly.
At this point, the function has been basically realized, but when you put the mouse on the parent element, you will find that the rapid back and forth navigation switching will lead to a "wave effect", and the user experience is not very good, so we need to pull down the navigation The special effect stops in time, so add a stop() function. After the change is:

$(".nav").css({
        'list-style' : 'none' ,
        'margin' : 0,
        'padding' :0,
        'display' : 'none'
    });

    $(".nav").parent().hover(function(){
        $(this).find('.nav').stop().slideDown('normal'); //加上stop函数
    },function(){
        $(this).find('.nav').stop().slideUp('normal'); //加上stop函数
    })

Next, we will put it into jquery.nav.js and encapsulate it

;(function ($){  //分号为了防止前面代码的干扰
    $.extend({
        'nav':function(){
                $(".nav").css({
                    'list-style' : 'none' ,
                    'margin' : 0,
                    'padding' :0,
                    'display' : 'none'
                });

                $(".nav").parent().hover(function(){
                    $(this).find('.nav').stop().slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                })
                return this;
        }
    })
})(jQuery);

Then introduce it in HTML and call it in the original js

$(function(){
    $.nav();
});

In this way , a global navigation list plug-in can be implemented.

If you want to implement the local plug-in function, you need to modify it slightly.

;(function ($){
    $.fn.extend({   //加上fn
        'nav':function(){
                $(this).find(".nav").css({    //改为this
                    'list-style' : 'none' ,
                    'margin' : 0,
                    'padding' :0,
                    'display' : 'none'
                });

                $(this).find(".nav").parent().hover(function(){  //改为this
                    $(this).find('.nav').stop().slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                })
                return this;   
        }
    })
})(jQuery);

Then call it in js

$(function(){
    $('.list').eq(0).nav();   //eq()表示调用第几个，同时nav()中可以传参，改变其它属性
});

---

The above is the whole content. You should understand the process of customizing the plug-in clearly, master its rules, and avoid stepping on more pits when developing by yourself.