jquery选项卡插件

孟德军 发布于 2010/11/02 01:04
阅读 3K+
收藏 4
1./**  
2.* @desc JQuery选项卡插件  
3.* @author mengdejun  
4.* @version 1.1.1  
5.* @date 20100817  
6.*/  
7.(function($)   
8.{   
9./**  
10.* @desc 导航栏  
11.* @param ids 选项卡层命名前缀 默认为tab  
12.* @param cls 选项卡层通用类前缀 默认为tabcls  
13.* @param def 默认显示选项卡序列号 默认为1  
14.*/  
15.$.fn.navTabs = function(ids,cls,def,effectClass)   
16.{   
17.   if(!ids||ids=="")ids="tab"  
18.   if(!cls||cls=="")cls="tabcls";   
19.   if(!def||def==0)def=1;   
20.   if(!effectClass||effectClass==0)effectClass="selected";   
21.   $("."+cls).hide();   
22.   $("#"+ids+""+def).show();   
23.   $(this).find("ul li").each(function(index,ele)   
24.   {   
25.    if(typeof($(ele).attr("name"))=="undefined")   
26.    {   
27.     $(ele).attr("name",(index+1));   
28.    }   
29.    if(index+1==def)$(ele).find("a").addClass(effectClass);   
30.    $(ele).bind("click",function()   
31.    {   
32.     $("."+cls).hide();   
33.     $(this).siblings().each(function(ind,el){$(el).find("a").removeClass(effectClass);});   
34.     $(this).children("a").addClass(effectClass);   
35.     $("#"+ids+$(this).attr("name")).show();   
36.    });   
37.});   
38.};   
39./**  
40.* @desc 滚动行函数  
41.* @param cls 激活时采用的类  
42.*/  
43.$.fn.round=function(cls)   
44.{   
45.   $(this).bind("mouseover",function(){$(this).addClass(cls);});   
46.   $(this).bind("mouseout",function(){$(this).removeClass(cls);});   
47.};   
48./**  
49.* @desc 单击事件绑定函数  
50.* @param obj json对象(回调函数) 调用时候会传递当前对象至函数  
51.* @example {doSelect:function(obj){}}  
52.*/  
53.$.fn.select=function(obj)   
54.{   
55.   $(this).bind("click",function(){if(obj)obj.doSelect(this);});   
56.};   
57.})(jQuery); 

 

 

  1. <html>  
  2.  <head>  
  3.    <title>选项卡</title>  
  4.    <script type='text/javascript' src='jquery-1.4.2.min.js'></script>  
  5.         <script type='text/javascript' src='Jquery.nav.js'></script>  
  6.    <style type='text/css'>  
  7.     @import url('menu.css');   
  8.    </style>  
  9.    <script type='text/javascript'>  
  10.     $(function()   
  11.         {   
  12.          $("#navMenu").navTabs('tab','tabClass',1,'selectedClass');   
  13.        });   
  14.    </script>  
  15.  </head>  
  16. <body>  
  17.    <div id="container">  
  18.         <div id="navMenu">  
  19.             <ul>  
  20.                 <li><a href="#">Menu1</a></li>  
  21.                     <li><a href="#">Menu2</a></li>  
  22.                     <li><a href="#">Menu3</a></li>  
  23.                     <li><a href="#">Menu4</a></li>  
  24.                 </ul>  
  25.             </div>  
  26.             <div id="tab1" class="tabClass">  
  27.             111   
  28.             </div>  
  29.             <div id="tab2" class="tabClass">  
  30.             222   
  31.             </div>  
  32.             <div id="tab3" class="tabClass">  
  33.             333   
  34.             </div>  
  35.             <div id="tab4" class="tabClass">  
  36.             444   
  37.             </div>  
  38.         </div>  
  39. </body>  
  40. </html>  
  41. body{text-align:center;font-family:"Courier New", Courier, monospace;}   
  42. #container{width:60%;display:block;margin:0 auto;}   
  43. .tabClass{width:100%;clear:both;border:1px double #09F;text-align:left;height:180px;}   
  44. #navMenu{width:100%;text-align:left;float:left;}   
  45. #navMenu ul{float:left;}   
  46. #navMenu ul li{list-style:none;float:left;display:block;background:rgb(110,152,252);padding:5px 5px;}   
  47. #navMenu ul li a{text-decoration:none;padding:10px 10px;}   
  48. #navMenu ul li a:hover{color:#FFF;}   
  49. .selectedClass{background:#06F;}  
加载中
返回顶部
顶部