zoukankan      html  css  js  c++  java
  • ucml选项卡

      当业务视图组件VC并排摆放时就会形成选项卡,本章介绍选项卡有关的操作函数事件

      页面中有三个对象:TabStrip,Panel和Tab,TabStrip含Panel对象和Tab对象。业务单元BPO没有使用自定义业务模板时TabStrip对象ID命名规则为第一个:TabStrip_Level_1,第二个:TabStrip_Level_2以此类推,当使用自定义业务模板时TabStrip对象ID命名规则为:TabStrip_Level_ + 当前模板Panel中的第一个VC的VCName,例如:TabStrip_Level_VC_TSLXQuery

    image.png

    Panel对象:每个VC对应一个Panel对象,Panel对象包含Tab对象。

    image.png

     Tab对象:VC的头为一个Tab对象。

    image.png

    函数:

    用法:TabStrip_ID.函数名

    示例:

      在JSCRIPT业务初始化时写如下代码:

    //初始时选择索引为1的Tab,即第二个Tab页签
    TabStrip_Level_1.selectTab(1);
    函数名称 说明
    getPanel(index) 获取Panel对象,index为Panel索引
    closeTab(index) 关闭Tab页签,index为页签的索引
    getHeader(index) 获取选项卡的Tab页签对象,index为Tab索引。
    showTab(index) 显示Tab页签,index为页签索引。
    hidenTab(index) 隐藏Tab页签,index为页签索引,注意:隐藏页签后需要调用showTab函数来显示当前TabStrip对象中其它的页签。
    selectTab(index) 选择Tab页签,index为页签索引。
    exists(index) 存在返回Panel对象,不存在返回false,index为Panel索引。

    隐藏页签示例:

      如下图在页面显示时隐藏第一个TabStrip对象中的第二个Tab“图书类型2”

    image.png

     操作步骤:

       1、定义fn_Init()函数如下图:

     image.png

    function fn_Init(){  
        TabStrip_Level_1.hidenTab(1);  //隐藏VC标题为“图书类型2”的标签
        TabStrip_Level_1.showTab(0);  //显示VC标题为“图书类型1”的标签
    }

       2、在JSCRIPT业务初始化时调用fn_Init()方法:

    image.png

       3、生成编译,浏览BPO的页面效果如下:

    image.png 

     如果隐藏后不调用显示该TabStrip对象中其它页签的showTab方法,则页面效果如下图,并不是想要的页面效果:

    image.png

    事件:

    事件名称 说明
    tabSelect Tab页签选择事件,事件响应函数有两个参数:panel:panel对象,paenlIndex:指panel的索引

    用法:

      在JSCRPT初始化处绑定事件,语法:TabStrip_ID.on(“事件名”,函数)。

    示例:

    image.png

    image.png

    function fn_Init(){
     TabStrip_Level_1.on("tabSelect",function(panel,index){   
       alert("你选择的页签索引为:"+index);
     });
    }
  • 相关阅读:
    一周精彩内容分享(第 5 期):货拉拉悲剧的背后
    关于 HTTP 后端人员需要了解的 20+ 图片!
    百度地图午夜暗蓝风格
    百度地图开发自定义信息窗口openInfoWindow样式
    百度地图infowindow上添加自定义点击事件
    js显示当前日期时间和星期几
    iview 树形异步加载,首次加载子节点不能选择,点击父节点后才可以选择
    js 修改属性名和值。并只保留需要的属性
    css 条形百分比
    echarts 3d饼图
  • 原文地址:https://www.cnblogs.com/Jeely/p/10763355.html
Copyright © 2011-2022 走看看