最新Axure查询+倒计时跳转页面实例.docx
- 文档编号:29973731
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:15
- 大小:652.66KB
最新Axure查询+倒计时跳转页面实例.docx
《最新Axure查询+倒计时跳转页面实例.docx》由会员分享,可在线阅读,更多相关《最新Axure查询+倒计时跳转页面实例.docx(15页珍藏版)》请在冰豆网上搜索。
最新Axure查询+倒计时跳转页面实例
Masters(通用模块)
在通用模块中新增一个取名为“footer”的Masters。
双击“footer”模块名进行编辑,将Home页中footer的内容剪贴到模块中。
为了在页面中的准确定位,我给footer也加了一个底色框。
然后别忘了把“footer”拖到Home页中相应的位置哦。
Menu(菜单)和QuickLink(快捷链接)
RP中制作多级菜单非常方便,只需要用到组件工具中的:
一个Menu(Vertical):
垂直菜单,一个Menu(Horizontal):
水平菜单。
菜单默认的一级MenuItem(菜单选项)有3个,我们可以通过右击某个选项来插入同级菜单(MenuItem)和增减下一级菜单(Submenu)。
还可以编辑菜单
Tips:
按键盘Tab键只会让当前聚焦点在菜单选项间浮动,不能增加新菜单选项。
新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同;
另外,在菜单中修改任一菜单选项的宽度,整个菜单的宽度都会被修改。
也就是说,菜单宽度值是各个一级菜单选项的和,而不是自己事先定好的宽度。
拉长或缩短整个菜单的宽度时,只有最后的一级菜单选项的宽度被改变。
可以通过拖动来选择多个菜单选项,在公共栏中对内容显示进行相关操作。
Tips:
要先选中上级菜单选项,下级菜单才会显示出来;
下级菜单显示的起始位置是上级菜单的左边线,并且无法超过左边线。
通过右击菜单中的“EditRolloverStyle(编辑翻转样式)”项,可以制定鼠标移动到菜单上时的菜单样式变化。
Applyto:
Thismenuitemonly:
只应用到对当前菜单选项;
Thismenuonly:
只应用到同级菜单;
Thismenuandallsubmenus:
应用到所有同级菜单和下级菜单;Tips:
为菜单添加了RolloverStyle之后,菜单选项的左上角会出现一个黑白小框,鼠标移动到小框上,就可以看到RolloverStyle的预览效果。
为菜单加上链接,我们选择菜单选项“首页”,再选择Interactions(交互)事件中的“QuickLink”
在Link Properties(链接属性)中选择网站页面地图中的“Home”页。
一个链接就添加好了。
当然,也可以添加外部链接(Linktoanexternalurlorfile)、重新加载当前页(Reloadcurrentpage)、返回前一页(Backtopreviouspage)。
3、表单和交互事件-关键字匹配实例
在前一篇介绍了一些表单组件的使用(文本输入框TextField、下拉菜单Droplist、复选框Checkbox等),下面我们通过“关键字匹配”实例中交互事件,深入一点来认识表单的丰富交互效果。
做一个类似google搜索的“查询建议”的关键字匹配实例:
我们简单模拟这个效果,寻找好友中姓“李”的朋友和叫“李查……”的朋友。
实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。
=
点这里先看看我做好的效果,下面的图片效果:
过程讲解:
用TextPanel、TextField和Button先做好搜索内容。
然后拖出一个DynamicPanel(动态面板):
在TextField下面拉伸出一个“查询建议”的区域来:
在Label标签栏分别为工作区中的TextField和DynamicPanel命名为“keyword”和“matching”双击“matching”,为它加上3个State(状态):
第一个状态设为空内容,双击第二个状态(matching1)进行编辑,用ListBox(选择框):
在ListBox中添加多个姓“李”的好友名字选项。
注意:
Allowmultiple(允许多选)不要勾选。
回到工作区,选择“matching”动态面板,双击第三个状态(matching2),继续制作“查询建议”菜单,这次都叫“李查……”。
以下是“matching1”和“matching2”状态的菜单内容。
我们分别为两个选择框命名为“matchingList1”和“matchingList2”。
和
Tips:
可以看到两个状态的边缘都有一条蓝色虚线,这就是我们在调用动态面板的时候为它预设的区域大小。
超过蓝色虚线的部分将在页面中无法被显示出来。
下面开始添加Interactions(交互事件)。
为表单添加交互事件的方法,先选中工作区中的表单组件,然后在Interactions面板选择“Addcase..”添加事件。
或是用一些预设的交互行为作为条件,为组件添加事件。
OnClick:
点击
OnKeyUp:
键入
OnFocus:
聚焦
OnLostFocus:
失去聚焦
为“keyword”文本输入框OnKeyUp(键入行为)添加事件。
键入“李”时,显示“matching”动态面板中的“matching1”状态。
勾选SelectActions(选择动作)中的“SetPanelstate(s)toState(s)(改变动态面板的状态)”,在“Step3:
EdittheActionsdescription(第三步:
编辑动作描述)”中选中蓝色的SetPanel链接,将动态面板“matching”的默认状态“none”改为“matching1”,即前面设好的姓“李”的“查询建议”状态。
点击右上角的“EditCondition(编辑条件)”,为Case设键入时的keyword值。
可通过下拉菜单和输入框设置条件:
“textonwidget(文本组件)”,找到“keyword”文本输入框,equalsvalue“李”(变量值等于“李”)。
以下还需要添加几个Case,这里不详说,大家试着自己做一下:
OnKeyUp行为下:
Case2:
当键入“李查”时,“matching”动态面板状态变为“matching2”
Case3:
当键入值不等于“李”时,“matching”的状态变回为“none”
OnFocus行为下:
Case1:
keyword的值是“李”,“matching”动态面板状态变为“matching1”
Case2:
如果keyword的值是“李查”,则“matching”动态面板状态变为“matching2”
OnLostFocus行为下:
Case1:
“matching”动态面板的状态为“none”
为“matching”动态面板内的两个状态添加交互事件,效果是“当某个查询建议被选中时,keyword文本输入框的文本值变为选中的内容”。
“matchin1”状态里的“matchingList1”选择框,OnChange行为的Case1:
这样的Case我们需要做5个,因为我们有5个姓李的好友。
我们可以通过CopyCase和PasteCase,来复制和粘贴。
但我们需要把equals的值“李安”分别改成其他的名字……
再选择OnChange,复制所有的Case:
到“matchin2”状态里的“matchingList2”选择框
将多余名字(不叫“李查”)的Case删除“DeleteCase”
别忘记需要将选择框的名称修改为“matchingList2”
4、RPPro5.5多动作-倒计时跳转页面实例
RP5.5版本之后,支持多个Action(动作)同步,这样我们可以制作出更多的交互效果来了。
比如说:
倒计时跳转页面。
新建一个页面,添加一个TextPanel加上内容“将在 秒后跳到首页!
”。
在文本空格处加上一个DynamicPanel(动态面板),在Label中为它取名为“stopwatch”。
再为它加上“s5”到“s1”5个状态,分别编辑5个状态,在里面加上内容“5、4、3、2、1”5个倒计时秒数。
Tips:
建议文本中输入空格时用全角输入,否则它将跟Dreamweaver一样在HTML不能显示全部的空格,这样会产生与设计时的错位。
利用工作区下面的PageInteractions(页面交互栏)为页面添加事件。
双击“OnPageLoad”,这时我们看到5.5版本中有一个选项“AdvancedEditor(高级编辑器)”
利用这个高级编辑器我们可以为页面同时添加多个动作。
选择“AddAction”增加动作,可以不断为页面添加动作。
WaitTime(ms)(等待时间)是我们等下要作为倒计时用的动作,单位是毫秒(ms),1秒=1000毫秒。
我们按步骤为页面事件添加动作:
“stopwatch”秒表跳在“s5”第5秒;
等待1秒;
“stopwatch”跳到s4;
等待1秒;
“stopwatch”跳到s3;
等待1秒;
“stopwatch”跳到s2;
等待1秒;
“stopwatch”跳到s1;
等待1秒;
跳到首页。
“Step2:
SelectActions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。
另外,跟前面讲的表单交互一样,“Step3”动作描述中的参数可以通过蓝色文字链接进行修改。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 最新 Axure 查询 倒计时 跳转 页面 实例
![提示](https://static.bdocx.com/images/bang_tan.gif)