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

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

4.3.6.  单选按钮组

在网页上,经常能看到让用户选择性别功能,比如在用户输入注册资料时。这种功能只有一个性别选项能够被选择,当选择一项时,其它选项被取消选择。类似于这种效果在Axure也是通过元件属性来实现。

因为是输入资料的功能,所以我们在表单元件中去寻找相应的元件。这个元件就是单选按钮。

性别选择的功能实现过程如下:

第一步:拖入一个单选按钮,按下键盘的Ctrl键,同时拖动元件后放开,把元件复制成3个;当然,也可以点中元件,通过Ctrl+C复制、Ctrl+V粘贴来完成复制;复制之后,双击每个元件的文字,改成不同的性别。

备注:在完成这一步后,如果我们预览或生成查看效果,你会发现每一个选项都能被选择。单选的关键在后面的步骤,请继续往下看。

第二步:按住鼠标左键,圈选这3个元件,把它们全部选中;也可以按住Ctrl键逐一点击这3个元件完成选中。

第三步:在元件属性中找到【指定[单选按钮]组名称】,在后面的输入框中随意填写一个组名称。

当完成第三个步骤,就完成了唯一选中一项的效果。

也就是说如果我们想让一组这样的元件只能唯一被选择的话,只需要把这几个单选按钮的元件都选中,然后在属性中设置一个单选按钮的组名称,把它们放到一个组里就能实现唯一被选中的效果。最后,如果有需要默认被选中的单选按钮,只需在编辑区点击该元件前面的圆圈,将其改成选中的状态。(图49)

49

(图49)

4.3.7  文本框类型

在元件的属性中,有些元件会具有自己独特的属性,比如文本框。

文本框的属性中,选择不同的【类型】,在生成或预览后会呈现不同的效果。但是这些效果并不是每种浏览器都支持。比如下图中的日期和查找两种类型在IE和火狐浏览器中是无效的。(图50)

50

(图50)

经过测试三种主流浏览器的支持结果如下:

IE9:文本、密码、文件

谷歌:文本、密码、Number、查找、文件、日期、Month、Time

火狐:文本、密码、Email、Number、Url、文件

我们能看到IE9的支持最少,而火狐和谷歌有各自能够支持的类型。谷歌浏览器对日期类型支持很好,而火狐浏览器则对Number 、Email、Url三种类型提供了验证支持,表现为如果输入错误的内容,文本框边框会变成红色。

4.3.8.  文本框文字提示

在AxureRP7.0中文本框的属性中提供了一个文字提示的功能。它能够实现生成后文本框中带有提示,当点击文本框时提示并不消失,只有输入文字时,提示才会消失。文字提示也能设置文字的样式,来满足我们不同的需求。(图51)

51

(图51)


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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. [谨遵楼嘱,好好练习] 1 单选按钮.assign radio group 2 文本框类型:文本,日期,密码等;文本提示,输入字后隐藏
    雪海2015-09-23 16:53 回复
  2. ”火狐浏览器则对Number 、Email、Url三种类型提供了验证支持,如果输入错误,文本框边框会变成红色。“我的实现不出啊?需要设置什么才能验证吗?
    llllll2016-01-03 14:07 回复
    • 我的可以
      南在南方2016-01-13 19:54 回复
      • 请问你的火狐是什么版本
        藕倪2016-02-17 18:09 回复
    • 我的也不行,不知道跟火候版本是不是有关系
      藕倪2016-02-17 18:08 回复
  3. 提示语直接点击文本框就消失怎么设置呢?
    kimmy2016-01-19 17:12 回复
    • 小楼一夜听春语
      7.0没有这个功能。
      小楼一夜听春语2016-01-20 08:58 回复
  4. 想提供密码可见的选择,是不是就不能简单的使用自带的密码文本框?
    June2016-07-18 20:47 回复