前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）

需求：

①写一个web版的360工具箱，示意图如下：

②无左上返回按钮，右上按钮有皮肤切换，下拉框（但无点击逻辑）；

③按钮点击有事件，但事件是console.log(按钮名)；

④可以在全部工具和我等工具自由切换；

⑤可以点击左下角的编辑，然后根据实际表现设置；

⑥可以在全部工具里面，点击按钮，然后添加到我的工具这边来；

⑦效果尽量与原图相同，只使用jquery库；

效果网址：

http://jianwangsan.cn/toolbox

（一）tab页切换，包含内容区

①切图：

先切图，如图：（不想用他的绿色的）

再切按钮图（自行ps）：（下图白色，所以直接是看不见的）

②页面制作：

html：我这里发的是jade版，如果需要看html版的话，请打开demo的网址：http://jianwangsan.cn/toolbox，然后查看源代码自行复制

[javascript] view plain copy

1. link(rel='stylesheet', href='./stylesheets/toolboxes.css')  
2. script(type="text/javascript",src='javascripts/toolboxes.js')  
3. div.back  
4.     div.tooltop  
5.         div.tooltop-img  
6.         div.toolTab  
7.             div.tool#alltool  
8.                 span.img.alltool.select  
9.                 span.text    全部工具  
10.                 div.hover  
11.             div.tool#mytool  
12.                 span.img.mytool  
13.                 span.text    我的工具  
14.     div.contentbox  
15.         div.toolbox-all  
16.   
17.         div.toolbox-my.displayNONE  

CSS：

[css] view plain copy

1. a[href='/toolbox'] {  
2.     color: #555;  
3.     text-decoration: none;  
4.     background-color: #e5e5e5;  
5.     -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);  
6.     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);  
7.     box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);  
8. }  
9.   
10. .back {  
11.     height: 600px;  
12.     width: 100%;  
13.     position: relative;  
14.     -webkit-box-shadow: 0px 0px 2px #555;  
15.     -moz-box-shadow: 0px 0px 2px #555;  
16.     box-shadow: 0px 0px 2px #555;  
17. }  
18.   
19. .back * {  
20.     border: 0;  
21.     padding: 0;  
22.     margin: 0;  
23. }  
24.   
25. .back .tooltop {  
26.     height: 120px;  
27.     width: 100%;  
28.     background-color: white;  
29.     position: relative;  
30. }  
31.   
32. .back .tooltop-img {  
33.     height: 100%;  
34.     width: 100%;  
35.     background-image: url(../img/toolboxBackground.png);  
36.     background-size: cover;  
37. }  
38.   
39. .back .toolTab {  
40.     position: absolute;  
41.     left: 0;  
42.     bottom: 10px;  
43.     height: 35px;  
44.     width: 100%;  
45. }  
46.   
47. .back .toolTab .tool {  
48.     margin-left: 20px;  
49.     width: 140px;  
50.     height: 100%;  
51.     line-height: 30px;  
52.     color: white;  
53.     font-size: 22px;  
54.     font-weight: 900;  
55.     -webkit-box-sizing: border-box;  
56.     -moz-box-sizing: border-box;  
57.     box-sizing: border-box;  
58.     display: inline-block;  
59.     cursor: default;  
60.     position: relative;  
61.     -webkit-user-select: none;  
62.     -moz-user-select: none;  
63.     -ms-user-select: none;  
64.     user-select: none;  
65. }  
66.   
67. .back .toolTab .tool .img {  
68.     height: 27px;  
69.     width: 27px;  
70.     background-repeat: no-repeat;  
71.     display: inline-block;  
72.     vertical-align: middle;  
73.     background-image: url(../img/toolbox.png);  
74. }  
75.   
76. .back .toolTab .tool .img.alltool {  
77.     background-position: 0 0;  
78. }  
79.   
80. .back .toolTab .tool .img.alltool.select {  
81.     background-position: 0 -50px;  
82. }  
83.   
84. .back .toolTab .tool .img.mytool {  
85.     background-position: -40px 0;  
86. }  
87.   
88. .back .toolTab .tool .img.mytool.select {  
89.     background-position: -40px -50px;  
90. }  
91.   
92. .back .toolTab .tool .text {  
93. }  
94.   
95. .back .toolTab .hover {  
96.     height: 2px;  
97.     width: 125px;  
98.     background-color: white;  
99.     position: absolute;  
100.     bottom: -2px;  
101.     left: 0;  
102. }  
103.   
104. .back .contentbox {  
105.     position: absolute;  
106.     top: 120px;  
107.     bottom: 0;  
108.     left: 0;  
109.     right: 0;  
110.     background-color: white;  
111. }  
112.   
113. .back .contentbox > div {  
114.     width: 100%;  
115.     height: 100%;  
116. }  
117.   
118. .back .contentbox .toolbox-all {  
119.     background: red;  
120. }  
121.   
122. .back .contentbox .toolbox-my {  
123.     background: green;  
124. }  

