State Toggle

Use a multi-state box to toggle between different states.

初心者

出版された：

February 12, 2020

によって

アンカー 1

開発者を雇う

説明例

In this example we use a multi-state box element to display multiple views. In our case, we have two views, one showing the front and the other showing the back of a mobile phone.

Pressing a button changes the state of the multi-state box which toggles the view.

コード例

タブ1

タブ2

タブ3

このコードによる解決は複雑になる可能性がある。

信頼できるベロ開発者を雇う

どのように構築したか

ページ要素

In our site we added the following page elements:

Multi-State Box element: Holds the images and texts for the "front" and "back" states.
Image and text elements: The contents of the two states.
Four buttons: Two buttons with the ID "Front Face" and two with the ID "Back Face". Each set of two buttons with the same label has a black version and a white version. The buttons with the same labels are layered on top of each other.

コード

The onReady() function adds an event handler to each of the four buttons. There are two possible event handlers defined as the toggleFront() and toggleBack() functions. The toggleFront() function switches from the "front" state to the "back" state and toggleBack() switches the states in the other direction.

On each state change:

The show() and hide() functions are used to create a gliding effect on the white buttons, making the buttons look like a toggle switch.
The multi-state box changes states, toggling the view that is shown to site visitors. Note that the animations on the elements in the state box are set in the Editor and occur each time the state changes.