Framework7 - Barra di avanzamento

Descrizione

Le barre di avanzamento possono essere utilizzate per mostrare agli utenti il ​​caricamento di risorse o l'avanzamento di un'attività. È possibile specificare la barra di avanzamento utilizzando la classe progressbar . Quando l'utente non sa per quanto tempo ci sarà il processo di caricamento della richiesta, è possibile utilizzare la classe progressbar-infinite .

API JavaScript della barra di avanzamento

La barra di avanzamento può essere utilizzata insieme all'API JavaScript per specificare le proprietà di visualizzazione , nascondi e avanzamento utilizzando i seguenti metodi:

S.No Metodi Descrizione e parametri
1 myApp.setProgressbar (container , progress, speed)

Imposta la barra di avanzamento per l'avanzamento di un'attività.

  • container - È una stringa o un elemento HTML che definisce il contenitore dell'elemento barra di avanzamento.

  • progress - Rappresenta in formato intero e definisce lo stato di avanzamento di un'attività.

  • speed - Rappresenta in formato intero e specifica la durata dell'avanzamento di un'attività.

2 myApp.hideProgressbar (contain er)

Nasconde la barra di avanzamento.

  • container - È una stringa o un elemento HTML che definisce il contenitore dell'elemento barra di avanzamento.

3 myApp.showProgressbar (contai ner, progress, color)

Visualizza la barra di avanzamento.

  • container - È una stringa o un elemento HTML che definisce il contenitore dell'elemento barra di avanzamento.

  • progress - Rappresenta in formato intero e definisce lo stato di avanzamento di un'attività.

  • speed - Rappresenta in formato intero e specifica la durata dell'avanzamento di un'attività.

Esempio

L'esempio seguente mostra una barra di avanzamento determinata e indeterminata animata per indicare l'attività 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>Progress Bar</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" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.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 = "center">Progress Bar</div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Determinate Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline determinate progress bar:</p>
                           
                           <div class = "progressbar-inline">
                              <p><span data-progress = "10" class = "progressbar"></span></p>
                              
                              <p class = "buttons-row">
                                 <a href = "#" data-progress = "25" class = "button button-raised">25%</a>
                                 <a href = "#" data-progress = "50" class = "button button-raised">50%</a>
                                 <a href = "#" data-progress = "75" class = "button button-raised">75%</a>
                                 <a href = "#" data-progress = "100" class = "button button-raised">100%</a>
                              </p>
                           </div>
                           
                           <p>Loads and hides the determinate progress bar:</p>
                           <div class = "progressbar-load-hide">
                              <p><a href = "#" class = "button button-raised">Start Loading</a></p>
                           </div>
                           
                           <p>Displays the determinate progress bar on top:</p>
                           <p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Infinite Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline infinite progress bar:</p>
                           
                           <p><span class = "progressbar-infinite"></span></p>
                           
                           <p>Displays the infinite progress bar in multiple colors:</p>
                           
                           <p><span class = "progressbar-infinite color-multi"></span></p>
                           
                           <p>Displays the infinite progress bar on top:</p>
                           
                           <p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                           
                           <p>Displays the infinite progress bar in multiple colors on top:</p>
                           
                           <p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Different types of colored progress bars:</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "5" class = "progressbar color-red"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "10" class = "progressbar color-pink"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "20" class = "progressbar color-deeppurple"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "30" class = "progressbar color-blue"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "40" class = "progressbar color-cyan"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "50" class = "progressbar color-green"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "60" class = "progressbar color-lime"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "70" class = "progressbar color-amber"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "80" class = "progressbar color-deeporange"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "90" class = "progressbar color-gray"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "100" class = "progressbar color-black"></div>
                              </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({
            material: true
         });
         
         var $$ = Dom7;

         $$('.progressbar-inline .button').on('click', function () {
            var progress = $$(this).attr('data-progress');
            var progressbar = $$('.progressbar-inline .progressbar');
            myApp.setProgressbar(progressbar, progress);
         });
         
         $$('.progressbar-load-hide .button').on('click', function () {
            var container = $$('.progressbar-load-hide p:first-child');
            
            //it doesn't load if another progresbar is loading
            if (container.children('.progressbar').length) return;

            myApp.showProgressbar(container, 0);

            var progress = 0;
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 0, 'orange');
            var progress = 0;
            
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  //hides the progressbar
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-infinite-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 'yellow');
            setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
         
         $$('.progressbar-infinite-multi-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
               myApp.showProgressbar(container, 'multi');
               setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
      </script>
   </body>

</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice HTML sopra indicato come progress_bar.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/progress_bar.html e l'output viene visualizzato come mostrato di seguito.

  • L'esempio mostra la barra di avanzamento, che indica quanto tempo impiegherà un'operazione per completare il processo e visualizza i diversi tipi di barre di avanzamento per indicare l'attività.