[原创]tab滑动面板效果初探

从接触jquery到现在，几乎没怎么去运用，之前一直习惯写js代码，今天想试着用jq实现一些常用的UI功能，滑动面板切换效果

先看效果图，样式比较简单：点击下载【原创】tab切换面板.zip

实例一：

html页面

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         *
 7         {
 8             margin: 0px;
 9             padding: 0;
10         }
11         #ul_tab
12         {
13             background-color: #ff0;
14             width: 300px;
15             height: 20px;
16             float: left;
17         }
18         #ul_tab li
19         {
20             float: left;
21             list-style: none;
22             height: 20px;
23             width: 100px;
24         }
25         .divCon
26         {
27             clear: none;
28             width: 300px;
29             height: 80px;
30             display: none;
31         }
32     </style>
33     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
34     <script type="text/javascript" src="js/tab2.js"></script>
35 </head>
36 <body>
37     <div id="content" style="height: 100px; width: 300px; padding-left: 0; border: 1px solid #000;">
38         <ul id="ul_tab">
39             <li>面板一</li>
40             <li>面板二</li>
41             <li>面板三</li>
42         </ul>
43         <div class="divCon">
44             1</div>
45         <div class="divCon">
46             2</div>
47         <div class="divCon">
48             3</div>
49     </div>
50 </body>
51 </html>

下面看jq代码

 

View Code
 1 $(document).ready(function () {
 2     $("#ul_tab li:eq(0)").css("background-color", "#f00");
 3     $("#ul_tab").next("div").css("background-color", "#f00").show();
 4 
 5     $("#ul_tab li").each(function (index) {//利用li对应的索引index传递到每个div中去
 6         $("#ul_tab li:eq(" + index + ")").mouseover(function () {
 7           //对所有的li和对应的div设置为违背触发事件时的样式
 8             $("#ul_tab li").css("background-color", "#ff0")
 9             $("#content >div").hide();
10          //      //对触发事件的li和div应用相应被选中的样式    
11             $(this).css("background-color", "#f00");
12             $("#content >div:eq(" + index + ")").css("background-color", "#f00").show();
13         })
14     })
15 }) 

 

实例二：

 做完了上面的效果图后，想增加点功能，就是自动轮播，点击时候停止

html代码，跟上面的有些不一样，

 

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5       <style type="text/css">
 6         *{margin:0px; padding:0;}
 7         #ul_tab{background-color:#ff0; width:300px; height:20px; float:left;}
 8        #ul_tab li{ float:left; list-style:none;height:20px;width:100px;}
 9     </style>
10     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
11 <!--    <script type="text/javascript" src="js/tab1.js">
12     </script>-->
13       <script type="text/javascript" src="js/tab1.js">
14     </script>  
15 </head>
16 <body>
17 <div id="content" style="height:100px;width:300px; padding-left:0;border:1px solid #000;">
18       <ul id="ul_tab">
19         <li onmousemove="tabs(this,0)">面板一</li>
20         <li onmousemove="tabs(this,1)">面板二</li>
21         <li onmousemove="tabs(this,2)">面板三</li>        
22       </ul>
23       <div style="clear:none;width:300px; height:80px;">1</div>
24       <div style="clear:none;width:300px; height:80px; display:none;">2</div>
25       <div style="clear:none;width:300px; height:80px; display:none;">3</div>
26     </div> 
27 </body>
28 </html>

 

jq代码如下：用到了定时器setInterval和clearInterval

 

View Code
 1 $(document).ready(function () {
 2     $("#ul_tab li:eq(0)").css("background-color", "#f00");//页面加载初始化所有的li，和对应的div标签背景颜色
 3     $("#ul_tab").next("div").css("background-color", "#f00");
 4     var time;
 5     auto();
 6 })
 7 function tabs(oli, i) {//改变对应li和div的样式
 8     clearInterval(time);
 9     $("#ul_tab >li").css("background-color", "#ff0")
10     $("#content>div").hide();
11     $(oli).css("background-color", "#f00");
12     $("#content>div:eq(" + i + ")").show().css("background-color", "#f00");
13 }
14 
15 function autoPlay(i)//当li执行时显示的样式
16 { 
17     $("#ul_tab >li").css("background-color", "#ff0")
18     $("#content>div").hide();
19     $("#ul_tab >li:eq("+i+")").css("background-color", "#f00");
20      $("#content>div:eq(" + i + ")").show().css("background-color", "#f00");     
21 }
22 
23 function auto()//自动播放函数
24 {
25  var i=0;//定义全局变量 播放一次后i的值加1
26  var count=$("#ul_tab >li").length; //获取li的个数
27   time = setInterval(function(){
28           autoPlay(i);
29             i++;
30             if (i>=count)//检测如果i的值超过范围 就从0开始
31             {
32               i=0;
33             }
34 },1500);
35 }

