Mockplus prototype interaction with me 3-Know "link"

On two times, we've made a practical interaction (auto-disappearing message box), and made a fancy but useless thing, spinning the windmill.

Slowly down the road, we first to understand the "basic knowledge", mockplus almost no need to learn, but, if you know a little more, get started faster.

Mockplus can quickly set up interactions, where there is a thing that you must be familiar with, namely "link points."

With a component selected, a small dot appears at the top right of the component,

650) this.width=650; "Src=" https://cdns-mockplus-cn.alikunlun.com/image/2016/01/ 0d484870-0698-44b3-bdea-e9143b9a1685.png "style=" border:0px;margin:0px;padding:0px;vertical-align:baseline; background-position:0px 0px; "alt=" 0d484870-0698-44b3-bdea-e9143b9a1685.png "/>

Moving the mouse over the dot will bring up a toolbar,

650) this.width=650; "Src=" https://cdns-mockplus-cn.alikunlun.com/image/2016/01/ 23101c5f-69e2-4605-859b-f0e09137c5a5.png "style=" border:0px;margin:0px;padding:0px;vertical-align:baseline; background-position:0px 0px; "alt=" 23101c5f-69e2-4605-859b-f0e09137c5a5.png "/>

When we need to do the page link, press and hold this small dot, do not release the mouse, to the project tree pull, reached a page, let go. In this way, a link is made between the button and the target page, which indicates that when I click the button, it jumps to the target page.

650) this.width=650; "Src=" https://cdns-mockplus-cn.alikunlun.com/image/2016/01/ 48ca6d9e-e905-477c-aea7-0a27b3817f8f.png "style=" border:0px;margin:0px;padding:0px;vertical-align:baseline; background-position:0px 0px; "alt=" 48ca6d9e-e905-477c-aea7-0a27b3817f8f.png "/>

Press F5, enter the demo, click this button, at this point, you see the page jumps.

When we need to do the component interaction in the page (for example, click the button, the picture moves to the right), press and hold the small dot, do not release the mouse, pull on the picture, after reaching the picture, release (after that, will pop up a dialog box to select Interactive commands). This makes a link between the button and the Picture page, which shows that when I click the button, the picture moves.

650) this.width=650; "Src=" https://cdns-mockplus-cn.alikunlun.com/image/2016/01/ 8d30ff8b-9064-410e-b9ed-46e8add4d57c.png "style=" border:0px;margin:0px;padding:0px;vertical-align:baseline; background-position:0px 0px; "alt=" 8d30ff8b-9064-410e-b9ed-46e8add4d57c.png "/>

See the dialog box, select Move, and then OK.

650) this.width=650; "Src=" https://cdns-mockplus-cn.alikunlun.com/image/2016/01/ 7a74df5f-efcb-48b3-94ab-74d906ee6376.png "style=" border:0px;margin:0px;padding:0px;vertical-align:baseline; background-position:0px 0px; "alt=" 7a74df5f-efcb-48b3-94ab-74d906ee6376.png "/>

Press F5, enter the demo, click on this button, and you can see the picture move now.

650) this.width=650; "Src=" https://cdns-mockplus-cn.alikunlun.com/image/2016/01/ 55b47b25-0269-445b-bdef-8cf8c9130689.gif "style=" border:0px;margin:0px;padding:0px;vertical-align:baseline; background-position:0px 0px; "alt=" 55b47b25-0269-445b-bdef-8cf8c9130689.gif "/>

All right, have a rest.

About links and links widget, there are some things you can understand, but we'll talk about it later.

Have a cup of coffee first.

650) this.width=650, "src=" Https://www.mockplus.cn/images/logo_footer.png "width=" "style=" Border:0px;margin : 0px;padding:0px;vertical-align:middle;color:rgb (51,51,51); background:0px 0px; "/>

Simple and efficient prototyping tools

Focus on design, not tools

Recent Blogs

Nine reasons to use Mockplus Mon Sep

Mockplus's main application population Mon Sep

Contact information

Mockplus prototype interaction with me 3-Know "link"