cool hit counter Axure implements Tab tab switching_Intefrankly

Axure implements Tab tab switching


Copyright: This is an original post by the blogger and may not be reproduced without the blogger's permission. https://blog.csdn.net/huyuyang6688/article/details/41043255

In the process of drawing prototypes with Axure these days, I need to achieve the effect of Tab tab switching, but there is no widget similar to the Tab control in Axure, so I can use the Dynamic Panel in Axure to achieve it.

This article takes Axure 7.0, which has already been Chineseized, as an example, so those who are not very good at English can Chineseize it first (pay attention to the version when you Chineseize it, the Chinese files vary slightly from version to version).

The steps to achieve this are as follows.

1. drag a dynamic panel widget into the page.

2. add several states to the dynamic panel widget.

To do this, double click on the dynamic panel, click on the plus sign on the left to add states, and here change the names of the four added states to "Tab 1, Tab 2 ......"

By clicking OK, this dynamic panel has 4 states, each corresponding to a tab page.

3. Edit the page content of each state (tab) (here you can start by editing the public content in each tab in tab 1), double-click on tab 1 to enter the edit page for the state, drag a rectangle (as the body panel of the tab) and four image controls into the page.

Here, for display purposes, four images were made as tabbed table headers, all four without borders at the bottom:.

Upload these four images and adjust the position of the images with respect to the rectangle (so that the top border of the rectangle blocks the bottom border of the four images) and the hierarchy (placing the rectangle at the top) until the effect is.

Then place the level of tab 1 at the top, and for identification purposes, drag in the rectangle what needs to be placed in tab 1 (here drag in a single line of text).

At this point the page reaches the effect of tab 1, then all follow this method to modify tab 2, tab 3, tab 4. The content in the rectangle in each tab (that is, the state) is the content of the body to be displayed for each tab.

4. Set dynamic jumps between tabs.

In tab 1, click on image tab 1 to add a mouse click event to it

The new action is "Set Panel State" under Dynamic Panel, and the action is Set State to tab 1, as shown below.

At this point, run it to achieve the effect of clicking "Tab 1" to switch to the panel of Tab 1, the same way to set the other three buttons.

tip

The above example of the four tabs is the four states of the dynamic panel, these states have some common content, such as the tabs of the four buttons (that is, the four images in the above example) and the corresponding click event of each button, so in order to save time and efficiency, you can first make a tab of the content to, and then you can directly copy the tab of the public content part of the other tabs, so you can also avoid poorly adjusted position and lead to click each tab switch will "jump" back and forth (in Axure from one copy of the content to another, the content itself, the properties, events, coordinates and other properties are unchanged).

Now you can also download tab control plugins from Axure's official website, and there is no shortage of powerful, beautiful controls. Click to jump to the download page


Recommended>>
1、Im asking if youre afraid The worlds number one private equity fund Bridgewater officially enters China to cut leeks with detailed explanation of investment strategy
2、support vector machine
3、The projectiondomainshift problem in zeroexample learning
4、Write a Blockchain on iOS
5、Exercise 10 What is that

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号