最近项目中要用到 Tab,自然想到了 jQuery 相关的 Tab 插件。但是尝试后,发现都不适合,所以只好自己写一个了!
插件名 :jquery.easytabs
功能如下:1. Tab 的增加,删除。(暂不支持 Tab 名的修改)
2. 支持对 Tab 切换,增加,删除时的回调函数。
3. 支持动画切换及动画时长设置。
4. 支持设置初始显示的 Tab 序号。
5. 若 Tab 已经被访问过,那么当下次再次访问该 Tab 时,不再刷新其内容。
6. 允许鼠标悬停在 Tab 上时,自动切换 Tab。
说明 :对于以上大多数功能,都是可配置的。具体支持可配置的功能如下:
1. 可配置是否允许进行 Tab 的增加或删除功能。
2. 可配置是否允许进行动画切换。
3. 可配置是否允许重新刷新已经被访问过的 Tab 内容。
4. 可配置是否允许鼠标悬停在 Tab 上时,自动切换 Tab。
本插件支持各大主流浏览器。(已经在 IE8, Chrome 22, Firefox 16 中进行了测试)
Source 中还有可优化和修改的地方,不过最近有点儿忙,就没再过精的优化 Source。望大家理解啊!
最后预祝大家使用愉快!希望会为您帮上忙!
===============================================================
Release note:
2012-08-08
1. 添加可配置项:鼠标悬停在 Tab 上时,自动切换 Tab。
2012-08-03
1. 修正 Tab 显示优先度,优先显示 Tab 内容。
2. 添加新 Tab 时,自动切换到新的 Tab。
3. 修正切换 Tab 时可能出现的高度被意外扩大的 Bug。
2012-07-31
初版发布。
分享到:
相关推荐
$('#tabs-container').easytabs({ animationSpeed: 200, // 动画速度 tabs: 'ul.nav', // Tab导航的选择器 updateHash: false, // 是否更新URL哈希 defaultTab: 'tab2' // 默认选中的Tab }); ``` 4. **可选...
"jquery-plugin-boxy.zip"这个压缩包包含了一个jQuery插件,名为Boxy,它是专门用于实现弹框效果的。在网页设计中,弹框是一种常见的交互元素,用来展示警告信息、用户确认对话或提供额外的功能区域。 Boxy插件的...
在深入理解DIY jQuery插件中的Tabs标签切换功能实现之前,我们首先需要了解jQuery库的基本概念及其在Web开发中的应用。jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...
jQuery-HorizontalAccordion - **简介**:与上一种类似,但可能包含了更多的定制选项和更复杂的实现方式。 - **特点**: - 可以根据需求进行高度定制。 - 支持响应式布局,适应不同设备屏幕尺寸。 ##### 3. ...
Create an easy-to-config simple tab with smallest code base. http://geniuscarrier.com/simpletab-a-jquery-plugin/
tabs:修复tab组件面板对象的'onLoad'事件中传递了错误的'data'参数的问题。 Improvement(改进) draggable:添加'onEndDrag'事件; resizable:纠正不同边缘多余一个调整方向不正确的问题; datagrid:添加'...
**jQuery Tab插件详解** jQuery Tab是Web开发中常用的一种组件,它允许在单个页面上组织内容,通过切换不同的选项卡展示不同的信息区域。这种布局方式既节省空间,又能提高用户体验,使得用户可以轻松地浏览和切换...
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"> <script type="text/javascript" src="easyui/jquery.easyui.min.js"> ``` 这里包含了EasyUI的基本样式和核心JavaScript库。请注意,jQuery库...
wdScrollTab is a tab panel which has ability to scroll for tabs that do not fit on the page. It supports iframe, ajax call and dynamically loaded content.
这可能是一个外部JS文件,如`tabs-slider-plugin.js`,并且需要在jQuery库之后引入,确保jQuery已经加载。 3. **HTML结构**:在HTML中设置相应的结构以适应选项卡和幻灯片的需求。这通常包括一组标签(用于选项卡)...
1. **官方网站**:访问官方网站 [http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/](http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) 获取最新信息。 2. **版本要求**:当前...
一个jQuery插件,可以在您的用户在电子邮件地址字段中键入内容时建议并自动完成域。 它有什么作用? 当您的用户键入“ user @ gm”时,该插件将根据来自预定义电子邮件域列表的第一个结果建议“ ”。 按Tab键,或...
##### (2) jQuery-HorizontalAccordion **特点与应用:** - **界面风格:**具有XBOX 360 blade界面风格,给人一种科技感十足的感觉。 - **主要功能:**支持鼠标悬停自动展开菜单,增加用户交互体验。 - **应用场景...
4. **Tab选项卡**:`jQuery UI Tabs`和`TabContainer Theme`提供了丰富的选项卡功能,包括淡入淡出的切换效果,增强了页面导航体验。 5. **Slide Shows**:如`jQZoom`实现图片缩放,增强图片查看体验;`Image/Photo...
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
(从jQuery-1.11.1 +到最新的jQuery-3.5.0的支持) 安装 npm install jquery-smarttab yarn add jquery-smarttab composer require techlab/jquery-smarttab <!-- CSS --> < link href =" ...
### 30个jQuery导航菜单插件和教程 在网页设计中,导航菜单的重要性不言而喻。它不仅是用户访问网站时的第一印象,更是引导用户浏览网站内容的关键路径。一个好的导航菜单应该具备清晰的结构、良好的用户体验以及...
1. **Tab选项卡插件**:如jQuery UI的Tab组件,它提供了创建美观且易于使用的选项卡界面的能力。通过简单的API,开发者可以轻松实现切换不同内容的面板,提升用户交互体验。 2. **表单插件**:例如jQuery Form ...
- 首先确保你的HTML文件中引入了jQuery库,如`<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>`。 - 在JavaScript代码区域,输入`$(`,按`Tab`,Notepad++将插入`$(document).ready(function...