Axure常用交互效果
我们为大家收集整理了关于Axure常用交互效果,以方便大家参考。
1.带提示的文本框
将提示信息放置于文本框内是一种常见的交互方式。当文本框获得焦点时,提示文字消失。当文本框失去焦点时,提示文字重新显示出来。现在就让我们看下这种控件的制作方法。
第一步:
从widget库中拖出text field控件。双击控件在其中输入提示文字。然后在widget properties面板里,为该text field写入标签:“find people”。
第二步:
双击widget properties面板里的
,然后在打开的case editor中,点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。 设置如下图所示:
点击“OK”保存设置退出Set Value Editor和Case Editor。
第三步:
双击widget properties面板里的
,然后在打开的case editor中,点击Add Condition,在Condition Builder里设置如下:
(该步骤的`目的是,当用户在text field里面输入值之后,text field失去焦点时显示用户输入的值,而不再显示提示文字。)
点击“OK”保存设置并退出Condition Editor,然后再Case Editor中,点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。 设置如下图所示:
点击”OK”保存设置退出Set Value Editor和Case Editor。
至此带提示的文本框的制作就结束了,按“F5”可在浏览器中查看效果~
2.拖拽
在设计中应用拖拽,可以直观有趣的替代移动、复制、添加、删除等操作。在Axure中,拖拽效果的实现相对复杂。具体如下:
第一步:
从widget 库中拖出一个矩形,双击添加文字“拖拽物”。在矩形上点击右键,选择Convert – Convert to Dynamic Panel。然后在widget properties面板里,为该矩形写入标签:“拖拽物”。
第二步:
选中该矩形,在软件右侧区域中的“组件属性(Widgets Properties)”中选择“交互(Interactions)”面板,双击“OnDragStart”, 在Case Editor中设置如下:
点击“OK”后保存设置并退出Case Editor。该步骤是为了保证在有多个拖拽物存在的时候,被拖动的拖拽物总是在最前面,不会被其他的拖拽物所遮挡。
点击“OK”后保存设置并退出Case Editor。
第三步:
双击“OnDrag”, 在Case Editor中设置如下:
注意此处在右下角的Move下拉菜单中默认是“with drag”,也就是说拖拽物会完全跟随鼠标移动。如果是选择“with drag x”,则是跟随鼠标x轴(水平)移动,垂直方向位置不变。如果是选择“with drag y”,则是跟随鼠标y轴(处置)移动,水平方向位置不变。
第四步:
双击“OnDragDrop”, 在Case Editor中设置如下:
注意此处在右下角的Move下拉菜单中默认是“to x,y beofore drag”,也就是说拖拽物在鼠标左键松开的时候,会回到起始位置。如果此处选择“with drag x”,则拖拽物停留于鼠标x轴坐标处。如果是选择“with drag y”,则拖拽物停留于鼠标的y轴坐标处。
点击“OK”后保存设置并退出Case Editor。
至此最简单的拖拽效果就已经实现了。按“F5”可在浏览器中查看效果。
希望大家可以学会Axure常用交互效果想了解更多精彩内容,请关注我们的网站!
-
javascript中setInterval的用法总结
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。setInterval的表达式格式主要有:setInterval(fnname,time,par1,par2,);setInterval(obj,fnname,time,par1,par2,);第一种是最常见的表达...
-
关于JavaScript中继承的深入理解
JavaScript中我们可以借助原型实现继承。例如functionbaz(){="";}functionfoo(){}otype=newbaz();varmyFoo=newfoo();;这样我们就可以访问到baz里的属性oo啦。在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上),所有实例都使用一个原型,一但baz的属性...
-
WAP的简介
WAP协议被设计用来在无线客户端(比如移动电话)上展示因特网内容。您应当具备的基础知识在继续学习之前,您需要对下面的知识有基本的了解:WWW,HTML以及有关网页构建的基础知识JavaScriptXML如果您希望首先学习这些项目,请在我们的首页访问这些教程。什么是WAP?无线产...
-
万恶的function在javascript中的运用实例分析
javascript中最有特色而又让你困惑的function算一个了下面看一下常用操作复制代码代码如下:functiondoit(){.....}doit();javascript中的函数我们可以把它当作方法使用复制代码代码如下:varobj=newObject();=function(){.....}();而function实际上就是对象(即F...