多内容组

我们常见的应用中经常在一个界面中提供标签导航能力，通过标签导航在一个界面内部变更内容区显示的内容，例如

对于这种布局的界面我们通过使用Pane窗格控件来组合多个界面并实现切换。

1、界面设计

1.1、创建一个页面，并命名为pane

1.2、添加一个page，并在page中添加一个header一个scrollcontent和一个footer控件
1.3、在footer控件中添加一个标签组件
1.4、在scrollcontent中添加四个Pane控件

构造好的界面布局与控件结构图如下

1.5、为scrollContent加上上部和下部被Header和Footer遮住区域的余量

1.6、Pane控件默认是隐藏的，打开Pane的Active属性，然后分别在Pane控件加入文字控件

文字控件的文字可以定义为不同的内容，便于体现切换效果。

1.7、使第一个Pane的Active属性为选择状态，其他Pane的Active属性为不选择，然后保存并导出全部
1.8、在导出的pane.js中加入代码控制Pane的切换

2、代码分析

打开pane.html可以看到如下代码

代码中当前显示的pane使用active类，四个Pane按顺序存放于scrollbox中，只有第一个被显示在界面上。

打开pane.js我们分析一下界面切换的逻辑

下部的多标签导航控件使用的是一个JS控件，当使用者点击某个标签时，会触发click事件，并告知点击的标签的索引。因此我们在代码中当某个标签被点击时，我们使用$(“.tab_pane”)得到所有4个Pane组件，并移除active类，使所有Pane隐藏，然后根据索引找到需要显示的Pane为其添加active类使其显示在界面上，完成切换。

$(“.tab_pane”)使用css类tab_pane作为选择器得到一个控件数组，如下图所示

我们通过$(“.tab_pane”)[index]即可获得需要显示的Pane的DOM对象，然后在通过$($(“.tab_pane”)[index])把他转换为JQuery DOM对象，使其可以调用addClass函数来添加active类属性。

还需要帮助吗? 联系我们
最新更新 8th Jul 2021