- 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 - Overswipe
Description
The overswipe action is triggered automatically when you swipe too much. The following list describes a few more points on an overswipe.
The overswipe can be applied to an action button by using the swipeout-overswipe class.
It can only be used on last button in right swipeout and only on first button in left swipeout actions.
You need to add appropriate event listener to overswipe button.
During overswipe, the swipeout-overswipe-active class will be added to overswipe button, which can be used for extra styling.
Example
The following example displays the items if there are too many swipe actions by using the overswipe 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>Overswipe</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">Swipe To Delete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "list-block media-list">
<ul>
<li class = "swipeout">
<div class = "swipeout-content">
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Amayon</div>
<div class = "item-after">7:10</div>
</div>
<div class = "item-subtitle">Your order has been shipped</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "swipeout-overswipe bg-pink reply">Reply</a><a href = "#" class = "bg-blue forward">Forward</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "mark bg-lightblue">Spam</a><a href = "#" class = "swipeout-delete swipeout-overswipe">Delete</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content">
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">VodafoneZone</div>
<div class = "item-after">10:15</div>
</div>
<div class = "item-subtitle">Bill Payments</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "swipeout-overswipe bg-pink reply">Reply</a><a href = "#" class = "bg-blue forward">Forward</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "mark bg-lightblue">Spam</a><a href = "#" class = "swipeout-delete swipeout-overswipe">Delete</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content">
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Popular in your network</div>
<div class = "item-after">19:14</div>
</div>
<div class = "item-subtitle">New messages from John Doe</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "swipeout-overswipe bg-pink reply">Reply</a><a href = "#" class = "bg-blue forward">Forward</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "mark bg-lightblue">Spam</a><a href = "#" class = "swipeout-delete swipeout-overswipe">Delete</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content">
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Adam WillSmith</div>
<div class = "item-after">22:44</div>
</div>
<div class = "item-subtitle">Car Insurance renewal</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "swipeout-overswipe bg-pink reply">Reply</a><a href = "#" class = "bg-blue forward">Forward</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "mark bg-lightblue">Spam</a><a href = "#" class = "swipeout-delete swipeout-overswipe">Delete</a></div>
</li>
<li class = "swipeout">
<div class = "swipeout-content">
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Twitter</div>
<div class = "item-after">23:22</div>
</div>
<div class = "item-subtitle">Follow Vivekananda Fans and Bill Gates</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</div>
<div class = "swipeout-actions-left"><a href = "#" class = "swipeout-overswipe bg-pink reply">Reply</a><a href = "#" class = "bg-blue forward">Forward</a></div>
<div class = "swipeout-actions-right"><a href = "#" class = "mark bg-lightblue">Spam</a><a href = "#" class = "swipeout-delete swipeout-overswipe">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;
$$('.mark').on('click', function () {
myApp.alert('Spam');
});
$$('.reply').on('click', function () {
myApp.alert('Reply');
});
$$('.forward').on('click', function () {
myApp.alert('Forward');
});
</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_basic.html file in your server root folder.
Open this HTML file as http://localhost/list_views_swipe_basic.html and the output is displayed as shown below.
This example triggers an overswipe action automatically when you swipe too much and the script will automatically trigger the "click" event on overswipe button.
framework7_list_views.htm
Advertisements
To Continue Learning Please Login