説明例
In this example, we added a context menu to each item in a repeater. When site visitors click a button in an item, a container box with menu choices appears under the clicked button, simulating the appearance of a dropdown menu. Site visitors can then click a menu choice to perform an action, such as editing the item’s text or deleting the item.
どのように構築したか
ページ要素
First we added a repeater to our page. Then we attached the following elements to the repeater:
Text elements: For displaying text in each item
Quick Actions button: Clicking it opens the context menu
Text input: For editing the title of the repeater item
Icon button: For applying the edited text to the title
The context menu is not part of each repeater item, but rather a single container box that is dynamically positioned under the specific Quick Actions button that was clicked. The menu includes the following elements:
Edit Item button: Clicking it allows site visitors to edit the repeater item’s title
Delete Item button: Clicking it deletes the current item from the repeater
コード
Our code does the following:
When the page loads, show a preloader by switching to the ‘loader’ state of a multi-state box.
Load data into the repeater using the getDataFromBackend function and switch to the ‘withData’ state of a multi-state box.
If a Quick Actions button is clicked, calculate the position of the current repeater item and display the context menu under the Quick Actions button using the wix-animations API.
If a site visitor clicks the Edit Item button, show the text input element, allowing the site visitor to edit the title. Hide the input after the visitor clicks the icon button for applying the edit. Hide the context menu.
If a site visitor clicks the Delete Item button, delete the item. Hide the context menu.
関連例
これは役に立ったか？
|
ご意見ありがとう！
Repeater Context
Change a specific item in a repeater when a site visitor interacts with it
初心者
タブ
Create tabs using a multi-state box
初心者
Preloader for File Upload
Display a preloader while a file is uploading
初心者