使用自定义 jQuery 插件的一个选项卡Demo
前几天闲着没事，想着编写一个 jQuery 插件，或许这将是一个美好的开始。
这里是html页面：
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="GB2312" /> 5 <title>选项卡</title> 6 <link href="css/tabs.css" rel="stylesheet" type="text/css"/> 7 <script src="js/jquery.min.js" type="text/javascript"></script> 8 <script src="js/tabs.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(function () { 11 $("#mytabs").tabs(); 12 }); 13 </script> 14 </head> 15 <body> 16 <div id="mytabs"> 17 <ul> 18 <li><a href="#tabs1">选项1</a></li> 19 <li><a href="#tabs2">选项2</a></li> 20 <li><a href="#tabs3">选项3</a></li> 21 <li><a href="#tabs4">选项4</a></li> 22 </ul> 23 <div id="tabs1">First</div> 24 <div id="tabs2">Second</div> 25 <div id="tabs3">Third</div> 26 <div id="tabs4">Fourth</div> 27 </div> 28 </body> 29 </html>
下面看面按照顺序给出引用的内容。
首先是样式文件css/tabs.css ：
1 body { 2 background-color: #EEE; 3 } 4 .tabsDiv { 5 width: 500px; 6 height: 350px; 7 margin: 100px auto; 8 border: 1px solid black; 9 background-color: white; 10 } 11 .tabsDiv ul { 12 width: 500px; 13 height: 30px; 14 list-style: none; 15 margin: 0px; 16 padding: 0px; 17 } 18 .tabsDiv li { 19 width:25%; 20 height:30px; 21 line-height:30px; 22 } 23 .tabsDiv div { 24 background-color: yellow; 25 height:20px; 26 width:60px; 27 text-align: center; 28 margin: 50px auto; 29 } 30 .tabsSeletedLi { 31 background-color: white; 32 float: left; 33 text-align: center; 34 } 35 .tabsSeletedLi a { 36 color: black; 37 text-decoration: none; 38 font-weight:bold; 39 } 40 .tabsSeletedLi a:hover { 41 color: grey; 42 } 43 .tabsUnSeletedLi { 44 background-color: black; 45 float: left; 46 text-align: center; 47 } 48 .tabsUnSeletedLi a { 49 color: white; 50 text-decoration: none; 51 font-weight:bold; 52 } 53 .tabsUnSeletedLi a:hover { 54 color: grey; 55 }
需要引用的 js/jquery.min.js 是必不可少的，这里就不提供了，大家可以自己去下载。
接下来是自定义jQuery插件 js/tabs.js ：
1 (function($) { 2 $.fn.tabs = function() { 3 var opts = { 4 switchingMode: "mouseover" // or "click" 5 }; 6 var obj = $(this); 7 var clickIndex = 0; 8 obj.addClass("tabsDiv"); 9 $("ul li:first", obj).addClass("tabsSeletedLi"); 10 $("ul li", obj).not(":first").addClass("tabsUnSeletedLi"); 11 $("div", obj).not(":first").hide(); 12 $("ul li", obj).bind(opts.switchingMode, 13 function() { 14 if (clickIndex != $("ul li", obj).index($(this))) { 15 clickIndex = $("ul li", obj).index($(this)); 16 $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi"); 17 $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi"); 18 var divid = $("a", $(this)).attr("href").substr(1); 19 $("div", obj).hide(); 20 $("#" + divid, obj).show(); 21 }; 22 }); 23 }; 24 })(jQuery);
这个插件的最大好处就是可以更改 tabs 的切换方式，试着把 switchingMode: "mouseover" 改成 switchingMode: "click" 然后看看有什么效果？
