你的位置:首页 > Java教程

[Java教程]自制tab页


没事自己弄着玩,写了个tab页。不要当真。想看就看看。希望相互学习。

效果预览:

html源码:
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>tabs</title> 6   <script type="text/javascript" src="jquery-1.10.1.js"></script> 7   <script type="text/javascript" src="tabs.js"></script> 8   <style type="text/css"> 9     body{10       background-color: #fff;11     }12     p{13       color:green;14       text-align: center;15       font-size: 22px;16       margin:0px;17       padding:0px;18     }19     .tabs{20       /* border: 1px solid green; */21     }22     .tab_titles{23       border: 1px solid #ccc;24       margin:1px 1px -1px 5px;25       padding: 3px;26       border-radius: 10px 10px 0px 0px;27       float: left;28       cursor: pointer;29     }30     .tab_titles_inner{31       width:100%;32       height: 100%;33       text-align: center;34     }35     .tab_selected{36       border-bottom: 1px solid white;37       margin-bottom:-1px;38       border-radius: 10px 10px 0px 0px;39     }40     .contents{41       border:1px solid #ccc;42       width:100%;43       height:800;44       margin-left: 5px;45       padding:5px;46     }47     .clear_float{48       height: 0px;49       width:0px;50       clear: both;51     }52   </style>53 </head>54 <body>55   <p>PheonixHkbxoic</p>56   <div class="tabs">57     <div>0</div>58     <div>1</div>59     <div>2</div>60   </div>61   <script type="text/javascript">62     var title = ["java","c/++","js/jquery"];63     var src = [64           'http://www.baidu.com',65           'http://www.360.com',66           'http://www.csdn.net'67         ];68     var MyTabs = tabs.init(title,src);69     MyTabs.setTabTitlesStyle("width","100px");70     MyTabs.select(1);71     72     // var _$$ = $$(title,src);73     // _$$.select(1);74     // _$$.setTabTitlesStyle("width","100px");75 76 77   </script>78 </body>79 </html>

 



js源码:
 1 /** 2  * @FileName  :  tabs.js 3  * @Author   :  PheonixHkbxoic 4  * @Mail    :  hkbxoic@gmail.com 5  * @DateTime  :  2016-07-03 13:18:55 6  * @Version  :  v1.0.0 7  * @Description:  Description 8 */ 9  10 (function(w){ 11  12   var tabs = function(tab_titles,tab_content_srcs){ 13     return new tabs.fn._init(tab_titles,tab_content_srcs); 14   } 15  16   tabs.fn = tabs.prototype = {//对象原型,对象属性,由类(构造函数)创建的所有对象都拥有的这些属性 17     tab_titles : [], 18     tab_content_srcs : [], 19     len : 0, 20     tab_selected : 0, 21     tab_selectedTitle_color: "purple", 22     setTabTitles : function(titles){ 23       this.tab_titles = titles; 24     }, 25     setTabContentSrcs :function(contentSrcs){ 26       this.tab_content_srcs = contentSrcs; 27     }, 28     setLen :function(len){ 29       this.len = len|0; 30     }, 31     _init : function(tab_titles,tab_content_srcs){ 32       this.setTabTitles(tab_titles); 33       this.setTabContentSrcs(tab_content_srcs); 34       this.setLen(tab_titles.length); 35       tabs.currentSrc = tab_content_srcs[0]; 36  37       //add class to tab contents  38       $(".tabs div").each(function(index, el) { 39         $(this).addClass("contents"); 40         $(this).addClass("content_"+index);         41       }); 42  43       //根据tab title 数组 创建tab title div  44       var _title = "<div class=\"clear_float\">.</div>"; 45       $(".tabs").prepend(_title); 46       for (var i = tab_titles.length-1; i >= 0; i--) { 47         _title = "<div id=\"tab_titles_"+i+"\" class=\"tab_titles\"><div class=\"tab_titles_inner\">"+tab_titles[i]+"</div></div>"; 48         $(".tabs").prepend(_title); 49       }; 50       //默认选中第0个  51       tabs.select(0); 52        53       //添加点击事件 54       $(".tab_titles").each(function(index, el) { 55         $(this).on('click', function(event) { 56           event.preventDefault(); 57           tabs.fn.tab_selected = index; 58           tabs.currentSrc = tab_content_srcs[index]; 59           tabs.select(index); 60         }); 61       }); 62       return this; 63     } 64   }; 65   tabs.fn._init.prototype = tabs.fn; 66  67   var tab_properties = {//类属性 68     currentSrc : "", 69     init : function(tab_titles,tab_content_srcs){ 70       var _tabs = new tabs(tab_titles, tab_content_srcs); 71       return _tabs; 72     }, 73     select: function(index){//设置选中第几个 74       //清除之前选中 75       $(".tab_titles").each(function(i, el) { 76         $(this).removeClass("tab_selected"); 77         $("#tab_titles_"+i).css('color', 'green'); 78       }); 79       //选中所选 80       $("#tab_titles_"+index).addClass('tab_selected'); 81       $("#tab_titles_"+index).css('color', tabs.fn.tab_selectedTitle_color); 82  83       tabs.hideContents();//都隐藏 84       tabs.showContents(index);//默认显示第一个 85  86       //加载数据 87       tabs.loadHtml(index,tabs.currentSrc); 88     }, 89     setTabTitlesStyle : function(styleName,styleValue,index){ 90       if (typeof index == 'number'&&index>-1) { 91         $("#tab_titles_"+index).css(styleName,styleValue); 92       }else{ 93         $(".tab_titles").each(function(index, el) { 94           $(this).css(styleName,styleValue); 95         }); 96       } 97     }, 98     hideContents : function(index){//index隐藏 99       if (typeof index == 'number'&&index>-1) {100         $(".content_"+index).hide();101       }else{102         $(".contents").each(function(index, el) {103           $(this).hide();104         });105       }106     },107     showContents : function(index){//index显示108       if (typeof index == 'number'&&index>-1){109         $(".content_"+index).show();110       }else{111         $(".contents").each(function(index, el) {112           $(this).show();  113         });114       }  115     },116     setSelectedTitlecolor : function(color){117       tabs.fn.tab_selectedTitle_color = color;118     },119     loadHtml : function(index,url){120       $(".content_"+index).html("<iframe src=\""+url+"\" style=\"height:1000px;width:100%;border:none;\"></iframe>");121     }122 123   }124 125   tabs.extend = tabs.fn.extend = function(){126     var target = arguments[0]||{};127     for(name in target){128       this[name] = target[name];129     }130     return target;131   };132   tabs.extend(tab_properties);  //类属性赋值133   tabs.fn.extend(tab_properties);  //对象属性赋值134 135   w.$$ = w.tabs = tabs;136 137 })(window);