实例三：

 看到网上的牛人都是将js代码封装成所谓的插件形式，封装插件的方法有1.类级别的插件开发。2.对象级别插件开发。

类级别写法：jQuery.插件名称=function(){.....}；

调用方法：$.插件名称();

 

View Code
<script type="text/javascript">
        jQuery.msg = function () {
            alert("123");
    　　 };         
    </script>
    <script type="text/javascript">
        $(function () {
$.msg();
        });
    </script>

 

来比较一下对象级别 插件写法：Go on!

 

(function($) 
{$.fn.pluginName = function() 
{
// 代码区域。
};})(jQuery);

对象级别写法：$.fn.插件名称 = function(){};多了一个fn,没错，是fn! fn!!! fn!!!

调用方法：$("#Me").插件名称();

稍微说一下，$.插件名称();是通过$访问调用jquery中的全局函数，直接可以通过jquery或者美元$调用，从而实现一些效果。

先看看我的jq对象级别的封装

 

View Code
 1 // JavaScript Document
 2 (function($) {
 3           $.fn.tabs = function(method) 
 4           {      
 5                var defualts = { events: "click" }; //json对象数据，默认是点击事件  
 6                var opts = $.extend({}, defualts, method);
 7                 var obj = $(this);
 8                 //初始化第一个li,第一个div被选中
 9                 $("ul li:first",obj).addClass("defaultLi");
10                 $("div:first",obj).show();                     
11             
12              $("ul li",obj).bind(opts.events,function(){
13                         var index=$("ul li",obj).index    ($(this));                                    
14                     //对所有的li和对应的div设置为违背触发事件时的样式
15                         $("ul li",obj).addClass("undefaultLi");
16                        $("div",obj).hide();
17                     //对触发事件的li和div应用相应被选中的样式        
18                         $("ul li:eq("+index+")",obj).removeClass("undefaultLi").addClass("defaultLi");    
19                         $("div:eq("+index+")",obj).show().addClass("defaultDiv");            
20                                                                                 
21                 })//end bind
22             
23           };
24 })(jQuery);

下面看看html控制页面的代码

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>    
 4 <title></title>  
 5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 6 <style type="text/css">
 7 *{ margin:0; padding:0;}
 8 #mytabs{
 9     height: 100px; 
10     width: 300px; 
11     padding-left: 0;
12     border:1px solid #000;
13     }
14     #mytabs ul{
15           background-color: #ff0;
16             width: 300px;
17             height: 20px;        
18           }
19         #mytabs ul li
20         {
21             float: left;
22             list-style: none;
23             height: 20px;
24             width: 100px;
25         }
26         #mytabs div
27         {
28             clear: none;
29             width: 300px;
30             height: 80px;            
31             display: none;
32             background-color:#F00;
33         }
34         .defaultLi{  
35             float: left;
36             list-style: none;
37             height: 20px;
38             width: 100px;
39             background-color:#F00;
40         }
41         .undefaultLi
42         {   float: left;
43             list-style: none;
44             height: 20px;
45             width: 100px;
46             background-color:#ff0;
47         }
48         .defaultDiv
49         {
50             clear: none;
51             width: 300px;
52             height: 80px;
53             background-color:#F00;
54         }        
55 </style>
56   
57 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>   
58  <script src="js/mytabs2.js" type="text/javascript"></script>    
59   <script type="text/javascript">      
60   $(function () {         
61              //默认为点击 $("#mytabs").tabs();    
62               $("#mytabs").tabs({events:"mouseover"})
63               });    
64    </script>
65  </head><body>  
66    <!--tabs示例-->    
67    <div id="mytabs">       
68     <!--选项卡区域-->        
69     <ul>           
70          <li><a href="#">选项1</a></li>        
71          <li><a href="#">选项2</a></li>          
72           <li><a href="#">选项3</a></li>      
73      </ul>       
74               <!--面板区域-->      
75           <div>11111</div>        
76             <div>22222</div>      
77            <div>33333</div>    
78     </div>
79  </body>
80 </html>

实例三的方式，html页面简单，只有定义面板区域总div的id，不过jq调用都是对样式类名的控制，不像前两种比较固定，调用插件的方法只有一句话

 

<script type="text/javascript">      
  $(function () {         
             //默认为点击 $("#mytabs").tabs();    
              $("#mytabs").tabs({events:"mouseover"})
              });    
   </script>

最后提供完整代码：/Files/Jaylong/tab切换面板.zip

posted @ 2011-10-20 21:32  流星剑  阅读(3862)  评论(1)  编辑  收藏  举报