自定义tabs

jishuang

看了一下组件的js文件，应该不能动态创建，那就把需要的都先加上通过bind-visible控制是否显示

reoyha

jishuang 发表于 2016-11-23 15:56
看了一下组件的js文件，应该不能动态创建，那就把需要的都先加上通过bind-visible控制是否显示 ...

好像只能这么搞了

reoyha

jishuang 发表于 2016-11-23 15:56
看了一下组件的js文件，应该不能动态创建，那就把需要的都先加上通过bind-visible控制是否显示 ...

现在效果出来了，但是如果页签太多在低分辨率电脑上会换行，影响展示。
有没有左右滚动的按钮，或者滚动条？

jishuang

可以自己放一个div里面放按钮控制左右滑动，或者参考/UI2/demo/netease/index_main.w中的

reoyha

jishuang 发表于 2016-11-25 09:15
可以自己放一个div里面放按钮控制左右滑动，或者参考/UI2/demo/netease/index_main.w中的 ...

tabs左右滑动应该调用哪个方法或css？netease那个好像不符合客户要求

reoyha

jishuang 发表于 2016-11-25 09:15
可以自己放一个div里面放按钮控制左右滑动，或者参考/UI2/demo/netease/index_main.w中的 ...

标签太多的话，初始化时第二行无法点击，改变页面大小才可以点击

zhb2034

