“程矢Axure夜话图文教程中继器动态Tab页.pdf”是一份关于使用Axure软件创建动态Tab标签页的教程。教程通过图文并茂的方式,讲解了如何利用中继器(Repeater)和树控件(Tree Widget)来实现动态的Tab页功能,包括标签页的选中状态、关闭功能以及与树控件的交互。
在教程中,首先讲解了中继器表格的设计,其中包含了几个关键字段:
1. `sel`:用于标记标签页的选中状态,值为1表示选中,0表示未选中。
2. `close`:表示标签页是否可以被关闭,1代表可关闭,0代表不可关闭。
3. `img`:存储每个标签页的图像信息。
4. `menuname`:定义了标签页的名称。
接下来,教程提到了树控件的使用,它是与中继器联动的关键。当用户在树控件中选择一个节点时,会触发以下操作:
4.1:更新中继器内所有行的`sel`值为0,取消所有选中状态。
4.2:在中继器中新增一行,设置`sel`为1,同时将新行的名称设置为所选树节点的名称。
4.3:根据选中的树节点,切换对应的Tab内容页。
此外,教程还详细介绍了中继器内部面板上关闭按钮的事件处理:
5.1:使用中继器的删除行事件,删除当前选中的标签页。
5.2:更新所有行的`sel`值为0,确保没有其他标签页被选中。
5.3:关闭标签页后,恢复显示Tab主页。
针对标签页的鼠标点击事件,教程指出了以下处理方法:
6.1:遍历中继器,将所有`sel`值设为0,取消所有选中状态。
6.2:设置当前点击的标签页的`sel`值为1,使其被选中。
接着,教程提到了中继器“每项加载时”的事件处理:
7.1:使用`menuname`字段设置Tab标签页的标题。
7.2:根据`sel`字段值,设置标签页标题的选中样式。
7.3:根据`close`字段值,决定是否显示关闭按钮。
7.4:根据`img`字段,显示相应标签页的图标。
教程中还提到了一个待解决的问题:Tab标签页打开后,再次点击的选中问题。这可能涉及到中继器更新逻辑的优化,需要进一步研究解决。
总结起来,这份教程详细阐述了如何在Axure中使用中继器和树控件构建动态的Tab页功能,包括状态管理、交互事件处理和视觉效果的实现,是学习Axure交互设计的一个宝贵资料。