zoukankan html css js c++ java

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>

查看全文

相关阅读:
省选前模拟
 $SA$后缀数组
 一键运行
 多项式$fft$,$ntt$,$fwt$初步
 插头$DP$初步
 网络流初步
 欧拉路相关
 模板—Hash_map
HZOJ Function
HZOJ Tree

原文地址：https://www.cnblogs.com/feihusurfer/p/6682075.html