欢迎登陆陪学网
欢迎注册陪学网账号
密码找回
显示、隐藏动态面板
时长: 指导老师:Axure官网 困难程度:容易
本节动态面板基础课程学习使用动态面板显示和隐藏页面内容,Onclick事件的多用例设置及“显示面板”动作。

显示、隐藏错误信息提示框

步骤1:添加动态面板部件

首先,打开ShowHiddenPanel.rp文件的Login Error页面
在这个范例中,创建一个错误信息提示框,当登陆失陆时,显示错误信息提示。
部件窗口拖入动态面板到线框图在Login按钮下方。

步骤2:命名部件

选中动态面板,在部件属性窗口的顶部,命名动态面板为“Error Panel”
注意:部件名称在动态面板管理窗口也一起被修改,如果窗口未显示,点击主菜单栏“视图->动态面板管理”。

步骤3:创建错误信息

下一步,在动态面板中创建错误信息,动态面板管理窗口双击状态1打开状态编辑页面。
在状态页面中有蓝色虚线,是动态面板的轮廓线,添加矩形部件并调整矩形大小,适应轮廊线大小。用样式工具设置错误信息框为矩形红色背景,白色字体。

步骤4:设置隐藏面板

部件样式设置完成,返回Login Error页面(可以用线框图窗口的标签切换页面,也可以双击站点地图窗口的页面名称,打开页面)。
在线框图中选择错误信息面板,右键,快捷菜单选择“编辑动态面板->设为隐藏”。即在页面中默认隐藏动态面板,动态面板覆盖层变为黄色。

步骤5:添加“如果登陆成功”用例

下一步,在登陆按钮添加交互,第一个用例,如果登陆成功,打开My Account页面。
选择登陆按钮,在Onclick事件添加用例,编辑用例描述为:如果登陆成功。(步骤1:在用例编辑器中编辑用例描述)。下一步,添加“在当前窗口打开链接”动作,配置“My Account”页面,点击确定,关闭用例编辑器。

步骤6:添加“如果登陆失败”用例

第二个用例,如果登陆失败,显示错误信息。
在Onclick事件添加第二个用例,编辑用例描述“如果登陆失败”。下一步,添加“显示面板”动作,配置显示错误信息提示面板。点击确定。

步骤7:生成原型

生成原型(主菜单栏选择“生成->原型”)。在登陆按钮上有两个状态。点击“如果登陆失败”显示错误信息,点击“如果登陆成功”页面链接到My Account页面。