插件代码
/** * 分页插件 * */ (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>