…… <script src="https://www.jb51.net/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/h_tabs.js"></script> <script> $.h_tab('tab'); $.h_hello('hjb'); </script> </body> </html>
h_tabs.js
$.extend({ h_tab:function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName("a"); var oCons = document.getElementById(tabId).getElementsByTagName("section"); for(var i = 0; i<oLinks.length; i++){ oLinks[i].index = i; oLinks[i].onclick = function () { for(var j =0; j<oLinks.length; j++){ oLinks[j].className=""; oCons[j].style.display = "none"; } this.className="cur"; oCons[this.index].style.display ="block"; } } }, h_hello :function(name){ console.log("hello,",name); } });
虽然使用$.extend()工具方法将自己的功能函数直接挂载到jquery根命名空间下，简单，省事儿，但很不幸的是，这样的方式不能利用jquery强大的sizzle引擎，即你选择到的DOM元素无法运用这个方法。
所以我们要用到对象级别的插件开发方式。
jquery对象级别插件写法
对象级别的插件开发方式是利用$.fn.extend()方法将自己的方法绑定到jquery原型上去，这样所有jquery对象队可以应用该方法来执行相应操作了
代码如下：
tab.html
…… <script src="https://www.jb51.net/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/h_tabs.js"></script> <script> //对象级别的插件引用方法，注意和上面类级别插件的写法上的区分 $('#tab').h_tab('tab'); </script> </body> </html>
h_tabs.js
(function($){ $.fn.extend({ h_tab:function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName('a'); var oCons = document.getElementById(tabId).getElementsByTagName('section'); for(var i = 0; i<oLinks.length; i++){ oLinks[i].index = i; oLinks[i].onclick = function () { for(var j =0; j<oLinks.length; j++){ oLinks[j].className=""; oCons[j].style.display = "none"; } this.className="cur"; oCons[this.index].style.display ="block"; } } } }); })(jQuery);
这里，我们利用一个闭包封装了插件，避免了命名空间污染
在这里，还有一些问题，就是我们的方法必须传参数才可以运行，这就导致调用的时候我们使用$(‘#tab')选择了id为tab的div，然后在插件里我们又根据传入的ID获取了一遍该元素。
既然我们已经使用了jquery的选择器，那么我们就可以引入this来解决重复获取元素的冗余问题。
jquery对象级别插件写法-引入this
tab.html
…… <script src="https://www.jb51.net/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/h_tabs.js"></script> <script> $('#tab').h_tab(); </script> </body> </html>
h_tabs.js
(function($){ $.fn.extend({ h_tab:function(){ //在这里引入this var oLinks = this.find('a'); var oCons = this.find('section'); for(var i = 0; i<oLinks.length; i++){ oLinks[i].index = i; oLinks[i].onclick = function () { for(var j =0; j<oLinks.length; j++){ oLinks[j].className=""; oCons[j].style.display = "none"; } this.className="cur"; oCons[this.index].style.display ="block"; } } } }); })(jQuery);
这里需要注意的是，我们调用该插件的元素对象是(′tab′)，则此时直接使用this.find()就等价于(‘tab').find()，而不是$(this).find()，注意使用代入法来区分这两种写法的差别。
作为一款插件，它应该是可以被开发者控制的，所以还应该提供给使用者一些配置接口。
jquery对象级别插件写法-加入配置项
tab.html
…… <ul> <!--对照文章开始的代码， 注意这里的改动 --> <li><a href="#">tab1</a></li> <li><a href="#">tab2</a></li> …… <script src="https://www.jb51.net/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/h_tabs.js"></script> <script> $('#tab').h_tab({ //使得当前选项卡标签的样式名称可自定义的配置 curName:'current' }); </script> </body> </html>
我们这里把一开始的”当前选项卡标签样式类名称“由”cur“改为了”current“，并将其作为配置项传入插件
h.css
.tabs ul { width: 100%; list-style-type: none;} .tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;} .tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442} /*注意下面一行与之前的样式代码的对比变化之处*/ .tabs ul li a.current { border-bottom: 3px solid #f26123;} .tabCons section { display: none;} .tabCons section:nth-child(1) { display: block;}
我们在样式表中做出了相应的改动。
h_tabs.js