jQuery MiniUI

标题: 如何方便快捷的创建n层嵌套tab？及嵌套tab的bug [打印本页]
作者: x-strong    时间: 2013-5-20 15:59:17     标题: 如何方便快捷的创建n层嵌套tab？及嵌套tab的bug

本帖最后由 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. ]
复制代码

[attach]1933[/attach]



[attach]1934[/attach]


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



[attach]1939[/attach][attach]1939[/attach]



[attach]1938[/attach]



[attach]1936[/attach]


作者: factory    时间: 2013-5-20 16:54:50

暂时只能页面上加tab，然后另一个页面的tab去加载这个页面，这样去做

或者同一个页面，tabs一层一层写下去
作者: x-strong    时间: 2013-5-20 20:12:23

factory 发表于 2013-5-20 16:54
暂时只能页面上加tab，然后另一个页面的tab去加载这个页面，这样去做

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

好吧，这个我自己封装也可以。但是那个嵌套tab的bug呢（请看后面补充的截图）？我认为是bug，请确认一下。
作者: factory    时间: 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    时间: 2013-5-21 10:14:15

factory 发表于 2013-5-21 09:31
你不要这样做，左侧的直接用tree，或者outlookmenu做。不建议你嵌套那么多还用左侧的tabs
http://www.min ...

可是实际业务需求需要这样做~~谁想折腾啊 :<。
作者: factory    时间: 2013-5-21 10:35:42

x-strong 发表于 2013-5-21 10:14
可是实际业务需求需要这样做~~谁想折腾啊 :

你能否做个简单的能重现问题的demo？上传，然后我们定位看下是什么原因导致的
作者: x-strong    时间: 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>
复制代码

[attach]1952[/attach]




作者: factory    时间: 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    时间: 2013-5-21 15:22:59

factory 发表于 2013-5-21 14:02
你先这样做吧，凡是涉及到先左后上的，上边的就用url的去加载，这样就可以了 ...

好吧，我先这样试试。



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2