फ्रेमवर्क 7 - ताज़ा करें

विवरण

यह एक विशेष घटक है जिसका उपयोग पृष्ठ की सामग्री को ताज़ा करने (पुनः लोड करने) के लिए किया जाता है।

निम्न कोड दिखाता है कि पृष्ठ की सामग्री को कैसे ताज़ा किया जाए -

<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>

निम्नलिखित वर्गों को ताज़ा करने में उपयोग किया जाता है -

page-content- इसमें एक अतिरिक्त पुल-टू-रिफ्रेश-कंटेंट क्लास है और इसके लिए आवश्यक है कि पुल को रिफ्रेश करने के लिए।
pull-to-refresh-layer- यह एक छिपी हुई परत है, जिसका उपयोग दृश्य तत्व को ताज़ा करने के लिए किया जाता है और यह सिर्फ एक प्रीलोडर और एक तीर है।
data-ptr-distance = "55" - यह अतिरिक्त विशेषता है जो आपको ट्रिगर दूरी को रिफ्रेश करने के लिए कस्टम 'पुल' सेट करने की अनुमति देता है और इसका डिफ़ॉल्ट मान 44px है।

घटनाओं को ताज़ा करने के लिए खींचो

'पुल टू रिफ्रेश' में कुछ जावास्क्रिप्ट घटनाएँ हैं, जो निम्न तालिका में दी गई हैं -


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

S.No	घटना विवरण	लक्ष्य
1	pullstart जब भी आप सामग्री को ताज़ा करने के लिए खींचना शुरू करेंगे तो यह ट्रिगर हो जाएगा।	सामग्री को ताज़ा करने के लिए खींचो। `<div class = "pull-to-refresh-content">`
2	pullmove यह तब ट्रिगर होता है जब आप सामग्री को ताज़ा करने के लिए खींच रहे होते हैं।	सामग्री को ताज़ा करने के लिए खींचो। `<div class="pull-to-refresh-content">`
3	pullend जब भी आप ताज़ा सामग्री के लिए पुल जारी करेंगे तो यह ट्रिगर हो जाएगा।	सामग्री को ताज़ा करने के लिए खींचो। `<div class="pull-to-refresh-content">`
4	refresh जब "ताज़ा" स्थिति में प्रवेश करने के लिए पुल ताज़ा करने के लिए इस घटना को चालू किया जाएगा ।	सामग्री को ताज़ा करने के लिए खींचो। `<div class="pull-to-refresh-content">`
5	refreshdone इसे ताज़ा होने के बाद चालू किया जाएगा और यह प्रारंभिक अवस्था में वापस चला जाएगा। यह पुलटॉर्फरेशडोन विधि को कॉल करने के बाद किया जाएगा ।	सामग्री को ताज़ा करने के लिए खींचो। `<div class="pull-to-refresh-content">`

ऐप के ऐसे तरीके हैं जिनका उपयोग पुल टू रिफ्रेश के साथ किया जा सकता है।

S.No	ऐप के तरीके और विवरण
1	myApp.pullToRefreshDone(ptrContent) इसका उपयोग पुल-टू-रिफ्रेश कंटेंट को रीसेट करने के लिए किया जाता है।
2	myApp.pullToRefreshTrigger(ptrContent) इसका उपयोग सामग्री को ताज़ा करने के लिए निर्दिष्ट पुल पर ताज़ा करने के लिए ट्रिगर करने के लिए किया जाता है ।
3	myApp.destroyPullToRefresh(ptrContent) इसका उपयोग सामग्री को ताज़ा करने के लिए निर्दिष्ट पुल पर ताज़ा करने के लिए पुल को नष्ट / अक्षम करने के लिए किया जाता है ।
4	myApp.initPullToRefresh(ptrContent) इसका उपयोग सामग्री को ताज़ा करने के लिए खींचने / सक्षम करने के लिए किया जाता है ।

जहां ptrContent को रीसेट / ट्रिगर या अक्षम / सक्षम करने के लिए HTMLElement या स्ट्रिंग को पुल-टू-रिफ्रेश-कंटेंट के लिए उपयोग किया जाता है ।

उदाहरण

निम्नलिखित उदाहरण ताज़ा घटक के उपयोग को दर्शाता है जो पृष्ठ सामग्री को ताज़ा करने की पहल करता है -

<!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>

उत्पादन

ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -

ऊपर दिए गए HTML कोड को इस प्रकार सेव करें pull_to_refresh.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/pull_to_refresh.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब उपयोगकर्ता नीचे खींचता है, तो पृष्ठ सामग्री से ताज़ा हो जाएगा।