JavaScript：

[javascript] view plain copy

1. $(document).ready(function () {  
2.     //这里是点击切换显示页面  
3.   
4.   
5.     var toolboxTab = new Tab();  
6.     toolboxTab.tabClick();  
7.     toolboxTab.tabMouseEnter();  
8.     toolboxTab.tabMouseLeave();  
9.   
10.   
11. })  
12.   
13. var Tab = function () {  
14.     //以下代码大量考虑到扩展性，例如，可以新增一个tab和content页面  
15.     this.tabClick = function () {  
16.         $(".tool").click(function () {  
17.             //这里是上面的图标的逻辑变换  
18.             if (!($(this.children[0]).hasClass("select"))) {  
19.                 $(".select").removeClass("select");  
20.                 $(this.children[0]).addClass("select");  
21.   
22.                 //这里是hover的横线的位置变化  
23.                 var node = $(".tool .hover");  
24.                 node.remove();  
25.                 //当动画需要停止的时候，让他停止  
26.                 if ('stop' in node) {  
27.                     node.stop();  
28.                 }  
29.                 node.css("left", "0px");  
30.                 $(this).append(node);  
31.   
32.                 //以下应该是切换页面的逻辑  
33.                 //获取切换到哪一个页面，  
34.                 var index = null;  
35.                 for (var i = 0; i < this.parentNode.children.length; i++) {  
36.                     if (this == this.parentNode.children[i]) {  
37.                         index = i;  
38.                     }  
39.                 }  
40.                 $(".contentbox > div").addClass("displayNONE");  
41.                 $(".contentbox > div:nth-child(" + (index + 1) + ")").removeClass("displayNONE");  
42.   
43.             }  
44.         })  
45.     };  
46.   
47.     this.tabMouseEnter = function () {  
48.         $(".tool").mouseenter(function (evt) {  
49.             //只有当鼠标移动到非当前选中的tab上时，才会移动  
50.             if (!($(this.children[0]).hasClass("select"))) {  
51.   
52.                 var self = this;  
53.                 var node = $(".tool .hover");  
54.                 var start = null;  
55.                 var end = null;  
56.   
57.                 var tools = $(".toolTab")[0].children  
58.                 for (var i = 0; i < tools.length; i++) {  
59.                     if (self == tools[i]) {  
60.                         end = i;  
61.                     } else if ($(".select")[0].parentNode == tools[i]) {  
62.                         start = i;  
63.                     }  
64.                 }  
65.   
66.                 //停止之前的动画  
67.                 if ('stop' in node) {  
68.                     node.stop();  
69.                 }  
70.                 //现在开始动画效果  
71.                 node.animate({"left": (end - start) * 160 + "px"})  
72.             }  
73.         })  
74.     };  
75.     this.tabMouseLeave = function () {  
76.         $(".tool").mouseleave(function () {  
77.             //只有当鼠标移动到非当前选中的tab上时，才会移动  
78.             if (!($(this.children[0]).hasClass("select"))) {  
79.                 var node = $(".tool .hover");  
80.                 //停止之前的动画  
81.                 if ('stop' in node) {  
82.                     node.stop();  
83.                 }  
84.                 node.animate({"left": "0px"})  
85.             }  
86.         })  
87.     }  
88. }  

到目前为止，tab按钮的动画和切换可以了，页面也可以正常切换了。

当然，目前页面颜色用的是纯色来站位，之后会修改