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>
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;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);
