设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › 如何方便快捷的创建n层嵌套tab？及嵌套tab的bug ...
返回列表 发新帖
查看: 4191|回复: 8
打印 上一主题 下一主题

如何方便快捷的创建n层嵌套tab？及嵌套tab的bug [复制链接]

x-strong

Rank: 4
跳转到指定楼层
楼主
发表于 2013-5-20 15:59:17 |只看该作者 |倒序浏览
本帖最后由 x-strong 于 2013-5-20 16:46 编辑

版主你好，请问有没有什么办法可以快速方便的创建n层嵌套tab？比如提供如下格式的json，如何mini.loadTabJson(tabJson);就可以创建tab了（很像tree的json和解析方式，方便快速）？
  1. [
  2.   {
  3.     "tabHolderId": "topTab",
  4.     "tabs": [
  5.       {
  6.         "id": "tab1-1",
  7.         "title": "缺陷树",
  8.         "refreshOnClick": false,
  9.         "showCloseButton": false,
  10.         "name": "defectTreeTab",
  11.         "code": "defectTreeTab",
  12.         "hasLoaded": false
  13.       }
  14.     ]
  15.   },
  16.   {
  17.     "tabHolderId": "subTabs1",
  18.     "parentTabId": "tab1-1",
  19.     "tabs": [
  20.       {
  21.         "id": "tab2-1",
  22.         "title": "钢化存储",
  23.         "refreshOnClick": false,
  24.         "showCloseButton": false,
  25.         "name": "ttstoreTab",
  26.         "code": "ttstoreTab",
  27.         "hasLoaded": false
  28.       },
  29.       {
  30.         "id": "tab2-1",
  31.         "title": "高压",
  32.         "refreshOnClick": false,
  33.         "showCloseButton": false,
  34.         "name": "pressureTab",
  35.         "code": "pressureTab",
  36.         "hasLoaded": false
  37.       }
  38.     ]
  39.   },
  40.   {
  41.     "tabHolderId": "subTabs2",
  42.     "parentTabId": "tab2-1",
  43.     "tabs": [
  44.       {
  45.         "id": "tab3-1",
  46.         "title": "DGX-A0系列",
  47.         "refreshOnClick": false,
  48.         "showCloseButton": false,
  49.         "name": "DGX-A0Tab",
  50.         "code": "DGX-A0Tab",
  51.         "hasLoaded": false
  52.       },
  53.       {
  54.         "id": "tab3-2",
  55.         "title": "DGX-A1系列",
  56.         "refreshOnClick": false,
  57.         "showCloseButton": false,
  58.         "name": "DGX-A1Tab",
  59.         "code": "DGX-A1Tab",
  60.         "hasLoaded": false
  61.       }
  62.     ]
  63.   }
  64. ]
复制代码




2013-05-20 16:38弄出了3层Tab，但是tab的布局有bug——tabPosition="left"的时候，内部嵌套的tab选项卡页按钮样式出现bug，如下图对比：








附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

factory

Rank: 8Rank: 8
沙发
发表于 2013-5-20 16:54:50 |只看该作者
暂时只能页面上加tab，然后另一个页面的tab去加载这个页面，这样去做

或者同一个页面，tabs一层一层写下去

举报

x-strong

Rank: 4
板凳
发表于 2013-5-20 20:12:23 |只看该作者
factory 发表于 2013-5-20 16:54
暂时只能页面上加tab，然后另一个页面的tab去加载这个页面，这样去做

或者同一个页面，tabs一层一层写下去 ...

好吧，这个我自己封装也可以。但是那个嵌套tab的bug呢（请看后面补充的截图）？我认为是bug，请确认一下。

举报

factory

Rank: 8Rank: 8
地板
发表于 2013-5-21 09:31:57 |只看该作者
x-strong 发表于 2013-5-20 20:12
好吧，这个我自己封装也可以。但是那个嵌套tab的bug呢（请看后面补充的截图）？我认为是bug，请确认一下 ...

你不要这样做，左侧的直接用tree，或者outlookmenu做。不建议你嵌套那么多还用左侧的tabs
http://www.miniui.com/demo/outlookmenu/outlookmenu.html

http://www.miniui.com/demo/tree/navtree.html

举报

x-strong

Rank: 4
5#
发表于 2013-5-21 10:14:15 |只看该作者
factory 发表于 2013-5-21 09:31
你不要这样做，左侧的直接用tree，或者outlookmenu做。不建议你嵌套那么多还用左侧的tabs
http://www.min ...

