码迷，mamicode.com
首页 > Web开发 > 详细

jQuery 选项卡 CleverTabs

时间：2017-01-20 09:05:04      阅读：453      评论：0      收藏：0      [点我收藏+]

标签：menu   kill   外包   on()   版本   皮肤   url   bind   lin   

CleverTabs是一款jQuery插件，所需jQuery版本:1.6.1，jQuery UI样式版本:1.8.13；其功能为创建jQuery UI风格的Tab用于显示iframe。

本示例中符加了jQuery.contextMenu插件，我修改了其样式，使用了jQuery UI的皮肤

运行一下

效果如下图:

技术分享

初级应用示例：

HTML代码:

  1. <div id="tabs"><ul></ul></div>
复制

Javascript代码:

  1. <script type="text/javascript">
  2. $(function(){
  3. tabs = $(‘#tabs‘).cleverTabs();
  4. tabs.add({
  5. url:‘http://think8848.cnblogs.com‘,
  6. label:‘think8848‘
  7. });
  8. });
  9. </script>
复制

CleverTabs详细说明:

CleverTabs为所有Tab的容器            

  1. var tabs;
  2. <script type="text/javascript">
  3. $(function(){
  4. tabs = $(‘#tabs‘).cleverTabs({
  5. //是否安装右键菜单(默认: true)
  6. setupContextMenu:true,
  7. //右键菜单定义, 右键菜单功能由jquery.contextMenu插件提供
  8. //详见: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
  9. //本插件中对原contextMenu插件中的样式做了修改，使用了jQuery UI皮肤
  10. contextMenu:{
  11. element: $(‘#contextMenuElementId‘),
  12. handler:function(action, el, pos){/*do something...*/}
  13. },
  14. //开启Tab后是否锁定(不允许关闭，默认: false)
  15. lock:false,
  16. //开启Tab后是否禁用(不允许激活和操作iframe内容，默认: false)
  17. disable:false,
  18. //当tabs中只有一个Tab时，是否锁定该Tab(默认: true)
  19. lockOnlyOne:true,
  20. //显示iframe的容器(默认创建在tabs元素中)
  21. panelContainer: $(‘#panelContainerElementId‘)/*,
  22. 其中
  23. tabHeaderTemplate: ‘‘, //(Tab用于控制的头模板)
  24. tabPanelTemplate: ‘‘, //(Tab用于显示的Panel模板)
  25. uidGenerator: function() {} //(Tab唯一id生成器)
  26. 功能现在不启用，等有时间完善后再启用*/
  27. });
  28. tabs.add({
  29. url:‘http://think8848.cnblogs.com‘,
  30. label:‘think8848‘
  31. });
  32. });
  33. </script>
复制

CleverTabs.add方法

添加一个新的Tab并使之成为激活状态，如果将要添加的url已经存在，则会激活该Tab           

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. tabs.add({
  4. //必须是在tabs内唯一的id
  5. id:‘uniqueId‘,
  6. //将要在iframe的src属性设置的值
  7. url:‘iframe.src‘,
  8. //显示在Tab头上的文字
  9. label:‘tab header‘,
  10. //关闭本Tab时需要刷新的Tab的url(默认: null)
  11. closeREfresh:‘tab url‘,
  12. //关闭本Tab时需要激活的Tab的url(默认: null)
  13. closeActivate:‘tab url‘,
  14. //关闭本Tab时需要执行的回调函数
  15. callback:function(){/*do something*/}
  16. });
  17. </script>
复制

CleverTabs.getCurrentTab方法

获取当前处于激活状态的Tab            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getCurrentTab();
  4. </script>
复制

CleverTabs.getTabByUrl方法

获取指定url的Tab实例 

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. </script>
复制

CleverTabs.clear方法

关闭tabs内所有未锁定的Tab            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.clear();
  4. </script>
复制

CleverTab.deactivate方法

使Tab页面处于未激活状态，但不建议在代码中使用 
CleverTab.prevTab方法: 
获取该Tab之前的Tab            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. var prevTab = tab.prevTab();
  5. </script>
复制

CleverTab.nextTab方法

获取该Tab之后的Tab

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. var prevTab = tab.nextTab();
  5. </script>
复制

CleverTab.kill方法

从tabs中移移该Tab            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. tab.kill();
  5. </script>
复制

CleverTab.refresh方法

刷新该Tab的iframe中的内容            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. tab.refresh();
  5. </script>
复制

CleverTab.setDisable方法

设置该Tab的disabled属性，设置disabled为true后，自动设置该Tab的locked属性为true            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. //参数true为禁用，false或不提供值为启用
  5. tab.setDisable(true);
  6. </script>
复制

CleverTab.setLock方法

设置该Tab的locked属性，设置locked为true后，该Tab的不允许关闭            

  1. <script type="text/javascript">
  2. var tabs =(‘#tabs‘).cleverTabs();
  3. var tab = tabs.getTabByUrl(‘http://think8848.cnblogs.com‘);
  4. //参数true为锁定，false或不提供值为解锁
  5. tab.setLock(true);
  6. </script>
复制

"改变不了别人，就改变自已吧"

在现在的页面中，多数情况下都可能由几部分组成，比如:Banner,Navigator,Content等，而为了工作区域变的更大，很多时候诸如Banner,Navigator或者其他的Panel都会收起来(Collapse)，这个时候问题来了，当初我给tabs定义了width: 80%; height: 90%; 现在tabs的width和height发生了变化，可是内部的Tab页面还没有收到这个变化，它还是按照之前的size显示呢，更要命的是resize事件居然只有window和body才有，div居然不支持此事件!真不知道他们是怎么想的...在之前的cleverTabs中，我绑定了window.resize事件，但是问题在于我上面举的例子中，window的size实际上没有发生变化，甚至body也没有，但是tabs的大小发生变化了，在这种情况下，如果您使用了默认的tabPenelContainer，那一定得处理tabs的resize事件，可是tabs就是一个div嘛，哪来的resize？昨晚在睡前突然想到个办法，既然能"改变不了别人，就改变自已"，那么就能"自已处理不了的事，就交给别人去处理吧"。把resize“外包”出去算了。于是对原来的代码做了修改，在CleverTabs构造函数中，为CleverTabs的prototype添加了resizePanelContainer函数，tabs自已不知道发生了resize事件，但总归有人知道发生了，谁知道谁调用，所谓的能者多劳?

CleverTabs.resizePanelContainer方法:

当使用CleverTabs默认的PanelContainer时，重新设置PanelContainer的size。

 

  1. <script type="text/javascript">
  2. var tabs;
  3. $(function(){
  4. tabs = $(‘#tabs‘).cleverTabs();
  5. $(window).bind(‘resize‘,function(){
  6. //当发生window.resize事件时，重新默认的tabs的PanelContainer的大小
  7. tabs.resizePanelContainer();
  8. });
  9. </script>
复制

 

 

下载

 

jQuery 选项卡 CleverTabs

标签：menu   kill   外包   on()   版本   皮肤   url   bind   lin   

原文地址：http://www.cnblogs.com/niuboren/p/6321802.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！