使用变量控制Tab标签或按钮的方法|Axure实例
2012-02-02 09:47
477 查看
所有Axure RP教程中,最经典的应该是利用Axure RP制作Tab标签了吧,这部分内容涉及了页面、层及基本的交互。
以前我制作Tab的时候,为了表现Tab/按钮的选中状态,干脆将一排Tab/按钮都放到层里;这样做的实质是点击Tab/按钮后切换到新的层,通过这种方法来达到Tab/按钮切换状态的效果。
涉及两层Tab/按钮嵌套时,可以用页面切换+层切换,如果有三层呢?
往下看之前请先留意以下注意事项:
1. 不建议大家都么做,因为这样已经有点追求最佳显示效果的味道了;
2. 不要把大把的时间放到交互动作或者变量应用上,除非你很清楚你在干什么;
3. 如果你想做到完美,请从小处做起:记得不能让每个控件的标签(Label)空着;
—点此下载本实例Axure
RP源文件
注:考虑项目敏感信息,具体页面内容做了处理但是不影响本案例理解,视觉方面敬请谅解
![](http://www.zu14.cn/coolemotion/emotions/tu_2.gif)
本实例要素:点击Tab/按钮时,为特定变量赋值并刷新页面,通过变量来控制层的切换的同时,使刚才点击的Tab/按钮显示为选中状态。
1. 点击Tab/按钮时赋值并重新加载当前页面:
![](http://www.axurer.com/wp-content/uploads/2009/09/image-thumb.png)
使变量“Tab”的值为“1”(点击的是第一个按钮,如果是第二个,则变量值为“2”)
重新加载本页面(配合OnPageLoad来实现变量生效)
2. 在当前页面的OnPageLoad增加交互使变量生效:
![](http://www.axurer.com/wp-content/uploads/2009/09/image-thumb1.png)
如果变量“Tab”值等于“1”,则切换到对应的层(第一个层)并使刚才的按钮处于选中状态;
如果变量“Tab”值等于“2”,则切换到对应的层(第二个层)并使刚才的按钮处于选中状态;
……..
PS:如果你觉得Tab/按钮很多,这样编写OnPageLoad交互事件挺累的话,建议你看一下页面上的Tab/按钮是否多了些?太多的Tab/按钮是否会影响到用户体验或产品功能传递呢?
相关文章推荐
- ActionBar的使用(包括返回按钮,Tab标签,与ViewPager连用)
- Swift基础之init方法,实例方法,类方法(静态方法)的使用(多标签Demo)
- Struts2图片按钮标签的使用方法
- Python 中特殊变量/方法命名规则说明(特别是私有变量)及使用实例
- Swift基础之init方法,实例(对象)方法,类(静态)方法的使用(多标签Demo)
- 多iframe使用tab标签方式添加、删除、切换的处理实例
- Java继承关系中,父类方法使用实例变量和调用实例方法的探究
- Bootstrap标签页(Tab)插件使用方法
- Django 模板中 变量 过滤器 标签 的使用方法
- Python 中特殊变量/方法命名规则说明(特别是私有变量)及使用实例
- displaytag的使用方法(用于数据表格的显示和功能控制) tabledecorator实现链接按钮
- java 父子实例的内存控制 继承变量和继承方法的区别
- HTML5 audio标签使用js进行播放控制实例
- 使用定时器判断确保某个标签有值才执行方法, 控制js代码执行先后顺序
- PHP Session 变量的使用方法详解与实例代码
- Django 模板中变量、过滤器、标签的使用方法
- Django 模板中 变量 过滤器 标签 的使用方法
- C#使用Windows API控制IE切换标签页TAB至某网址网页
- 父子实例的内存控制--继承成员变量和继承方法的区别
- 使用<a>标签提交action会执行两次后台方法的原因(反射机制小实例问题的解决)