实现Tab页效果_鼠标划过时显示Tab页

第一步,制作Tab页头
首先新建页面, 新建一个正方型(Rectangle),并设置形状为开口朝下(Rounded Top).如图

• 注:其实使用按钮形状(Button Shape)感觉和正方型是一个效果.可能开发者认为正方型使用最普遍,所以才单独存放正方型.如图(左:正方型 右:按钮形状)
  

第二步,制作Tab页内容

首先再创建一个正方型

• 因为后创建的控件默认显示在最上(如图),所以我们将Tab页头设置成置顶(如图)

接下来为了达到对比的效果,需要重复第一步与第二步.并且加上文字加以区别.(如图)

第三步,使用动态面板区分Tab页内容

首先创建动态面板,并建立二个层(如图)

其次,将二个Tab页内容分别放入对应的层内(如图)

• 动态面板默认显示第一层中的内容(如图)

最后设置动态面板的显示状态为置底(不设置成置底也可以)(如图)

第四步,用OnMouseEnter(焦点移入,即鼠标划入)动作设置鼠标事件

当划入"第一个Tab页"时,显示动态面板的第一层(如图)

当划入"第二个Tab页"时,显示动态面板的第二层(如图)

最后,查看效果(如图)

• 在此,作者只提供大家Axure中使用OnMouseEnter达到Tab页鼠标划动页标签的效果,如果想做到与真实网页相同的效果是可以实现的,但作者不提倡使用,因为毕竟这不是网页,Axure提供的是页面结构与数据,功能的体现,美观方面不应在这里体现,这里看重的是对应需要的反应速度.