使用自定义 jQuery 插件的一个选项卡Demo

前几天闲着没事，想着编写一个 jQuery 插件，或许这将是一个美好的开始。

这里是html页面：

 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="GB2312" />
     <title>选项卡</title>
     <link href="css/tabs.css" rel="stylesheet" type="text/css"/>
     <script src="js/jquery.min.js" type="text/javascript"></script>
     <script src="js/tabs.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             $("#mytabs").tabs();
         });
     </script>
 </head>
 <body>
     <div id="mytabs">
         <ul>
             <li><a href="#tabs1">选项1</a></li>
             <li><a href="#tabs2">选项2</a></li>
             <li><a href="#tabs3">选项3</a></li>
             <li><a href="#tabs4">选项4</a></li>
         </ul>
         <div id="tabs1">First</div>
         <div id="tabs2">Second</div>
         <div id="tabs3">Third</div>
         <div id="tabs4">Fourth</div>
     </div>
 </body>
 </html>

下面看面按照顺序给出引用的内容。

首先是样式文件css/tabs.css ：

 body {
     background-color: #EEE;
 }
 .tabsDiv {
     width: 500px;
     height: 350px;
     margin: 100px auto;
     border: 1px solid black;
     background-color: white;
 }
 .tabsDiv ul {
     width: 500px;
     height: 30px;
     list-style: none;
     margin: 0px;
     padding: 0px;
 }
 .tabsDiv li {
     width:25%;
     height:30px;
     line-height:30px;
 }
 .tabsDiv div {
     background-color: yellow;
     height:20px;
     width:60px;
     text-align: center;
     margin: 50px auto;
 }
 .tabsSeletedLi {
     background-color: white;
     float: left;
     text-align: center;
 }
 .tabsSeletedLi a {
     color: black;
     text-decoration: none;
     font-weight:bold;
 }
 .tabsSeletedLi a:hover {
     color: grey;
 }
 .tabsUnSeletedLi {
     background-color: black;
     float: left;
     text-align: center;
 }
 .tabsUnSeletedLi a {
     color: white;
     text-decoration: none;
     font-weight:bold;
 }
 .tabsUnSeletedLi a:hover {
     color: grey;
 }

需要引用的 js/jquery.min.js 是必不可少的，这里就不提供了，大家可以自己去下载。

接下来是自定义jQuery插件 js/tabs.js ：

 (function($) {
     $.fn.tabs =    function() {
         var    opts = {
             switchingMode: "mouseover"  // or "click"
         };
         var obj = $(this);
         var clickIndex = 0;
         obj.addClass("tabsDiv");
         $("ul li:first", obj).addClass("tabsSeletedLi");
         $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");
         $("div", obj).not(":first").hide();
         $("ul li", obj).bind(opts.switchingMode,
         function() {
             if (clickIndex != $("ul li", obj).index($(this))) {
                 clickIndex = $("ul li", obj).index($(this));
                 $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");
                 $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");
                 var    divid = $("a", $(this)).attr("href").substr(1);
                 $("div", obj).hide();
                 $("#" + divid, obj).show();
             };
         });
     };
 })(jQuery);

这个插件的最大好处就是可以更改 tabs 的切换方式，试着把 switchingMode: "mouseover" 改成 switchingMode: "click" 然后看看有什么效果？