zoukankan      html  css  js  c++  java
  • jQuery自定义插件规范

        <ul class="list">
            <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>
        </ul>

    全局函数:

    ;(function($){
        //全局
        $.extend({
            'nav':function(){
                $('.nav').css({
                    'list-style':'none',
                    'margin':0,
                    'padding':0,
                    'display':'none'
                });
                
                $('.nav').parent().hover(function(){
                    $(this).find('.nav').slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                });
            }
        });
        
        //局部
        $.fn.extend({
            'nav':function(color){
                $(this).find('.nav').css({
                    'list-style':'none',
                    'margin':0,
                    'padding':0,
                    'display':'none',
                    'color':color
                });
                
                $(this).find('.nav').parent().hover(function(){
                    $(this).find('.nav').slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                });
                
                return this;
            }
        });
    })(jQuery);

    执行:

    $(function(){
        //全局
        $.nav();
        //局部
        $('.list').eq(1).nav('red');
    });
  • 相关阅读:
    MySQL(一)
    HTML基础
    python函数基础
    常用的模块
    面向对象进阶
    定制自己的数据类型
    Shell篇之AWK
    MATLAB如何实现傅里叶变换FFT?有何物理意义?
    傅里叶分析
    2018年度关键词
  • 原文地址:https://www.cnblogs.com/by-dxm/p/6396239.html
Copyright © 2011-2022 走看看