使用自定义 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" 然后看看有什么效果？