自定义tabs

qldsrx

晕死，在system/components/bootstrap/tabs/demo/simple.w里面就有动态创建tabs的例子，用的也是bootstrap的tab，只是做了下改动，使用tab的content属性来查找content的xid来选择显示哪个content。
注意，由于写例子的人不负责，该例子无法正常执行，但是js代码里有个函数叫“createTabs”，参考它就可以了。

reoyha

qldsrx 发表于 2016-11-25 14:29
晕死，在system/components/bootstrap/tabs/demo/simple.w里面就有动态创建tabs的例子，用的也是bootstrap ...

那个我试过了，jishuang也在11层回复，那个例子不能用。

reoyha

qldsrx 发表于 2016-11-25 14:16
想要自定义tabs，建议用bootstrap的或其它第三方的，我花了点时间给你写了一个利用bootstrap的动态扩展函数 ...

可以用，做了一些修改，不知道对不对。

1. Model.prototype.insertTab = function(parentDOM, titleHtml, contentHtml, index) {
   
2.                 if (!parentDOM)
   
3.                         return null;
   
4.                 var $tablist = $('ul[role=tablist]', parentDOM);
   
5.                 var $tabcontent = $('div.tab-content', parentDOM);
   
6.                 var num = $tablist.children().length;
   
7.                 if (num && index && index > -1 && index < num) {
   
8.                         $('<li role="presentation"><a href="#tab' + num + ' content="tabContent' + num + '" role="tab" data-toggle="tab">' + titleHtml + '</a></li>').insertBefore($tablist.children()[index]);
   
9.                         $('<div role="tabpanel" class="tab-pane" id="tab' + num + '" xid="tabContent' + num + '">' + contentHtml + '</div>').insertBefore($tablist.children()[index]);
   
10.                 } else {
    
11.                         $('<li role="presentation"><a href="#tab' + num + '" role="tab" data-toggle="tab" content="tabContent' + num + '">' + titleHtml + '</a></li>').appendTo($tablist);
    
12.                         $('<div role="tabpanel" class="tab-pane" id="tab' + num + '" xid="tabContent' + num + '">' + contentHtml + '</div>').appendTo($tabcontent);
    
13.                 }
    
14.                 if (!num) {
    
15.                         $tablist.find('a[role=tab]').tab('show');
    
16.                 }
    
17.         }

复制代码

感觉平台是通过<a>标签的content属性，去查找对应xid的界面展示？那么原生的href属性的锚点，好像并不是特别好用，在平台内部。

jishuang

平台是通过content关联去确定显示那个content的

reoyha

感谢大家的帮助，动态生成页签已经没问题了，但是考虑后边还要加windowContainer组件，所以采用了预置足够多的分类的方式。
初学jquery所以有些事件的写法并不熟悉。
还有当页签太多时会换行，有个插件支持bootstrap的原生tabs，但是不支持平台的改变。希望能作为可选插件进行补充发布。
插件见附件：

tabdrop.zip (2.61 KB, 下载次数: 138)

2016-11-25 15:40 上传

点击文件名下载附件

reoyha

jishuang 发表于 2016-11-25 15:29
平台是通过content关联去确定显示那个content的

还是有问题，如果使用$UI/system/components/bootstrap/tabs/tabs，下边windowContainer加载wing布局界面就全部覆盖了。
如果使用$UI/system/components/justep/tabs/tabs，下边windowContainer加载wing布局没有问题，但是初始载入，因为太长换行的tab无法点击。

两个组件都不完善啊