目录
How to write jQuery plugin?
开始写第一个插件
代码位于plugin_first
让我们动手改造一下tab.js吧:
代码
;(function($) { $.fn.tab = function(options) { // 将defaults 和 options 参数合并到{} var opts = $.extend({},$.fn.tab.defaults,options); return this.each(function() { var obj = $(this); $(obj).find('.tab_header li').on('mouseover', function (){ $(obj).find('.tab_header li').removeClass('active'); $(this).addClass('active'); $(obj).find('.tab_content div').hide(); $(obj).find('.tab_content div').eq($(this).index()).show(); }) }); // each end } //定义默认 $.fn.tab.defaults = { }; })(jQuery);
这段代码除了套用jQuery plugin模板外,就是几处select变成基于obj的查找的selector,其他与之前无异。
是不是很简单?
解释一下配置项
// 将defaults 和 options 参数合并到{} var opts = $.extend({},$.fn.tab.defaults,options);
缓存this
// 将defaults 和 options 参数合并到{} var obj = $(this);
调用方式
<script> $(function(){ $('.tab').tab(); }); </script>
是不是更简单?
jQuery plugin template
;(function($) { $.fn.XXXXXX = function(options) { // 将defaults 和 options 参数合并到{} var opts = $.extend({},$.fn.XXXXXX.defaults,options); return this.each(function() { var obj = $(this); ... }); // each end } //定义默认 $.fn.XXXXXX.defaults = { }; })(jQuery);
插件特点
1、有默认项
$.fn.XXXXXX.defaults
2、基于selector
return this.each(function() { var obj = $(this); ... });
解读:
- 有默认项,是约定大约配置,让用户用的时候如果没有个性化需求,可以很简单,安装插件的默认配置走,如果有个性化需求,修改配置项,同样很简单
- 基于selector意味着你可以复用,给tag或class应用此插件,以便写更少代码,完成更多功能
亲,你明白插件的好处了么?如果没明白继续往下看
上一篇: 什么是Tab? 最后文章