最新消息:原定axure手机原型设计系列课程免费视频由于工作原因一直未能推出 如需视频可以购买 小楼老师 视频 Axure RP7.0从入门到精通 本站案例源码现已整理全部提供下载学习

程矢Axure夜话:中继器系列视频教程之动态Tab标签页

Axure中继器repeater教程 老二牛车 8418浏览 0评论

案例描述:使用中继器实现的动态Tab标签页

知识点:

  • 中继器综合应用
  • 动态面板

效果图:

0_中继器动态标签页

本站在线效果预览:http://www.91axure.com/repeaterlesson/repeatertab/start.html#p=home(firefox原型文件)

AxShare在线效果预览:

原型下载地址:中继器动态Tab标签页 .rp    中继器动态Tab标签页.html

在线视频:

实现步骤:

1:参照教程“中继器系列视频教程之中继器实现的表格”设计中继器表格

102

1.1:sel标志代表标签页的选中状态1代表选中0代表未选中

1.2:close标志代表标签页是否可以关闭1代表可关闭0代表不可关闭

1.3:img代表tab标签页的图像

1.4:menuname代表标签名称

2:参照教程“Axure基础系列视频教程之树控件”设计树控件

3:页面中按照下图放置控件。如下图:

100

中继器内部面板

101

4:设置树控件的子节点单击事件

110

4.1:使用中继器更新事件更新sel的值为0,代表全部未选中

4.2:使用中继器新增行事件,添加sel为1名称为选择的数节点名称

111

4.3:按照选中的树节点切换Tab内容页

 

5:设置中继器内部面板的关闭按钮事件

112

5.1:使用中继器的删除行事件删除当前行

5.2:使用中继器更新事件更新sel的值为0,代表全部未选中

5.3:关闭标签页后,显示Tab主页

 

6:标签页的鼠标点击事件

113

6.1:使用中继器更新事件更新sel的值为0,代表全部未选中

6.2:更新当前行的sel=1,代表选中当前标签。

 

7:添加中继器的“每项加载时”事件

114

7.1:使用menuname字段绑定标签页的标题

7.2:根据sel的字段值,设置标签标题的选中

7.3:根据关闭按钮设置设置是否显示关闭按钮

7.4:根据img的字段值显示标签页的图标

8:控制tab标签是否打开的变量控制

115

9:预览或生成原型

 

问题:tab标签页打开后,再次点击的选中问题未解决

 

转载请注明:爱上原型Axure » 程矢Axure夜话:中继器系列视频教程之动态Tab标签页

您必须 登录 才能发表评论!