可是实际业务需求需要这样做~~谁想折腾啊 :<。

举报

factory

Rank: 8Rank: 8
6#
发表于 2013-5-21 10:35:42 |只看该作者
x-strong 发表于 2013-5-21 10:14
可是实际业务需求需要这样做~~谁想折腾啊 :

你能否做个简单的能重现问题的demo？上传，然后我们定位看下是什么原因导致的

举报

x-strong

Rank: 4
7#
发表于 2013-5-21 11:40:08 |只看该作者
factory 发表于 2013-5-21 10:35
你能否做个简单的能重现问题的demo？上传，然后我们定位看下是什么原因导致的 ...

在线demo连接地址：http://sandbox.runjs.cn/show/ldrexp02
代码：
  1. <!DOCTYPE html>
  2. <html>
  3.    
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <title>jQuery Mini UI Demo——嵌套Tab</title>
  7.         <link type="text/css" rel="stylesheet" href="http://www.miniui.com/demo/demo.css" />
  8.         <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/169/rvy7e5su/miniui.js"></script>
  9.         <script type="text/javascript" src="http://www.miniui.com/scripts/boot.js"></script>
  10.         <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/169/rvy7e5su/zh_CN.js"></script>
  11.     </head>
  12.    
  13.     <body>
  14.          <h1>Mini UI Demo——嵌套Tab</h1>
  15.         <p>tab选项卡先左后上</p>
  16.         <div id="tabs1" class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:300px;">
  17.             <div name="first" title="Tab1">
  18.                 <div class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:100%;" tabPosition="left">
  19.                     <div title="tab1-1">
  20.                         <div class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:100%;">
  21.                             <div title="tab1-1-1"></div>
  22.                             <div title="tab1-1-2"></div>
  23.                         </div>
  24.                     </div>
  25.                     <div title="tab1-2"></div>
  26.                     <div title="tab1-3"></div>
  27.                 </div>
  28.             </div>
  29.             <div title="Tab2">2</div>
  30.             <div title="Tab3">3</div>
  31.             <div title="Tab4">4</div>
  32.             <div title="Tab5">5</div>
  33.         </div>
  34.                         
  35.         <p>tab选项卡先上后左</p>
  36.         <div id="tabs2" class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:300px;">
  37.             <div name="first" title="Tab1">
  38.                 <div class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:100%;">
  39.                     <div title="tab1-1">
  40.                         <div class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:100%;" tabPosition="left">
  41.                             <div title="tab1-1-1"></div>
  42.                             <div title="tab1-1-2"></div>
  43.                         </div>
  44.                     </div>
  45.                     <div title="tab1-2"></div>
  46.                     <div title="tab1-3"></div>
  47.                 </div>
  48.             </div>
  49.             <div title="Tab2">2</div>
  50.             <div title="Tab3">3</div>
  51.             <div title="Tab4">4</div>
  52.             <div title="Tab5">5</div>
  53.         </div>
  54.     </body>

  56. </html>
复制代码




附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

factory

Rank: 8Rank: 8
8#
发表于 2013-5-21 14:02:41 |只看该作者
x-strong 发表于 2013-5-21 11:40
在线demo连接地址：http://sandbox.runjs.cn/show/ldrexp02
代码：
  1. <div id="tabs1" class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:300px;">
  2.             <div name="first" title="Tab1">
  3.                 <div class="mini-tabs mini-fit" activeIndex="0" style="width:100%;height:100%;" tabPosition="left">
  4.                     <div title="tab1-1" url="../tabs/pages/page4.html">
  5.                         
  6.                     </div>
  7.                     <div title="tab1-2"></div>
  8.                     <div title="tab1-3"></div>
  9.                 </div>
  10.             </div>
  11.             <div title="Tab2">2</div>
  12.             <div title="Tab3">3</div>
  13.             <div title="Tab4">4</div>
  14.             <div title="Tab5">5</div>
  15.         </div>
复制代码
你先这样做吧，凡是涉及到先左后上的，上边的就用url的去加载，这样就可以了

举报

x-strong

Rank: 4
9#
发表于 2013-5-21 15:22:59 |只看该作者
factory 发表于 2013-5-21 14:02
你先这样做吧，凡是涉及到先左后上的，上边的就用url的去加载，这样就可以了 ...

好吧，我先这样试试。

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-11-28 13:31 , Processed in 1.050044 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部