JQuery TabPanel 插件，有点类似Chrome 浏览器选择项卡

最新推荐文章于 2019-06-21 14:42:24 发布
最新推荐文章于 2019-06-21 14:42:24 发布
阅读量171 收藏
点赞数
文章标签： jQuery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javyuton/article/details/84342573
版权
花半天时间写了一个jquery tabpanel 插件,效果图如下<BR>
[img]http://dl.iteye.com/upload/attachment/0075/9063/e3868575-6d28-30b0-8c9c-c2ac83fdac1a.jpg[/img]
javyuton
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery进行tab切换(选项卡)，小白必看！！！
mzj119424的博客
12-18 148
选项卡 效果图如下： *{ margin: auto; padding: 0; list-style: none; } .active{ background:red; } #ul{ width: 800px; display: flex; border: solid gold 2px; justify-content: space-around; } #ul>li{ width: 100%; text-align: c
JQuery EasyUI TabPanel
weixin_34343689的博客
11-02 119
  1、属性 名称 类型 说明 默认值 width number Tabs 容器的宽度。 auto height number Tabs 容器的高度。 auto plain boolean True 就不用背景容器图...
基于jQuery打造TabPanel
weixin_34192993的博客
05-21 136
停了许久，终于有时间继续下一篇，这次我们要实现的控件时Tab控件，在实际的应用中也比较多，如大量信息查看，当网页多窗口框架等都会用到，现在网上基于jquery Tab控件，其实也蛮多了，我以前用过的idtabs，就比较简单实用，也是比较灵活，但是对于复杂情况就要编码多些，太简单了些。还有就是jquery UI的里面的tab控件（没用过，我对jquery ui不太感冒），另外就是近期有点小火的eas...
jQuery插件之Tabpanel
快乐就好
07-22 2517
jerichotab基于jQuery开发的一款Tabpanel插件，使用过Ext Tabpanel的人应该不会陌生，当初做这个的目的也是为了证明只要开发人员熟悉js和css，jQuery同样可以做出漂亮，有创意的UI插件，源代码大家可以到此下载：jquery.jerichotab.js 基本的效果图如下： (貌似cnblogs限制了上传图片的象素。。。) 由于代码和API都比较多，所
jquery的tabpanel
04-06
基于jquery的tabpanel，支持动态添加，支持滚动条，可内嵌iframe，支持关闭按钮，支持tab的背景图片配置， 这个是我在网上找到一个原始的版本，然后修改的，有详细注释，写了11个使用例子，基本涵盖了该组件的功能。...
用jQuery打造TabPanel效果代码
01-19
还有就是jquery UI的里面的tab控件（没用过，我对jquery ui不太感冒），另外就是近期有点小火的easyui 中的tab控件，最早在javaeye上面看到的，界面还算漂亮，因为之前没开源，所以一直没跟进（好像最近开源了，前几...
extjs tabpanel限制选项卡数量实现思路及代码
10-27
使用的是用变量存储 id 加载新的选卡时 交换 id ，从而限制了打开的选项卡数量，如果不是一定要这个效果，建议不要频繁的关闭和创建tabpanel，感兴趣的朋友可以参考下哈
基于jquery的tabpanel
12-15
基于jquery的tabpanel，支持动态添加，支持滚动条，可内嵌iframe，支持关闭按钮，支持tab的背景图片配置， 这个是我在网上找到一个原始的版本，然后修改的，有详细注释，写了11个使用例子，基本涵盖了该组件的功能。...
jQuery模仿ExtJS之TabPanel最新
02-25
1.帮助： TabPanel(选项卡组件) 参数说明 renderTo 渲染到某容器 将选项卡组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。 items 选项卡元素集合 选项卡组件渲染后就会显示的选项卡元素集合，具体参数请查看选项卡元素。 width 宽度 选项卡组件的总宽度，默认400px。 height 高度 选项卡组件中页面显示层的高度，默认300px。 border 是否显示边框 嵌套显示选项卡时，会出现重复边框的情况，影响美观，将border设置为”none”，则可以避免，默认显示边框，不接受除”none”之外的参数值。 active 渲染后默认激活哪个选项卡元素 下标以0为开始，默认为0。 maxLength 最多显示几个选项卡元素 -1为无限，默认为-1。 tabs 获得选项卡组件所有的选项卡元素 可根据需要获得选项卡组件的所有选项卡元素。 公共方法 addTab(object) 添加一个选项卡元素 动态向选项卡组件中添加一个选项卡元素。 flush(string | number) 刷新选项卡元素的内容 将选项卡元素的内容刷新，参数可以为选项卡元素的ID或下标。 show(string | number) 显示选项卡元素 显示制定选项卡元素，参数可以为选项卡元素的ID或下标。 Kill(string | number) 关闭选项卡元素 关闭选项卡元素，参数可以为选项卡元素的ID或下标。 getTabsCount() 获得选项卡元素数量 getTitle(string | number) 获得选项卡元素的标题 setTitle(string | number, string) 设置选项卡元素的标题 getContent(string | number) 获得选项卡元素的内容 setContent(string | number, string) 设置选项卡元素的内容 getDisable(string | number) 选项卡元素是否禁用 setDisable(string | number) 设置选项卡元素是否禁用 getCloseable(string | number) 选项卡元素是否可关闭 setCloseable(string | number, boolean) 设置选项卡元素是否可关闭 getActiveTab() 获得被激活的选项卡元素 使用方法 页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css new TabPanel({ renderTo:'tabs', width: '100%', height: '500px', active: 0, items: [{ title:'工作中心', html:'', closable: false }] }); TabPanel item(选项卡元素) 参数说明 id 元素ID 必须唯一，或者不设置该参数，否则将无法添加到选项卡组件中，默认自动生成。 title 元素标题 可以动态设置。 closeable 是否可关闭 true可关闭，false不可关闭，默认为true。
jQuery模仿ExtJS之TabPanel
08-05 910
升级说明代码   fix_0_1：修改了选项卡内容层的HTML没有设置body backgroundColor时，在FF中透明的BUG；  fix_0_2：添加了窗口resize，TabPanel也随之resize（注：resize触发条件是，TabPanel必须渲染到
整理一些网页常用的tab选项卡效果
leishiwo31的专栏
04-26 1162
1、横向（纵向）时间轴tab标签切换和水平（垂直） 下载地址：http://www.lanrenzhijia.com/tab/2362.html 2、tab标签样式焦点图切换代码 下载地址：http://www.lanrenzhijia.com/tab/2230.html 3、多种不同方向风格的tab标签切换效果 下载地址：http://www.lanrenzhijia.co
JQuery EasyUI Tabs
qq_42386143的博客
06-21 376
Tabs 选项卡显示一组面板。它一次只显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。 JQuery EasyUI需要引入的文件有如下4个： <!-- jquery核心库 --> <script type="text/javascript" src="easyui/jquery.min.js"></script>...
Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题
燃烧JAVA
12-05 2460
先贴上jsp里面调用的代码 var gh ="${teacher.GH }"; var grjlurl = _webRootPath + "content/search/teacher/teacher.grjl.jsp?gh="+gh; var jcTabs = [ '', '', '', '', '', '', '' ]; j$(document).
TabPanel的基本用法
he_chenjun的专栏
06-21 6721
TabPanel很常用，选项面板，代码如下： Ext.onReady(function(){ var tab = new Ext.TabPanel({ renderTo:Ext.getBody(), width:300, height:200 }); tab.add({ id:'tab1', title:'Tab1', html:'Tab1内容' }); tab
tabpanel选项卡的切换与隐藏
最新发布
05-27
tabpanel选项卡的切换与隐藏可以通过以下步骤实现： 1. 在HTML中，使用`<ul>`和`<li>`标签创建选项卡的导航栏，并使用`<div>`标签创建选项卡内容的容器。 2. 给每个选项卡内容的容器设置一个唯一的`id`属性，并将其与对应的选项卡导航链接的`href`属性相对应。 3. 使用CSS样式隐藏所有的选项卡内容容器，只显示默认选项卡的内容。 4. 使用JavaScript代码监听选项卡导航链接的点击事件，并在事件处理程序中切换选项卡内容的可见性。 以下是一个简单的示例代码： HTML代码： ``` <ul> <li><a href="#tab1">选项卡1</a></li> <li><a href="#tab2">选项卡2</a></li> <li><a href="#tab3">选项卡3</a></li> </ul> <div id="tab1">选项卡1的内容</div> <div id="tab2">选项卡2的内容</div> <div id="tab3">选项卡3的内容</div> ``` CSS代码： ``` div { display: none; } div:first-child { display: block; } ``` JavaScript代码： ``` var tabs = document.querySelectorAll('ul li a'); for (var i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', function(event) { event.preventDefault(); var target = event.target.getAttribute('href'); var tabContent = document.querySelector(target); var activeTab = document.querySelector('ul li a.active'); var activeContent = document.querySelector('div.active'); activeTab.classList.remove('active'); activeContent.classList.remove('active'); event.target.classList.add('active'); tabContent.classList.add('active'); }); } ``` 在上面的示例中，我们使用CSS样式将所有的选项卡内容容器隐藏起来，只显示第一个选项卡的内容。然后，使用JavaScript代码监听选项卡导航链接的点击事件，并在事件处理程序中切换选项卡内容的可见性。在切换选项卡时，我们先将当前活动的选项卡和对应的内容容器的`active`类移除，然后将新选中的选项卡和对应的内容容器添加`active`类，以显示它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值