Framework7 - แถบความคืบหน้า

คำอธิบาย

แถบความคืบหน้าสามารถใช้เพื่อแสดงการโหลดเนื้อหาหรือความคืบหน้าของงานให้กับผู้ใช้ คุณสามารถระบุแถบความคืบหน้าโดยใช้คลาสแถบความคืบหน้า เมื่อผู้ใช้ไม่ทราบว่ากระบวนการโหลดจะอยู่ที่นั่นนานเท่าใดสำหรับคำขอคุณสามารถใช้progressbar-infinite class

Progress Bar JavaScript API

แถบความคืบหน้าสามารถนำมาใช้พร้อมกับ API JavaScript เพื่อระบุการแสดง , ซ่อนและความคืบหน้าคุณสมบัติโดยใช้วิธีการดังต่อไปนี้ -

ส. เลขที่ วิธีการ คำอธิบายและพารามิเตอร์
1 myApp.setProgressbar (container , progress, speed)

ตั้งค่าแถบความคืบหน้าสำหรับความคืบหน้าของงาน

  • container - เป็นองค์ประกอบสตริงหรือ HTML ที่กำหนดคอนเทนเนอร์ขององค์ประกอบแถบความคืบหน้า

  • progress - แสดงในรูปแบบจำนวนเต็มและกำหนดความคืบหน้าของงาน

  • speed - แสดงในรูปแบบจำนวนเต็มและระบุระยะเวลาของความคืบหน้าของงาน

2 myApp.hideProgressbar (contain er)

มันซ่อนแถบความคืบหน้า

  • container - เป็นองค์ประกอบสตริงหรือ HTML ที่กำหนดคอนเทนเนอร์ขององค์ประกอบแถบความคืบหน้า

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

จะแสดงแถบความคืบหน้า

  • container - เป็นองค์ประกอบสตริงหรือ HTML ที่กำหนดคอนเทนเนอร์ขององค์ประกอบแถบความคืบหน้า

  • progress - แสดงในรูปแบบจำนวนเต็มและกำหนดความคืบหน้าของงาน

  • speed - แสดงในรูปแบบจำนวนเต็มและระบุระยะเวลาของความคืบหน้าของงาน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงแถบความคืบหน้าที่กำหนดและไม่แน่นอนแบบเคลื่อนไหวเพื่อระบุกิจกรรมใน 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>

เอาต์พุต

ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -

  • บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น progress_bar.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ

  • เปิดไฟล์ HTML นี้เป็น http: //localhost/progress_bar.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง

  • ตัวอย่างจะแสดงแถบความคืบหน้าซึ่งระบุระยะเวลาในการดำเนินการเพื่อให้กระบวนการเสร็จสมบูรณ์และแสดงแถบความคืบหน้าประเภทต่างๆเพื่อระบุกิจกรรม