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

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

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

theoneozz
PHP Super Member
PHP Super Member
โพสต์: 313
ลงทะเบียนเมื่อ: 07/01/2019 12:19 pm

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

โพสต์โดย theoneozz » 11/01/2019 10:36 am

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

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

โค้ด: เลือกทั้งหมด

<!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 ไว้สำหรับ ตำแหน่งของข้อความ ความหนาของข้อความ

โค้ด: เลือกทั้งหมด

<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 โดยจะเป็นการกำหนดตัวที่ทำให้ตัวแถบประมวลผลมีข้อความ บ่งบอกว่าถึงขึ้นตอนไหนเเล้ว อีกทั้งผู้ใช้งานยังสามารถกำหนดตัวเลขระหว่างการ ประมวลผลได้ด้วย

โค้ด: เลือกทั้งหมด

<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) เปิดดู 701 ครั้ง


ผลลัพธ์ส่วนที่ 2 ระหว่างการประมวลผล
g2.png
g2.png (7.5 KiB) เปิดดู 701 ครั้ง


ส่วนที่ 3 เสร็จสิ้นการประมวลผล
g3.png
g3.png (9.36 KiB) เปิดดู 701 ครั้ง


จากภาพการทำงานด้านบนสรุปได้ว่า เมื่อเราทำการเรียกหน้าเว็บนี้ขึ้นมา ตัวโปรแกรมนี้จะทำการเเสดงผลการประมวลผลจากโค้ดภายใน JavaScript โดยผู้ใช้งานสามารถกำหนดข้อความ หรือ ระยะเวลาในการประมวลผลได้

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน