zoukankan      html  css  js  c++  java
  • 七、敏捷开发框架 Tab组件的应用 Tab页面开发(两种使用方式)

    很多情况下,我们需要用到Tab 选项卡的情况

    例如下面

    注册审批页面

    image.png

    这个场景是,注册审批,包含两部分,一个是对注册组织机构的审批,一个是注册用户的审批
    那么这个需要用个Tab选项卡来实现比较合适,而不是弄两个功能菜单

    那这个页面怎么实现呢。

    关于Tab的使用,我们有两种模式。

    第一种模式:Tab只是一个管理容器,管理很多Tab选项卡,每个选项卡都是一个独立的页面。

    第二种模式:Tab页面是一个整体,里面的Tab是这个页面的不同部分

     

    先来介绍第一种:

    就看上面截图的这个 注册审批功能

     

    image.png

    代码就如上,敏捷开发框架 设计了 EciTab组件

     

    变化的需求来了,如果希望第二个Tab默认选中怎么办

     image.png

     

    image.png

     

    注意,除了显示的页面使用url 其它的页面建议都用 lazyUrl来实现

    这样可以实现不不要的加载不加载

     

    url  lazyUrl的设置 可以设计时在 DOM中维护

    也可以通过 编程方式设置

     

    tab.loadUrl(id,url)

    tab.lazyUrl(id,url)

     

    具体到子页面里的功能就不介绍了,都之前介绍的简单查询页面模型的开发

     

    第二种模式:Tab页面是一个整体,里面的Tab是这个页面的不同部分

     

    image.png

     

    image.png

     

    两种模式怎么选择。

    例如上例

    基本属性、扩展属性,通过不同的分类,将页面的字段项进行归类整理

    但是保存是要一起保存的,这个时候,如果每个Tab做成不同的页面,功能就无法实现了。

     

    通过这个实际场景的例子,大家应该大体知道什么情况下用什么样的模式了。

     

  • 相关阅读:
    error: declaration of 'cv::Mat R ' shadows a parameter
    Java网络编程(二)
    排序算法(二)
    Java网络编程(一)
    排序算法(一)
    Python文件访问模式
    Python文件与异常
    递归
    SQL命令的六个主要类别
    iOS-生成Bundle包-引入bundle-使用bundle
  • 原文地址:https://www.cnblogs.com/godmodel/p/13029093.html
Copyright © 2011-2022 走看看