Axure新手养成计划(连载19)

Axure书籍 小楼一夜听春语 20557℃ 0评论

6.3.3.5.      列表选项交互

在本章6.3.3.2的案例中,我们通过不同的按钮打开了不同的搜索引擎页面。但是,在一些浏览器的搜索工具栏中,往往是通过一个包含多个搜索引擎名称的下拉列表框,选则其中一项之后点击搜索,则打开被选择的搜索引擎主页。这样的效果怎么实现呢?(图115)

115

(图115)

实现思路:

下拉列表包含多个选项,如果是百度就打开百度的首页,如果是搜狗就打开搜狗的首页,所以我们需要判断当前下拉列表框被选中的项是什么,然后在点击“搜索”按钮时执行在框架中打开连接的动作,打开不同的链接(URL地址)。

实现步骤:

1、拖入需要的元件并命名,下拉列表框为“list”,搜索按钮为“search”,内联框架为” myframe”;为了页面美观,我们在内联框架的属性中将“隐藏边框“勾选上;。

2、设置下拉列表框,编辑选项中添加多个搜索引擎名称;

3、双击形状按钮“search”的【鼠标单击时】事件打开用例编辑界面,然后添加条件判断内容为【被选项】”list”【==】【选项】“百度”,点击“确定“返回用例编辑界面;(图116)

116

(图116)

4、设置动作为在框架中打开链接【内联框架】“myframe”为【超链接】,填入搜索引擎的地址“http://www.baidu.com“。

5、参照3、4两个步骤继续添加用例,判断选项为“搜狗“时在框架中打开搜狗首页的超链接,以及选项为”有道“时,在框架中打开有道首页的超链接。(图117)

117

(图117)

      通过以上几个步骤,就实现了在列表选择不同的搜索引擎时,点击搜索按钮打开不同的搜索引擎的效果了。

备注:这里的文本框暂时没有作用。在以后学习局部变量之后我们可以完善这个案例,实现打开指定关键词搜索结果页的效果。

6.3.3.6.      焦点元件控制

有些网站或者应用比较注重安全性,会在用户输入数据的时候提供虚拟键盘供用户进行输入。比如一个六位的密码框,每次点击小键盘数字时,都能向密码框中输入相应的数字,输入后焦点自动进入下一个密码框。(图118)

118

(图118)

注意:本案例在部分浏览器中可能无法正常获取焦点在指定文本框,请使用火狐或谷歌浏览器!另外建议,避免使用IE、360浏览器!

      元件准备:

1、需要六个文本框用来接收密码,我们将它们按顺序命名为“A”、“B”、“C”、“D”、“E”、“F”;

2、需要用来显示文字的9个矩形,不过因为矩形点击时会获取焦点,有时会对输入产生影响所以,我们不在矩形的事件上添加用例,而是在矩形的上面覆盖一个热区,调整成与矩形相同的大小,点击的时候通过热区来触发事件。

思路分析:

1、任何一个文本框都会在输入时文字发生改变,文字改变时如果文本框不是空白的,我们就让焦点进入下一个输入的文本框,最后一个文本框可以省略。

2、点击热区时,需要让当前获取焦点的文本框中输入与热区相对应的矩形上的数字。

实现步骤:

1、分别给前五个文本框【文本改变时】事件添加用例,判断【元件文字】“this”【!=】“”时,执行动作【获取焦点】到下一个文本框。(图119)

备注:“!=“是关系运算符,用来判断左右条件内容不相等,即”不等于“。

119

(图119)

      2、我们先用一个矩形和一个热区进行设置。首先,给矩形命名“num1“,并且双击矩形添加文字”1“;然后,给热区设置【鼠标单击时】事件的用例,添加动作【设置文本】到”焦点元件“为【元件文字】”num1“。(图120)

120

(图120)

备注:焦点元件不是一个固定的元件,是指当前获取焦点的元件。比如有多个文本框,光标在哪个文本框中闪烁时,则哪个文本框是焦点元件。

3、将设置好事件用例的热区覆盖到矩形“num1“上,然后同时选中这两个元件,进行复制粘贴。复制粘贴后,更改元件的名称为”num2“~”num0“,矩形上的文字也对应更改为2~0。然后,将所有元件排布整齐,就完成了我们想要的效果。生成后,点击第一个文本框就可以使用进行文字输入了。(图121)

121

(图121)

备注:元件重合时,点击第一下能选中第一层元件,再次点击选中第二层,以此类推。当选中最底层元件后,再次点击则重新选中第一层。案例中修改矩形的名称及文字时可以使用这种方法。更简便的方法,我们在之后元件管理部分会讲到。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载19)

