JQuery插件编写

插件代码

/**
 * 分页插件
 * 
 */
(function($) {

    function showData(container) {
        console.info("私有方法调用");
        var options = $.data(container, "pager");
        options.paging();
        console.info("xxxx");
        options.paged();
    }

    //外部调用的刷新数据方法
    function reflesh(container,param) {
        console.info("插件方法调用");
        console.info(param);
        var options = $.data(container, 'pager');
        options.paging();
        console.info("xxxx");
        options.paged();
    }
    
    //插件代码
    $.fn.pager = function(options, param) {
        
        //调用插件方法
        if(typeof options == 'string') {
            return $.fn.pager.methods[options](this, param);
        }
        
        console.info("插件调用");
        return this.each(function() {
            var container = this;
            
            //参数合并
            options = options || {};
            
            //默认参数
            var defaultoptions = $.fn.pager.defaultoptions;
            
            //参数覆盖合并
            var result = $.extend(true, {}, defaultoptions, options);

            //存入缓存
            $.data(container, "pager", result);
            
            $(this).find(".opSearch").click(function() {
                showData(container);
            });
            
            console.info("覆盖后调用");
            result.paging();
        });

    };
    
    //插件方法列表 调用方法：$("#container").pager("reflesh",true);
    $.fn.pager.methods = {
        reflesh: function(jq, param) {
            return jq.each(function() {
                reflesh(this,param);
            });
        }
    };
    
    $.fn.pager.defaultoptions = {
        //分页前执行
        paging: function() {
            console.info("覆盖前paging");
        },
        //分页后执行
        paged: function() {
            console.info("覆盖前paged");
        }
    };
    
})(jQuery);

 

调用代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.8.2.js"></script>
        <script src="js/jquery.myPlugin.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var options = {
                    paging:function(){
                        console.info("覆盖后paging");
                    }
                };
                $("#container").pager(options);
                
                $(".sub").click(function(){
                    $("#container").pager("reflesh",true);
                });
                
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div>
                <a class="opSearch">查询</a>
                <a class="sub">子方法条用</a>
            </div>
        </div>
    </body>
</html>

 

posted @ 2017-04-08 15:54  草莓爸  阅读(222)  评论(0)  编辑  收藏  举报