《原型图之选项卡》

前言:

   自学习以来，经历了VB百例、学生信息管理系统、第一次机房收费系统、机房收费系统重构版等内容都涉及到了选项卡的问题，在相应的软件开发环境中，选项卡作为一个控件，只需要轻轻一拖拽到相应的窗体上，一个成形的选项卡就华丽丽地呈现在我们的面前。然而在机房收费系统合作版，秉持文档驱动的理念，正式地按照软件开发的流程进行，进而在画原型图时学习了如何制作选项卡，下面小编就为大家详细解说。

工具：

Axure   下载地址：http://www.woshipm.com/xiazai/188927.html/comment-page-3 

    首先安装之后，需要将汉化包的文件中名为lang的文件复制到Axure安装的目录下，然后打开Axure程序即为汉化之后的程序。

步骤：

A、

首先，进入Axure的主界面：

B、

将控件栏中的矩形1拖拽到页面工作区，使之成为选项卡所存在的区域：

C、

将控件栏中的动态面板拖拽到矩形1内：

 D、  

    双击该动态面板，弹出“面板状态管理”对话框，自行设定动态面板名称，点击对话框上的“+”按钮，然后增添相应的选项卡，选项卡的个数由需求而决定，然后右击修改各个选项卡的名称，也可以按F2重命名。

 E、  

    编辑每个选项卡的页面内容，双击动态面板管理栏中的“购卡”，页面工作区将出现购卡的编辑页面，然后向页面内拖入一个矩形作为选项卡的主体面板和4个矩形控件，然后调整4个矩形控件与作为选项卡的主体面板的矩形的位置，使之呈现如图所示的效果：

F、

将选项卡1即购卡选项卡的层次设置为底层，然后将购卡页面需要呈现的相关内容，依次画出，如图所示：

G、

按照以上步骤，依次制作充值、退卡、临时用户、汇总、退出等选项卡，然后将4个选项卡设置为图片，右击

H、

设置选项卡之间动态跳转：

点击图片选项卡“购卡”，为其添加鼠标单击事件，如图：

    双击控件属性栏中的“鼠标单击时”按钮，出现用例编辑对话框，按照如图所示依次点击，即可实现从“购卡”到“充值”的动态跳转，其余几个选项卡按钮亦如是。

    最终的效果如图所示：

编者心语：

    如果你不能飞，那就跑；如果跑不动，那就走；实在走不动了，那就爬。记住：无论做什么，都要勇往直前；无论有多难，都要多坚持一下。