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

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การสร้าง แถบประมวลผล (Progressbar) ด้วย jQuery UI

การสร้าง แถบประมวลผล (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 ก่อนทำการประมวลผล
รูปภาพ

ผลลัพธ์ส่วนที่ 2 ระหว่างการประมวลผล
รูปภาพ

ส่วนที่ 3 เสร็จสิ้นการประมวลผล
รูปภาพ

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

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

ข้างบน