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

2021-07-13 00:38:07

需求：

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

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


 

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

 

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

 

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

 

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

 

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

 

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

 

效果网址：

http://jianwangsan.cn/toolbox

 

 

 

 

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

①切图：

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

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

 

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

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


 

②页面制作：

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

[javascript] view plain copy  前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）
  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  前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）
  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  前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）
  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. }  
前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）

 

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

当然，目前页面颜色用的是纯色来站位，之后会修改
上一篇：Hibernate【映射】知识要点（三)


下一篇：Android studio 使用gradle 基础