喜欢 (38)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(47)个小伙伴在吐槽
  1. 小楼老师 能问你个问题么 为什么Mac版本的元件提示没有用
    _____仝2015-09-06 17:36 回复
  2. 小楼老师,我现在在自学axure。我想知道的是我需要学哪些知识,现在一些简单的功能我基本都能实现了。
    张苗苗2015-09-07 13:35 回复
    • 小楼一夜听春语
      不知道学什么的时候 就有什么学什么
      小楼一夜听春语2015-09-07 16:52 回复
  3. 老师 想问下 完全按照你说的步骤做的密码输入。但是利用上面12宫格中点进去的数字,光标不会进入下一个框体,只有自己在键盘上输入的数字,光标才会进入下一框体 这是为什么呀?
    凤凰涅槃2015-10-02 20:41 回复
    • 是的,用了热区也不行,焦点无法自动跳到下一个密码框。。。
      xl2015-10-09 17:05 回复
    • 遇到了同样的问题
      蓝胖子族长2015-10-14 17:15 回复
    • 可能操作有误吧,我这边没有问题。
      2015-10-21 11:21 回复
    • 我也遇到了同样的问题
      哇咔咔2015-10-29 11:57 回复
    • 是的,遇到了同样的问题
      o西瓜籽o2015-11-05 17:48 回复
      • 这个问题解决了吗,求助
        BetterZzoe2015-11-10 18:05 回复
        • 12宫格的框必须要设置一个条件,选择12宫的一个,选择“设置文本”->焦点原件->设置文本为“元件文字”->后面的小三角框选择这个12宫元件的名称即可。 上面的文本框,就是显示点击密码的,必须要满足一个条件才行。,
          没头脑和不高兴2015-12-11 23:50 回复
    • 亲 这个问题解决了吗,我也遇到同样的问题了!
      BetterZzoe2015-11-10 18:02 回复
    • 小楼一夜听春语
      http://www.iaxure.com/3113.html下载源文件测试效果 如果正常自己对比 如果也不正常 升级软件到最新版本
      小楼一夜听春语2015-11-10 22:18 回复
      • 小楼老师,下载你的案例,点击密码框内的数字,还是不能自动跳到下一个框体。
        vvikyn2016-02-18 09:55 回复
    • 给热区设置【鼠标单击时】事件的用例,添加动作【设置文本】到【焦点元件】,输入值为“1”。
      minnie的鱼2015-12-02 11:10 回复
    • 同样的问题,确实是不行的,不管是发布还是不发布都不可,完全不对!
      淘玩家2016-11-27 23:50 回复
    • 光标自动进入下一个格式,输入密码的格子需要时文本框,选择文本改变时添加用例,就可以解决了
      nana2017-03-07 17:27 回复
  4. 😛 帅楼老师,我发现你上面的搜索引擎 切换很鸡肋。1.在默认的搜索引擎时,不能在frame中输入检索词进行搜索;2.选择后跳转使整个交互毫无意义。希望能够切换引擎后,在输入框输入检索词,点击搜索按钮后可以直接搜索。期待教程。
    paul2015-10-03 23:55 回复
  5. 生成后,不用点击第一个文本框就可以进行文字输入怎么实现?
    HUI8202015-10-26 14:24 回复
    • 第一个文本框加入一个新交互用例条件if this==“”时,获取焦点。然后开始直接点击下面数字键盘就能直接添加到文本框中了
      Evilshock2015-10-28 16:04 回复
      • 好像不行哎。设置“页面载入时”焦点在A不是更好嘛。
        大白菜2015-11-03 16:30 回复
        • 成都大学杨子皓2016-05-10 13:44 回复
  6. 老师,最后一个文本框的焦点怎么控制?? 每次输入到最后一个文本框 再次点击热区 最后一个文本框的内容就会被改变,求助
    adi陳2015-12-09 17:00 回复
  7. 老师 想问下 完全按照你说的步骤做的密码输入。但是利用上面12宫格中点进去的数字,光标不会进入下一个框体,只有自己在键盘上输入的数字,光标才会进入下一框体 这是为什么呀?
    hhhhhhh2015-12-17 15:57 回复
  8. 如果想要做一个清除按钮,点击一次从右往左依次清除一个文本内容,该怎么做?
    anway2015-12-28 15:48 回复
    • 清除的话,刚好时逆向思维,反过来就可以了
      zxm_lost2016-01-06 19:06 回复
  9. 楼老师:6.3.3.5内联框架应该是设置在list和search的元件下方吧,除了搜狗的连接可以跳转,百度和有道还是在当前页,这样理解对吗?
    竹目和一2016-01-28 17:34 回复
  10. 为什么越看越觉得每一节有点乱,知识点没有完全串起来,也没有前面一样说清主要实现什么功能,用于哪里。建议小楼老师可以改善。
    Kimmy2016-02-24 15:46 回复
    • 小楼一夜听春语
      注意每节第一句描述
      小楼一夜听春语2016-02-25 13:31 回复
  11. 用12宫格输入的数字 光标不会自动进入下一个文本框 但用电脑键盘输入光标会自动进入
    妍妍2016-02-25 22:33 回复
    • 同样问题
      winner2016-03-01 16:54 回复
  12. 楼老师, 想问下 完全按照你说的步骤做的密码输入。但是利用上面12宫格中点进去的数字,光标不会进入下一个框体,只有自己在键盘上输入的数字,光标才会进入下一框体 这是为什么呀?看了评论不止我一个人遇到这个问题哦。
    dk2016-03-10 15:41 回复
    • 小楼一夜听春语
      这类问题 要么没注意细节 要么浏览器问题
      小楼一夜听春语2016-03-11 09:00 回复
  13. 通过实验每次点击鼠标只会执行一个元件上的用例,也就是执行了热点元件上的用例,文本框元件的用例就不会执行,因此出现了光标不会移动的情况。以矩形元件num7为例设置六个用例:if(A==""){设置焦点到A;A=7};else if(A!=""&B==""){设置焦点到B;B=7};……else if(E!=""&F==""){设置焦点到F;F=7}。以此类推到每个矩形元件即可解决。
    晟源君2016-03-10 22:38 回复
  14. 小楼,你好,有个问题请教下:矩形点击时会获取焦点,这个是啥意思呢?在axure中添加矩形,演示后,点击矩形并没有获取焦点的呀?求教~~~
    Daisy_勇敢2016-03-22 10:49 回复
  15. 小楼老师,还有个问题要请教,依次点击12格中的数字,最后一个文本框获取数字后,继续点击12格中的数字,为什么焦点会跳转至第三个文本框呢?按照用例,焦点应该是在第一个文本框中的,期望解答,不胜感激~
    Daisy_勇敢2016-03-22 14:08 回复
  16. 小楼老师,我在设置添加动作【设置文本】到”焦点元件“为【元件文字】”num1 时,是不是把【元件文字】改成【值】然后数字写成矩形对应的数字也可以呀!还有就是整体设置完成之后最后一位数字一直可以点击改变要怎么办呀?
    tiana2016-03-23 22:11 回复
    • 小楼一夜听春语
      1、可以。 2、添加判断,文本框为空时再执行动作。
      小楼一夜听春语2016-03-24 14:42 回复
      • 明白啦 非常感谢 🙄
        tiana2016-03-24 21:23 回复
  17. 点击之后文字没有填入文本框啊
    Ritchey2016-05-26 14:55 回复
  18. 6_3_3_6-焦点元件控制,小楼老师,这个案例文本框A需要不需要设置一个默认“获取焦点”?用支付宝转出功能试了下,它默认第一个密码框是获取焦点的~
    尛尛2016-08-15 16:59 回复
  19. 和各位遇到相同问题,单击12宫格输入数字,文本框的焦点不会到下一个。并不是我浏览器的问题,重新安装了axure7,问题解决了。
    无敌小梨子2016-09-05 14:51 回复
  20. 给文本框A添加用例:元件文字为空时,获取焦点到A,怎么测试下来就不成功呢?
    lulu2016-11-10 15:45 回复
  21. 小楼一夜听春语
    注意:本案例在部分浏览器中可能无法正常获取焦点在指定文本框,请使用火狐或谷歌浏览器!另外建议,避免使用IE、360浏览器!
    小楼一夜听春语2016-11-28 09:12 回复
  22. 隐藏内联框架后,预览的时候页面也不会出现,隐藏状态的原件在预览时是不会显示任何内容的么?
    也饿2017-03-23 15:27 回复
  23. 小楼老师好~什么情况用矩形输入文字或者文本框输入文字呢?这有一个清晰的区分定义吗?实际操作的时候常常不知道选哪个 😕
    miu2017-03-30 08:40 回复
    • 小楼一夜听春语
      只有文本框能输入文字
      小楼一夜听春语2017-03-30 15:49 回复