Axure教程:中继器实现动态Tab标签页

5星 · 超过95%的资源 需积分: 9 26 下载量 111 浏览量 更新于2024-09-11 收藏 486KB PDF 举报
“程矢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交互设计的一个宝贵资料。