การสร้าง แถบประมวลผล (Progressbar) ด้วย jQuery UI

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

theoneozz
PHP Super Member
PHP Super Member
Posts: 313
Joined: 07/01/2019 12:19 pm

การสร้าง แถบประมวลผล (Progressbar) ด้วย jQuery UI

Post by theoneozz » 11/01/2019 10:36 am

Progress Bar คือการแสดงแถบประมวลผลการทำงานของโปรแกรมที่เราได้กำหนดไว้ โดยเราสามารถกำหนดข้อความ ก่อนทำการประมวลผล และ หลังการประมวลผล

ตัวอย่างโค้ด
**โค้ดรวมทั้งหมด

Code: Select all

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI(Progressbar)</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  .ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </style>
  <script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "เสร็จสิ้น!" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 1 );
 
      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }
 
    setTimeout( progress, 3000 );
  });
  </script>
</head>
<body>
 
<div id="progressbar"><div class="progress-label">กรุณารอสักครู่...</div></div>
 
 
</body>
</html>
โดยจะเเยกเป็นแต่ละส่วนการทำงานไว้ดังนี้
ส่วนที่ 1 จะเป็นตัวของ style ไว้สำหรับ ตำแหน่งของข้อความ ความหนาของข้อความ

Code: Select all

<style>
  .ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </style>
ส่วนที่ 2 จะเป็นการทำงานของ JavaScript โดยจะเป็นการกำหนดตัวที่ทำให้ตัวแถบประมวลผลมีข้อความ บ่งบอกว่าถึงขึ้นตอนไหนเเล้ว อีกทั้งผู้ใช้งานยังสามารถกำหนดตัวเลขระหว่างการ ประมวลผลได้ด้วย

Code: Select all

<script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "เสร็จสิ้น!" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 0.10 );
 
      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }
 
    setTimeout( progress, 300);
  });
  </script>
ผลลัพธ์ส่วนที่ 1 ก่อนทำการประมวลผล
g1.png
g1.png (9.11 KiB) Viewed 967 times
ผลลัพธ์ส่วนที่ 2 ระหว่างการประมวลผล
g2.png
g2.png (7.5 KiB) Viewed 967 times
ส่วนที่ 3 เสร็จสิ้นการประมวลผล
g3.png
g3.png (9.36 KiB) Viewed 967 times
จากภาพการทำงานด้านบนสรุปได้ว่า เมื่อเราทำการเรียกหน้าเว็บนี้ขึ้นมา ตัวโปรแกรมนี้จะทำการเเสดงผลการประมวลผลจากโค้ดภายใน JavaScript โดยผู้ใช้งานสามารถกำหนดข้อความ หรือ ระยะเวลาในการประมวลผลได้

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests