自制tab页

最新推荐文章于 2024-09-26 14:24:29 发布

donghuang2002

最新推荐文章于 2024-09-26 14:24:29 发布

阅读量95

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/PheonixHkbxoic/p/5637911.html

版权

没事自己弄着玩，写了个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);