1. define(function(require) {
   
2.         var $ = require("jquery");
   
3.         var WindowDialog = require("$UI/system/components/justep/windowDialog/windowDialog");
   
4.         var justep = require("$UI/system/lib/justep");
   
5.         var common = require("$UI/PI_NEW/common/js/common");
   
6.         require("css!$UI/PI_NEW/common/css/PI_NEW").load();
   
7.        
   
8.         var showAlert=true;
   
9.         //var FProjectID="";
   
10.         //var FProjectName="";
    
11.         //var sBusinessCode="";
    
12.        
    
13.         var Model = function() {
    
14.                 this.callParent();
    
15.                 this.FProjectID="";
    
16.                 this.FProjectName="";
    
17.                 this.sProcess="/PI_NEW/change/process/changeFoundApply/changeFoundApplyProcess";
    
18.                 this.fileType="变更立项";
    
19.                 this.sAct=this.getContext().getActivity();
    
20.                 this.pagePattern = this.getContext().getRequestParameter("_pagePattern");
    
21.                 this.sParmID = this.getContext().getRequestParameter("sRowID");
    
22.                 this.sID = this.getContext().getRequestParameter("sID");       
    
23.                 this.checkAlert="";
    
24.                 this.selectType="";
    
25.         };
    
26. 
    
27. Model.prototype.navs1Click = function(event){
    
28.                 this.comp("contents").to(event.index);
    
29.                 var win=null;
    
30.                 var url="";
    
31.                 var params=null;
    
32.                 var id=this.comp("mainData").getCurrentRowID();
    
33.                 var sBizState=this.comp("mainData").getValue("fBizState");
    
34.                 var winNum=0;
    
35.                 if ((' editActivity queryActivity addActivity'.indexOf(this.sAct)>0) && (this.sID == "") && (this.sParmID == "")){
    
36.                         winNum=event.index;
    
37.                 }else{
    
38.                         winNum=event.index + 1;
    
39.                 }               
    
40.                 if (winNum==2){
    
41.                         win=this.comp("windowContainer2");
    
42.                         if ((this.sAct=="queryActivity") || (this.pagePattern=="readonly") || (this.sParmID)){
    
43.                                 url="$UI/PI_NEW/common/process/Execute/queryActivity.w";
    
44.                         }else{
    
45.                                 url="$UI/PI_NEW/common/process/Execute/editActivity.w";
    
46.                                 if ((' editActivity addActivity'.indexOf(this.sAct)>0) && (sBizState!='bsEditing')){
    
47.                                         url="$UI/PI_NEW/common/process/Execute/queryActivity.w";
    
48.                                 }
    
49.                         }
    
50.                         params={id:id,fileType:this.fileType};
    
51.                         win.load(url, params);
    
52.                 }
    
53. //                if (winNum==3){
    
54. //                        win=this.comp("windowContainer3");
    
55. //                        url="$UI/PI_NEW/report/process/changeRtp/CHCBRFoundRpt.w";
    
56. //                        params={id:id,fileType:this.fileType,table:this.comp("mainData").idColumn};
    
57. //                        win.load(url, params);
    
58. //                }
    
59.                 if (winNum==3){
    
60.                         win=this.comp("windowContainer4");
    
61.                         url="$UI/PI_NEW/report/process/changeRtp/CHFoundActivity.w";
    
62.                         var sOgnID=this.comp("mainData").getValue("fCreateOgnID");
    
63. //                        url="$UI/PI_NEW/report/process/changeRtp/CHZDFoundRpt.w";
    
64. //                        var sChangeType=this.comp("mainData").getValue('fChangeType');
    
65. //                        if (sChangeType>'01'){
    
66. //                                url="$UI/PI_NEW/report/process/changeRtp/CHJDFoundRpt.w";
    
67. //                        }
    
68.                         params={id:id,fileType:this.fileType,table:this.comp("mainData").idColumn,sOgnID:sOgnID};
    
69.                         win.load(url, params);
    
70.                 }
    
71.                 if (winNum==4){
    
72.                         win=this.comp("windowContainer5");
    
73.                         url="$UI/PI_NEW/common/process/Execute/ChartActivity.w";
    
74.                         params={id:id,process:this.sProcess};
    
75.                         win.load(url, params);
    
76.                 }
    
77.                 if (winNum==5){
    
78.                         win=this.comp("windowContainer1");
    
79.                         if ((this.sAct=="queryActivity") || (this.pagePattern=="readonly") || (this.sParmID)){
    
80.                                 url="$UI/PI_NEW/common/process/docCenter/queryActivity.w";
    
81.                         }else{
    
82.                                 url="$UI/PI_NEW/common/process/docCenter/editActivity.w";
    
83.                                 if (sBizState!='bsEditing'){
    
84.                                         url="$UI/PI_NEW/common/process/docCenter/queryActivity.w";
    
85.                                 }
    
86.                         }                       
    
87.                         params={id:id,fileType:this.fileType};
    
88.                         win.load(url, params);
    
89.                 }
    
90.         };

复制代码

我是新人 这是前辈写的 研究下应该会对你有帮助

reoyha

zhb2034 发表于 2016-11-25 11:41
我是新人 这是前辈写的 研究下应该会对你有帮助

十分感谢，我看看

qldsrx

想要自定义tabs，建议用bootstrap的或其它第三方的，我花了点时间给你写了一个利用bootstrap的动态扩展函数封装，你可以自己试试效果。
第一步，添加js、css资源，例如：

1.     <script type="text/javascript" charset="utf8" src="jquery-3.1.1.min.js"></script>
   
2.     <link rel="stylesheet" href="bootstrap-3.3.0/css/bootstrap.min.css">
   
3.     <script src="bootstrap-3.3.0/js/bootstrap.min.js"></script>

复制代码

x5默认会引用前面2个资源，第三个bootstrap.min.js估计不会有，你需要自行添加扩展它。

第二步，页面中某个需要动态添加tab的地方，添加如下html，id可以自行修改，建议改为xid和官方统一下，避免一些组件使用异常：

1.     <div id="myTab">
   
2.         <ul class="nav nav-tabs" role="tablist"></ul>
   
3.         <div class="tab-content"></div>
   
4.     </div>

复制代码

第三步，添加如下javascript代码，可以按需微调，目前已经支持添加动态html标签了：

1.     <script>
   
2.         //添加自定义标签页，支持html内容，index从0开始，不给则添加到最后
   
3.         function insertTab(parentDOM, titleHtml, contentHtml, index) {
   
4.             if (!parentDOM) return null;
   
5.             var $tablist = $('ul[role=tablist]', parentDOM);
   
6.             var $tabcontent = $('div.tab-content', parentDOM);
   
7.             var num = $tablist.children().length;
   
8.             if (num && index && index > -1 && index < num) {
   
9.                 $('<li role="presentation"><a href="#tab'+num+'" role="tab" data-toggle="tab">' + titleHtml + '</a></li>').insertBefore($tablist.children()[index]);
   
10.                 $('<div role="tabpanel" class="tab-pane" id="tab'+num+'">' + contentHtml + '</div>').insertBefore($tablist.children()[index]);
    
11.             } else {
    
12.                 $('<li role="presentation"><a href="#tab' + num + '" role="tab" data-toggle="tab">' + titleHtml + '</a></li>').appendTo($tablist);
    
13.                 $('<div role="tabpanel" class="tab-pane" id="tab' + num + '">' + contentHtml + '</div>').appendTo($tabcontent);
    
14.             }
    
15.             if (!num) {
    
16.                 $tablist.find('a[role=tab]').tab('show');
    
17.             }
    
18.         }
    
19.     </script>

复制代码

第四步，测试。浏览器F12控制台下面，输入以下js代码，可以看到动态添加的tab效果：

1. p=document.getElementById('myTab')
   
2. insertTab(p,'t1','内容1')
   
3. insertTab(p,'t2','内容2')
   
4. insertTab(p,'t3','<iframe src="http://www.baidu.com" style="width:100%;height:100%"></iframe')

复制代码

由于iframe部分出现了跨域访问，因此控制台有个错误提示，但不影响页面内容的加载。

到此为止，所有动态添加tab的过程已经完成，至于动态添加的tab内容部分，如果需要再动态产生X5的组件，则需要看相关组件的动态创建方法（部分组件的动态创建有BUG）

reoyha

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

十分感谢，我试试，