Jquery 自制-tabs组件

总是去别人那边拿代码 发现很难完全满足项目的需求 索性花点时间 自己写一个 不过花费的时间比我想象的要久 还有很多不足 留给以后改正

JS代码：

 1 var myTabs = function (container,titleArr, titleContainer, contentContainer) {
 2     this.$container = $(container);
 3     this.$title = $(titleContainer);
 4     this.$contents = $(contentContainer);
 5 
 6     this.init(titleArr);
 7     this.tabChange();
 8 }
 9 
10 myTabs.prototype = {
11     //初始化
12     init: function (arr) {
13         this.$title.addClass('myTab_title');
14         this.$contents.addClass('myTab_content');
15 
16         var i = 0,
17             len = arr.length;
18 
19         for (; i < len; i++) {
20             this.$title.append('<li class="myTab_title_no"><a href="#tabs_' + i + '">' + arr[i] + '</a></li>');
21         }
22 
23         this.hideAllDivs();
24 
25         var firstTitle = this.$title.find("li:first");
26         var firstDiv = this.$contents.find('div:first');
27 
28         $(firstTitle).addClass('myTab_title_active');
29         $(firstDiv).show();
30     },
31     //切换
32     tabChange: function () {
33         var tThis = this;
34         tThis.$title.find('li').on('click', function (e) {
35             e.preventDefault();
36 
37             var tablink = $(this).find('a').attr('href');
38 
39             if ($(tablink).is(':hidden')) {
40                 tThis.hideAllDivs();
41                 $(tablink).show();
42 
43                 $(this).addClass('myTab_title_active').siblings().removeClass('myTab_title_active');
44             }           
45         });
46     },
47     //隐藏
48     hideAllDivs: function () {
49         var alldivs = this.$contents.find('div');   //children
50         $.each(alldivs, function (index, ele) {
51             $(ele).hide();
52         });
53     }
54 }

CSS代码（本来想尝试一下less的 为了防止别的项目要用 还是算了 并且这里的样式并不复杂）:

 1 /*标题*/
 2 .myTab_title{
 3     display:block;
 4     list-style-type:disc;
 5     margin:0;
 6     padding:0;
 7 }
 8 
 9 .myTab_title li{
10     float:left;
11     list-style:none;
12     margin-right:2px;
13 }
14 
15 .myTab_title li a{
16     display:block;
17     padding:10px 15px;
18     text-decoration:none;
19     color:#808080;
20 }
21 
22 /*初始样式*/
23 .myTab_title_no{
24     border-top:2px solid #fff;
25 }
26 
27 /*鼠标点击*/
28 .myTab_title_active{
29     border-top:2px solid #ca4141;
30 }
31 
32 /*内容*/
33 .myTab_content{
34     width:100%;
35     clear:both;
36 }

HTML：

 1     <div id="tabs_container">
 2         <ul id="tabs_title"></ul>
 3         <div id="tabs_content">
 4             <div id="tabs_0">
 5                 <p>1</p>
 6                 <p>1</p>
 7                 <p>1</p>
 8             </div>
 9             <div id="tabs_1">
10                 <p>2</p>
11             </div>
12             <div id="tabs_2">
13                 <p>3</p>
14             </div>
15         </div>
16     </div>

这里说明一下 内容放置区域 tabs_ 必须这么写 不然JS获取不到 完了tabs_里面的东西 可以随便写 我这里就不加滚动条了 根据项目 自己选择

如何调用，除了引入CSS和JS 需要添加的代码是：

var tab1 = new myTabs("#tabs_container", ["程序", "设计", "规划"], "#tabs_title", "#tabs_content");

参数说明：

1. 整个容器 

2. 所有标题

3. 标题容器

4. 内容容器

posted @ 2017-03-08 10:40  咖啡漩涡  阅读(627)  评论(0)  编辑  收藏  举报