AxureRP8实战手册-案例11(动态面板:登录面板切换)

AxureRP8.0教程 小楼一夜听春语 16986℃ 0评论

 案例11.   动态面板:登录面板切换

案例来源:

淘宝-用户登录

 

案例效果:

  • 快速登录:(图1-70)

1_70

 

  • 账户密码登录:(图1-71)

 

1_71

 

案例描述:

点击“快速登录”与“账户密码登录”按钮时,在两个登录面板间切换。

 

元件准备:

  • 页面中:(图1-72)

 

1_72

  • 动态面板“LoginPanel”各个状态中:(图1-73)

1_73

 

包含命名:

  • 动态面板(用于制作登录面板):LoginPanel
  • 动态面板状态(用于包含快速登录内容):State1
  • 动态面板状态(用于包含账户密码登录内容):State2

 

思路分析:

  • 动态面板可以添加多个状态;(操作步骤1)
  • 每个状态中可以添加不同的内容;(操作步骤2~4)
  • 设置两个登录按钮的样式切换;(操作步骤6)
  • 点击不同的登录按钮切换不同的状态。(操作步骤7~9)

 

操作步骤:

1、拖放一个动态面板元件到页面中,双击动态面板,打开面板状态管理;将动态面板命名为“LoginPanel” ,然后,点击【+】添加一个状态;然后,双击状态名称“State1”进入这个状态的编辑界面;(图1-74)

1_74

2、为“State1”添加元件,组成相应的内容;完成后,关闭“State1”的标签回到页面中;(图1-75)

1_75

3、参照“操作步骤1”双击动态面板,打开面板状态管理界面,双击状态名称“State2”,进入进入状态“State2”的编辑界面;

4、为状态“State2” 添加元件,组成相应的内容;完成后,关闭“State2”的标签回到页面中;(图1-76)

1_76

 

5、此时页面中动态面板只显示了一部分“State1”中的内容,点中动态面板,在属性中勾选【自动调整为内容尺寸】;或者,在动态面板上点击<鼠标右键>,在菜单中选择【自动调整为内容尺寸】;(图1-77)

1_77

6、拖入2个矩形到画布,作为登录按钮,摆放在动态面板的上层;设置默认样式(灰色字体与灰色边框)以及【选中】的交互样式(黑色字体与橙色边框);勾选“快速登录”属性中的【选中】,让其在页面打开时即为选中后的状态;在元件样式中设置这2个矩形的只保留底部边框(参考“基础7”);最后,为这2个矩形{设置选项组名称}为“LoginButton”;(图1-78)

1_78

7、为“快速登录”按钮的【鼠标单击时】事件添加“用例1”,设置动作为【选中】“当前元件”;

  • 用例动作设置:(图1-79)

1_79

8、继续上一步,添加动作【设置面板状态】“LoginPanel”为“State1”。

  • 用例动作设置:(图1-80)

1_80

9、参照操作步骤8与操作步骤9,为“账户密码登录”按钮设置【鼠标单击时】事件添加“用例1”,设置第1个动作为【选中】“当前元件”;第2个动作为【设置面板状态】“LoginPanel”为“State2”。

  • 事件交互设置:(图1-81)

1_81

 

补充说明:

  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)

特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例11(动态面板:登录面板切换)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 案例2做百度页面的时候我已经做了动态面板了, 吼吼吼~ 感谢!
    小情兽丶2016-07-16 14:15 回复
  2. 不错的
    我是宝宝2016-11-03 14:40 回复
  3. 受教了,刚开始接触这个,还是觉得自己写CSS 和JS爽,但是上手之后,发现我靠,这玩意儿不仅让你爽,还能GC
    土豆片啊妈的2016-12-27 17:00 回复
  4. 小楼老师,为什么按照上面的步骤做完以后,发现点击右边的“账号密码登录”时下面的橙色横线会同时出现?
    VIN2017-04-17 22:08 回复
    • 我之前也是出现这个情况,可以在快速登录和密码登录中添加一个状态,即选中快速登录时,让密码登录状态值为false,选中密码登录时,快速登录状态为false。
      换个昵称2017-06-26 11:19 回复
    • 要把密码登录和快速登录设置成一个选项组,看第6部最后一句
      jqseven2017-08-07 13:45 回复
  5. 小楼老师,为什么点了“账户密码登录”之后,再点“快速登录”时,切换不到二维码界面,还是账号界面?
    木小鱼2017-06-01 15:31 回复
  6. 为什么书后面提供的二维码链接的素材总缺图片呢? 比如这个案例的微博和支付宝图片就没有。
    Irene2017-07-06 15:21 回复
    • 小楼一夜听春语
      扫描280页右侧二维码 到群里下载 有些图片素材出版社考虑版权风险给删掉了
      小楼一夜听春语2017-07-07 09:10 回复
  7. 初始状态时,快速登录应该是黑色字体,下面是橙色线,点击账号登录后快速登录和线变成灰色,这个没有实现。。。请 小楼老师指教
    安哥2017-11-24 15:57 (18小时前)回复