七、敏捷开发框架 Tab组件的应用 Tab页面开发(两种使用方式)

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

例如下面

注册审批页面

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

那这个页面怎么实现呢。

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

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

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

 

先来介绍第一种:

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

 

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

 

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

 

 

 

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

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

 

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

也可以通过 编程方式设置

 

tab.loadUrl(id,url)

tab.lazyUrl(id,url)

 

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

 

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

 

 

 

两种模式怎么选择。

例如上例

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

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

 

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

 

你可能感兴趣的:(七、敏捷开发框架 Tab组件的应用 Tab页面开发(两种使用方式))