[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（七）

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/noidea/archive/2009/01/19/1378297.html

文章标签：

#javascript #ViewUI

本文介绍如何通过CSS设定扩展Tabs类的应用场景，包括实现折叠菜单、折叠内容及轮换图片等功能，提供实例展示。

在已有的Tabs类基础上，还可以继续往下扩展，如，加上对Tabs的拖动排序功能等，不过我不想继续了。

最后这篇是通过CSS的设定，让Tabs类表现出更多的用途，比如实现折叠菜单，折叠内容，轮换图片等。

详细应用可见示例： Tabs 扩展应用

转载于:https://www.cnblogs.com/noidea/archive/2009/01/19/1378297.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30673611

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（一）

weixin_30252709的博客

12-29

我原来用Prototype.js写过几篇关于选项卡(Tabs)的日志，还用这个实例说明了一下Prototype.js的继承方式。前阵子回过头看看，发现当初的程序有很大的不足，最主要的是将前台XHTML代码的DOM结构写进了JS代码，未能实现XHTML和JS的解耦，通用性大大降低，这阵子看了看Mootools.js，在《Mootools Essential》书里最后的实例也是用选项卡做为实例...

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（二）

weixin_30723433的博客

01-02

115

在这一节里，我将对在上一节完成的基础上，对Tabs类进行扩展，加上自定义事件以及动画效果。 Mootools通过类的implements属性，实现类似于接口的功能，比如我们在Tabs类的implements属性加上Events，就可以让Tabs类获得Events类下的所有方法，其中的fireEvent方法就是让Tabs类获得了自定义事件的能力。然后我在Tabs类下的showSecti...

参与评论您还未登录，请先登录后发表或查看评论

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（五）

weixin_30832143的博客

01-05

本来这节是想讲讲用AJAX获取选项卡的内容，但是在编写过程中，发现前两天写的第三节，动态创建和删除选项卡功能里有BUG，于是动手将BUG修正。改完后，一时兴起，决定把动态创建删除功能再次增强，现在不仅能创建静态内容选项卡，还能用AJAX获取内容并创建选项卡。另外新加了判断，如果选项卡已经创建，那么再点击新建不会再次创建新的选项卡，而是显示已经创建了的选项卡。 addSecti...

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（四）

weixin_30608131的博客

01-04

136

今天要实现的功能是选项卡的自动轮换，我原来用Prototype.js写了一个简单的选项卡，并用类继承的方式完成了此项功能。 Mootools.js一样能轻松实现类的继承，Mootools.js实现类的继承是通过Class的Extends属性完成的。自动轮换功能的思路是：通过setInterVal函数来调用自动切换选项卡函数，并从用户体验的角度考虑，实现当鼠标移到选项卡上时停止轮换，离...

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（三）

weixin_30376323的博客

01-03

106

在这一节里，我将继续对Tabs类进行扩展，加上动态添加和删除选项卡的功能。这个功能是我在看到126邮箱里用选项卡来查看邮件后，想到在Tabs类也实现相应的功能思路如下：添加新选项卡函数有四个参数，分别是新加标签的文本，新加内容的文本，新加选项卡的位置以及在选项标签上加入删除的按钮。用传入的参数分别建立Element片段，加入到选项卡标签数组及选项卡内容数组，并将Elem...

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（六）

weixin_30765577的博客

01-06

今天这节的讲的是用AJAX获取内容，代码大部分与《Mootools Essential》最后的例子一样，Aaron Newton在他的这本书里对这个例子阐述的很详细，我不过稍微改动了一下，让它更适合于继承我所写的Tabs类。用AJAX获取内容有一点要考虑的是尽量不要重复的到服务器端获取同一内容，这段代码就对此做了处理，数据在得到之后，就不会再到服务器端获取。在示例中可以看到，当四个选项全点...

提升设计品质的8种布局方案[SM]

weixin_34409741的博客

01-19

371

网页设计中，内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中，是一个网站的基础，并且应该在考虑外观之前就决定好。没有好的布局，网页信息流就不能正确传递，所有东西都不能建立起合理的联系。在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门(sliders)、标签式、渐进布局(progressive layo...

java小项目未来出行汽车租赁平台

xiaoyoukaoer的博客

09-06

319

未来出行汽车租赁平台是基于Java开发的汽车租赁管理系统，旨在为用户提供便捷的车辆租赁服务。系统包含用户管理、车辆管理、订单管理等功能模块，适用于小型企业或个人学习使用。

vue2(7)-单页应用程序&路由

Naiveyouzhi的博客

09-07

263

快速引入组件，也可以用绝对路径基于@指代src目录，从src目录出发找组件。最大的原因是：页面按需更新要按需更新，就要明确访问路径和组件的关系。类名太长可以在router，index.js里面配置。单页应用程序，之所以开发效率高，性能高，用户体验好。右边第三个框，是在main.js中导入的。5.声明式导航-导航链接。2.路由：路径和组件的映射关系。配组件配规则，配导航配出口。如单页：网易云，多页：京东。6.声明式导航-两个链接。6.声明式导航-跳转传参。

IT研究室的博客

09-07

989

本文介绍了基于Hadoop+Spark的贵州茅台股票数据分析系统，采用Python/Java语言开发，集成Django/Spring Boot后端与Vue前端，实现多维金融数据分析。系统核心功能包括价格趋势分析、成交量跟踪、波动性评估及技术指标验证，通过Spark SQL和Pandas处理海量交易数据，支持日均价格走势、价量相关性、MACD/RSI指标等深度挖掘。界面展示包含Echarts动态可视化图表，代码示例演示了Spark计算日均均价、20日均线及价格区间统计逻辑。

从Java全栈开发到微服务架构的实战经验分享

CatchLight的博客

09-09

755

应聘者：我认为最重要的是能够理解业务需求，并将其转化为技术方案。同时，持续学习新技术，保持对行业趋势的关注也很关键。毕竟，技术更新很快，只有不断学习才能跟上节奏。通过这次面试，我们可以看到一位资深Java全栈开发者的专业能力和实践经验。他不仅掌握了多种技术栈，还能在实际业务场景中灵活运用，解决实际问题。同时，他也展现了良好的沟通能力和学习能力，这些都是成为一名优秀工程师的关键素质。

从Java全栈到前端框架的实战之路

CatchLight的博客

09-10

764

面试官我们会在几天内通知你面试结果。应聘者面试官：加油！期待你加入我们团队。Java版本：Java 11和Java 17，注重性能优化和新特性支持。JVM内存模型：理解堆、栈、方法区等组成部分。前端技术栈：Vue3和TypeScript，使用Element Plus进行UI开发。微服务架构：使用Spring Cloud和OpenFeign进行服务治理。数据库与ORM：MyBatis和JPA，根据项目需求选择合适框架。测试与调试。

JavaScript的功能和作用

2402_83164836的博客

09-10

199

JavaScript（简称 JS）是一种，最初设计用于为网页添加动态交互功能。经过多年发展，其应用场景已远超浏览器，成为覆盖前端、后端、移动端、桌面端甚至物联网等领域的“全场景语言”。

Vite 中的 import.meta.env 与通用 process.env.NODE_ENV 的区别与最佳实践

最新发布

09-10

247

这篇文章对比了 process.env.NODE_ENV 和 Vite 的 import.meta.env。两者都用于区分开发和生产环境，并支持代码优化（Tree-Shaking）。核心区别在于：process.env.NODE_ENV 是源于 Node.js 的通用标准，是字符串，适用于需要兼容多种构建工具的库。而 import.meta.env 是 Vite 内置的现代对象，提供 DEV、PROD 等布尔值，语义更清晰，是 Vite 应用的首选。

web 网页数据传输处理过程

weixin_47106289的博客

09-08

757

web 网页数据传输处理过程

＜uniapp＞＜指针组件＞基于uniapp，编写一个自定义箭头指针组件

用沸腾的热血，支付我们的人生吧！

09-10

170

本文介绍了基于uniapp开发的自定义带箭头指针组件，通过SVG实现直线和箭头的组合效果。组件支持设置长度、颜色、角度等参数，并提供三种箭头规格(small/normal/big)可选。文章详细讲解了SVG结构的实现过程，包括计算终点坐标、响应式参数处理等核心功能，并展示了不同配置下的指针效果。该组件可用于时钟指针等场景，具有灵活性和复用性特点。

基于若依框架Vue+TS导出PDF文件的方法

m0_69564658的博客

09-08

430

本文介绍了在若依框架(Vue+TypeScript)中导出PDF的实现方法。主要使用html2canvas和jspdf库，通过将HTML内容转换为Canvas再生成PDF文件。文章详细说明了安装依赖、封装工具函数、组件调用步骤，并提供了代码示例。同时指出了跨域图片、样式控制等注意事项，并建议了pdfmake、vue-html2pdf等进阶方案。该方法适用于若依框架的PDF导出需求，可根据实际场景灵活调整。

从0到1学习Vue框架Day01

lishifu_的博客

09-07

345

本文介绍了Vue.js的基本使用方法和核心概念：1）通过new Vue()创建实例时需传入options配置对象；2）template配置项定义模板语句，必须包含单个根节点，支持插值语法{{}}调用data数据；3）Vue实例通过$mount()或el选项与DOM容器绑定，遵循"一夫一妻制"原则，即一个实例只能绑定一个容器，反之亦然；4）data选项为模板提供数据支持，支持对象和嵌套数据结构。这些内容涵盖了Vue实例创建、模板语法、数据绑定等基础知识点。

Vue 3项目中引用ECharts并设计多种图表组件的实现方案

m0_69564658的博客

09-06

297

本文介绍了在Vue3项目中集成ECharts图表库的完整方案。首先通过安装echarts和vue-echarts依赖，创建基础封装组件ECharts.vue，实现图表初始化、响应式更新和窗口大小自适应功能。随后分别开发了柱状图、折线图和饼图三种具体图表组件，展示了如何使用基础封装组件快速构建不同类型的可视化图表。文章还提供了高级功能扩展建议，如主题切换和加载状态处理，并给出了使用示例和注意事项，包括响应式容器要求、大数据量优化等。该方案为Vue3项目提供了一套完整的ECharts集成路径，可满足常见的数据可

使用Mootools 1.2实现选项卡效果(Tabs)教程

"Mootools 1.2教程 选项卡效果（Tabs）" Mootools 是一个轻量级但功能强大的JavaScript库，它提供了一系列工具和方法来简化Web开发中的DOM操作、动画效果和事件处理。在这个教程中，我们将探讨如何使用Mootools 1.2...