[原创]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

转载于:https://www.cnblogs.com/Jaylong/archive/2011/10/20/ty.html