- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Swipeout Events
Description
To detect how a user interacts with the swipeout, you can use swipeout events. The following table lists the events supported by the Framework7 −
S.No | Event & Description | Target |
---|---|---|
1 | swipeout This event will be triggered when you move swipeout element. |
Swipeout Element <li class = "swipeout"> |
2 | open Whenever the swipeout begins its opening animation, this event will be triggered. |
Swipeout Element <li class = "swipeout"> |
3 | opened Whenever the swipeout completes its opening animation, this event will be triggered. |
Swipeout Element <li class = "swipeout"> |
4 | close Whenever the swipeout closing animation is initiated, this event will be triggered. |
Swipeout Element <li class = "swipeout"> |
5 | closed Whenever the swipeout closing animation completes, this event will be triggered. |
Swipeout Element <li class = "swipeout"> |
6 | delete Whenever the swipeout element begins its delete animation, this event will be triggered. |
Swipeout Element <li class = "swipeout"> |
7 | deleted This event will be triggered after the element finishes its delete animation right before it will be removed from DOM. |
Swipeout Element <li class = "swipeout"> |
Example
The following example demonstrates the use of swipeout events in Framework7−
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>Swipeout events</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> </head> <body> <div class = "views"> <div class = "view view-main"> <div class = "pages"> <div data-page = "home" class = "page navbar-fixed"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "left"> </div> <div class = "center">Swipeout Events</div> <div class = "right"> </div> </div> </div> <div class = "page-content"> <div class = "list-block"> <ul> <li class = "swipeout"> <div class = "swipeout-content item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">Item title</div> <div class = "item-after">Label</div> </div> </div> <div class = "swipeout-actions-right"><a href = "#" class = "action1">Task</a><a href = "#" data-confirm = "Are you sure to delete this item?" class = "swipeout-delete">Delete</a></div> </li> <li class = "swipeout"> <div class = "swipeout-content item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">With confirm title</div> <div class = "item-after"> <span class = "badge">78</span></div> </div> </div> <div class = "swipeout-actions-right"><a href = "#" class = "action1">Task</a><a href = "#" data-confirm = "Are you sure to delete this item?" data-confirm-title = "Delete?" class = "swipeout-delete">Delete</a></div> </li> </ul> </div> </div> </div> </div> </div> </div> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script> var myApp = new Framework7(); var $$ = Dom7; $$('.swipeout').on('deleted', function () { myApp.alert('Item removed'); }); $$('.swipeout').on('opened', function () { myApp.alert('Item opened'); }); $$('.swipeout').on('closed', function () { myApp.alert('Item closed'); }); </script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as list_views_swipe_events.html file in your server root folder.
Open this HTML file as http://localhost/list_views_swipe_events.html and the output is displayed as shown below.
The example provides user interaction with the swipeout by using the swipeout events and these events will be triggered when you move, open, close and delete the swipeout element.
To Continue Learning Please Login
Login with Google