AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2016-08-26 1991
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

需求：

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



 

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

 

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

 

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

 

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

 

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

 

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

 

效果网址：

http://jianwangsan.cn/toolbox

 

 

 

 

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

①切图：

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


 

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



 

②页面制作：

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

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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按钮的动画和切换可以了，页面也可以正常切换了。

当然，目前页面颜色用的是纯色来站位，之后会修改
文章标签：
前端开发
JavaScript
关键词：
前端web
前端页面
web前端
Web页面
前端按钮
零零水
目录
相关文章
gkkkkk
|
19天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
gkkkkk
8 1
.自定义认证前端页面
土木林森
|
23天前
|
前端开发 JavaScript 安全
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性，HTTP/2显著提升了Web性能。同时，HTTPS确保了数据传输的安全性。文章提供了示例代码，展示了如何使用Node.js创建一个HTTP/2服务器。
土木林森
38 3
爱的不是纯牛奶-47754
|
9天前
|
消息中间件 前端开发 JavaScript
探索微前端架构：构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略，旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分，提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势，并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
爱的不是纯牛奶-47754
17 1
阿里云计算巢-雲尧
|
14天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息，并通过阿里云计算巢完成了Appsmith的快速部署，使用者不需要自己下载代码，不需要自己安装复杂的依赖，不需要了解底层技术，只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith，非技术同学也能轻松搞定。
阿里云计算巢-雲尧
33 5
爱的不是纯牛奶-47754
|
20天前
|
监控 前端开发 JavaScript
探索微前端架构：构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略，通过将大型前端应用拆分为多个独立的微应用，提高开发效率、增强可维护性，并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
爱的不是纯牛奶-47754
35 6
土木林森
|
24天前
|
前端开发 安全 应用服务中间件
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展，前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用，介绍了二进制分帧、多路复用和服务器推送等特性，并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS，以提升Web应用的性能和安全性。
土木林森
24 3
土木林森
|
24天前
|
前端开发 JavaScript API
前端框架新探索：Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来，前端技术飞速发展，Svelte凭借独特的编译时优化和简洁的API设计，成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势，包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制，并通过示例代码展示其使用方法。
土木林森
36 2
想飞的雪糕
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
139 2
你都不懂
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
43 0
想飞的雪糕
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记（一）：两个指令反过来说大模型就理解不了啦？或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下，自然语言指令解析的困境及解决方案。通过增加一个LLM解析层，将复杂的指令拆解为多个明确的步骤，明确操作类型与对象识别，处理任务依赖关系，并将自然语言转化为具体的工具命令，从而提高指令解析的准确性和执行效率。
想飞的雪糕
37 6

热门文章

最新文章

  • 1
    【网络安全】WebPack源码（前端源码）泄露 + jsmap文件还原
  • 2
    前端 时间个性化 插件 jquery.timeago.js
  • 3
    前端分页插件pagination
  • 4
    你用过的网站前端优化的技术有哪些？
  • 5
    wordpress页面前端添加编辑按钮
  • 6
    [前端]jekyll+markdown+github搭建个人博客
  • 7
    合格前端系列第四弹-如何监听一个数组的变化
  • 8
    未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~
  • 9
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 10
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 1
    js中如何使用工厂方式和构造函数创建对象，web开发项目实例
    42
  • 2
    在Web开发中，事件处理是一个至关重要的概念
    49
  • 3
    《手把手教你》系列技巧篇（四十六）-java+ selenium自动化测试-web页面定位toast-下篇（详解教程）
    66
  • 4
    Web Worker：JavaScript的后台任务解决方案
    158
  • 5
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    51
  • 6
    http协议 报文 给你讲明白咯，web开发基础
    32
  • 7
    ES6 变量的解构赋值，中级web开发工程师
    40
  • 8
    使用WebAssembly提升Web应用性能
    92
  • 9
    Vue中的组件：构建现代Web应用的基石
    44
  • 10
    深入理解MVC和MVVM：构建现代Web应用的利器
    148

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • 零基础学前端HTML+CSS
  • 企业Web常用架构LAMP-LNMP实战
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • 高校精品课-西安交通大学-Web 编程技术

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    无影云桌面