- 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 - Panel Events
Description
To detect how a user interacts with the panel, you can use the panel events. It can also be used to do something in JS whenever panel is opened/closed.
The following table lists the events supported by Framework7 −
S.No | Event & Description | Target |
---|---|---|
1 | open Whenever the panel begins its opening animation, this event will be triggered. |
Panel Element <div class = "panel"> |
2 | opened Whenever the panel completes its opening animation, this event will be triggered. |
Panel Element <div class = "panel"> |
3 | close Whenever the panel closing animation is initiated, this event will be triggered. |
Panel Element <div class = "panel"> |
4 | closed Whenever the panel closing animation completes, this event will be triggered. |
Panel Element <div class = "panel"> |
Example
The following example demonstrates the panel events in the Framework7. The example detects the user interaction with the panel and displays the event messages accordingly.
<!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>Panel 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 = "panel-overlay"></div> <div class = "panel panel-left panel-reveal"> <div class = "content-block"> <h2>Left Panel content</h2> <p><a href = "#" data-panel = "right" class = "open-panel">Open Right Panel</a></p> <p><a href = "#" class = "close-panel">Close me</a></p> </div> </div> <div class = "panel panel-right panel-cover"> <div class = "content-block"> <h2>Right Panel content</h2> <p><a href = "#" data-panel = "left" class = "open-panel">Open Left Panel</a></p> <p><a href = "#" class = "close-panel">Close me</a></p> </div> </div> <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">Side Panel Events</div> <div class = "right"> </div> </div> </div> <div class = "page-content"> <div class = "content-block"> <p> <a href = "#" class = "open-panel">Open Left Panel</a></p> <p> <a href = "#" data-panel = "right" class = "open-panel">Open Right Panel</a></p> </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; $$('.panel-left').on('opened', function () { myApp.alert('Left panel opened!!'); }); $$('.panel-left').on('close', function () { myApp.alert('Left panel is closing!!'); }); $$('.panel-right').on('open', function () { myApp.alert('Right panel is opening!!'); }); $$('.panel-right').on('closed', function () { myApp.alert('Right panel 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 sidepanels_events.html file in your server root folder.
Open this HTML file as http://localhost/sidepanels_events.html and the output is displayed as shown below.
This example displays the left panel when you click the Open Left Panellink and displays the right panel when you click the Open Right Panel link and the panel event will be triggered when the panel stats opening and closing animation.
To Continue Learning Please Login
Login with Google