Framework7 - Refresh

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>

The following classes are used in refresh −

  • page-content − It has an 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 a preloader and an 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 some JavaScript events, which are given in the following table −

S.No 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 triggered when 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 be triggered when the pull to refresh enters in the "refreshing" state.

Pull To Refresh content.

<div class="pull-to-refresh-content">
5

refreshdone

It will be triggered after it is refreshed and it goes back to the initial state. This will be done after calling pullToRefreshDone method.

Pull To Refresh content.

<div class="pull-to-refresh-content">

There are App's methods that can be used with Pull to Refresh.

S.No App's Methods & Description
1

myApp.pullToRefreshDone(ptrContent)

It is used to reset pull-to-refresh content.
2

myApp.pullToRefreshTrigger(ptrContent)

It is used to trigger to refresh on specified pull to refresh content.
3

myApp.destroyPullToRefresh(ptrContent)

It is used to 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.

Where ptrContent is used to HTMLElement or string to pull-to-refresh-content to reset/trigger or disable/enable.

Example

The following example demonstrates the 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>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given 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 the output is displayed as shown below.

  • When the user pulls down, the page will be refreshed with the contents.

Advertisements