Description
It is a special component used to refresh (reload) the page contents by pulling it.The following code shows how to refresh the page content:
<div class="page"> <!-- Page content should have additional "pull-to-refresh-content" class --> <div class="page-content pull-to-refresh-content" data-ptr-distance="55"> <!-- Default pull to refresh layer--> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div> <!-- usual content below --> <div class="list-block"> ... </div> </div> </div>The below classes are used in refresh:
- page-content: It has a additional pull-to-refresh-content class and its required to enable pull to refresh.
- pull-to-refresh-layer: It is a hidden layer which is used to pull to refresh visual element and it is just preloader and arrow.
- data-ptr-distance="55": This is additional attribute that allows you to set custom pull to refresh trigger distance and its default value is 44px.
Pull To Refresh Events
In pull to refresh there are same JavaScript events, those are given in below table:| S.N. | Event & Description | Target |
|---|---|---|
| 1 | pullstart It will be triggered whenever you start pulling to refresh content. |
Pull To Refresh content.
<div class="pull-to-refresh-content"> |
| 2 | pullmove It is used to triggered during you are pulling to refresh content. |
Pull To Refresh content.
<div class="pull-to-refresh-content"> |
| 3 | pullend It will be triggered whenever you release pull to refresh content. |
Pull To Refresh content.
<div class="pull-to-refresh-content"> |
| 4 | refresh This event will triggered, when you pull to refresh enters in "refreshing" state. |
Pull To Refresh content.
<div class="pull-to-refresh-content"> |
| 5 | refreshdone It will be triggered after refresh is done and it goes back to initial state. This will be done after calling pullToRefreshDone method. |
Pull To Refresh content.
<div class="pull-to-refresh-content"> |
| S.N. | App's Methods & Description |
|---|---|
| 1 |
myApp.pullToRefreshDone(ptrContent)
It is used to reset pull-to-refresh content. |
| 2 |
myApp.pullToRefreshTrigger(ptrContent)
It is used for trigger to refresh on specified pull to refresh content. |
| 3 |
myApp.destroyPullToRefresh(ptrContent)
It is used for destroy/disable pull to refresh on specified pull to refresh content. |
| 4 |
myApp.initPullToRefresh(ptrContent)
It is used to initialize/enable pull to refresh content. |
Example
The below example demonstrates use of refresh component that initiates the refreshing of a page contents:<!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>Pull To Refresh</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> <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">Pull To Refresh</div> <div class="right"> </div> </div> </div> <div class="page-content pull-to-refresh-content"> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div> <div class="list-block media-list"> <ul> <li class="item-content"> <div class="item-media"><img src="/framework7/images/apple.png" width="44"></div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">apple</div> </div> </div> </li> <li class="item-content"> <div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">strawberry</div> </div> </div> </li> <li class="item-content"> <div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">Mango</div> </div> </div> </li> </ul> <div class="list-block-label"> <p>Just pull page down to let the magic happen.</p> </div> </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; // Dummy Content var fruits = ['mango', 'orange', 'watermelon', 'banana']; // Pull to refresh content var ptrContent = $$('.pull-to-refresh-content'); // Add 'refresh' listener on it ptrContent.on('refresh', function (e) { // Emulate 2s loading setTimeout(function () { var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100); var fruit = fruits[Math.floor(Math.random() * fruits.length)]; var itemHTML = '<li class="item-content">' + '<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' + '<div class="item-inner">' + '<div class="item-title-row">' + '<div class="item-title">' + fruit + '</div>' + '</div>' + '</div>' + '</li>'; // Prepend new list element ptrContent.find('ul').prepend(itemHTML); // When loading done, we need to reset it myApp.pullToRefreshDone(); }, 2000); }); </script> </body> </html>
Output
Let's carry out the following steps to see how above code works:-
Save above HTML code as pull_to_refresh.html file in your server root folder.
-
Open this HTML file as http://localhost/pull_to_refresh.html and output as below gets displayed.
-
When the user pulls down, the page will be refreshed with the contents.
No comments:
Post a Comment