注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Qings Feelings

随心所欲

 
 
 

日志

 
 

Axure一种动态投票计数交互的实现  

2011-10-07 16:35:05|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

I am sailing ...

Monday, 19 September 2011 10:35
 

Axure的交互功能(Interactions)其实非常强大,最近在做一个demo的时候,学习了一种动态投票计数交互的实现方法。

这里要实现的是类似于“顶”“踩”、“赞成”“反对”、“鲜花”“鸡蛋”那样的投票点击效果,点击相应投票图标的同时,会引起计数的同步变化。

首先,我们放置一个投票按钮图标(Image),比如,label设置为“vote_up”,然后在图标边上放置一个文字区(Text Field),label设置为“up_count”。

现在开始设置交互动作。

选中投票按钮,选择“Add Case ...”打开“Case Editor”。在“Step 2:Add actions”栏中选择“Set Widget(s) to Selected State”,参照下图进行设置。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

下面设置计数的变化。继续在“Step 2:Add actions”栏中选择“Set Variable/Widget Value(s)”,参照下图。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

点击“Open Set Value Editor”按钮,打开另一个设置对话框。选择好需要变化值的项目,再点击公式按钮。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

在这个对话框中,如果直接修改默认值,则表示点击投票按钮后,计数变化为新设置的值。这不符合我们计数自动增长的需求,因此,这里需要点击“Add Local Variables” ,设置一个投票变量,然后输入计数公式[[VOTEUP+1]]。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

好了,现在应该可以生成页面预览一下效果了。

接下来,我们还可以更进一步,设置一下投票数的上限,即达到这个数值的时候,就不再变化,例如,我们设置投票数显示上限是99。

选中投票按钮,选择“Add Case ...”打开“Case Editor”,建立新的“Case 2”。

这里需要增加判断,因此点击“Add Condition”。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

然后,再设置文字区up_count的值在大于等于99时,显示99。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

现在,看一下最后的交互列表,应该是下图的样子。

Axure一种动态投票计数交互的实现 - qings - Qings Feelings

Last Updated on Monday, 19 September 2011 10:46
 
 

Copyright © 2000-2011 文章及照片转载请注明出处
京ICP备05002090号     与我联系    
Powered by Joomla!




引文来源  Axure一种动态投票计数交互的实现
  评论这张
 
阅读(449)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018