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

แถบความคืบหน้าระบุเปอร์เซ็นต์ความสำเร็จของการดำเนินการหรือกระบวนการ เราสามารถจัดหมวดหมู่แถบความคืบหน้าเป็นdeterminate progress bar และ indeterminate progress bar.

Determinate progress barควรใช้เฉพาะในสถานการณ์ที่ระบบสามารถอัปเดตสถานะปัจจุบันได้อย่างถูกต้อง แถบความคืบหน้าที่กำหนดไม่ควรเติมจากซ้ายไปขวาจากนั้นวนกลับเป็นช่องว่างสำหรับกระบวนการเดียว

หากไม่สามารถคำนวณสถานะจริงได้ไฟล์ indeterminate progress bar ควรใช้เพื่อแสดงความคิดเห็นของผู้ใช้

jQueryUI มีวิดเจ็ตแถบความคืบหน้าที่ใช้งานง่ายซึ่งเราสามารถใช้เพื่อแจ้งให้ผู้ใช้ทราบว่าแอปพลิเคชันของเราทำงานหนักในการดำเนินการตามที่ร้องขอ jQueryUI มีเมธอด progressbar () เพื่อสร้างแถบความคืบหน้า

ไวยากรณ์

progressbar() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .progressbar (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .progressbar ("action", params) Method

$ (ตัวเลือกบริบท) .progressbar (ตัวเลือก) วิธีการ

วิธีการแถบความคืบหน้า (ตัวเลือก)ประกาศว่าองค์ประกอบ HTML สามารถจัดการได้ในรูปแบบของแถบความคืบหน้า ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุลักษณะและการทำงานของแถบความคืบหน้า

ไวยากรณ์

$(selector, context).progressbar (options);

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).progressbar({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	ปิดการใช้งาน ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งานแถบความคืบหน้า โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งานแถบความคืบหน้า โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).progressbar({ disabled: true });`
2	สูงสุด ตัวเลือกนี้ตั้งค่าสูงสุดสำหรับแถบความคืบหน้า โดยค่าเริ่มต้นคือ100. Option - max ตัวเลือกนี้ตั้งค่าสูงสุดสำหรับแถบความคืบหน้า โดยค่าเริ่มต้นคือ100. Syntax `$( ".selector" ).progressbar({ max: 500});`
3	มูลค่า ตัวเลือกนี้ระบุค่าเริ่มต้นของแถบความคืบหน้า โดยค่าเริ่มต้นคือ0. Option - value ตัวเลือกนี้ระบุค่าเริ่มต้นของแถบความคืบหน้า โดยค่าเริ่มต้นคือ0. Syntax `$( ".selector" ).progressbar({ value: 20 });`

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานบางส่วนของฟังก์ชันการทำงานของแถบความคืบหน้า

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นตัวอย่างง่ายๆของฟังก์ชันการทำงานของแถบความคืบหน้าโดยไม่ต้องส่งพารามิเตอร์ไปยังไฟล์ progressbar() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-1" ).progressbar({
               value: 30
            });
         });
      </script>
   </head>
   
   <body> 
      <div id = "progressbar-1"></div> 
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML progressbarexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ตัวอย่างนี้แสดงให้เห็นถึงการสร้างแถบความคืบหน้าการใช้ของProgressBar ()วิธีการ นี่คือแถบความคืบหน้าที่กำหนดค่าเริ่มต้น

การใช้สูงสุดและมูลค่า

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้สองตัวเลือก values และ max ในฟังก์ชันแถบความคืบหน้าของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:300
            });
            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-2"></div>
   </body>
</html>

ที่นี่คุณจะเห็นว่าแถบความคืบหน้าจะเติมจากขวาไปซ้ายและหยุดเมื่อค่าถึง 300

$ (ตัวเลือกบริบท) .progressbar ("action", params) Method

ProgressBar ( "การกระทำ" params)วิธีการสามารถดำเนินการในแถบความคืบหน้าเช่นการเปลี่ยนเปอร์เซ็นต์เต็ม การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ค่า" เพื่อเปลี่ยนเปอร์เซ็นต์ที่เติม) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

$(selector, context).progressbar ("action", params);;

ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).progressbar("destroy");
$( ".selector" ).progressbar("destroy");
$( ".selector" ).progressbar("disable");
$( ".selector" ).progressbar("enable");
var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
var options = $( ".selector" ).progressbar( "option" );
$( ".selector" ).progressbar( "option", "disabled", true );
( ".selector" ).progressbar( "option", { disabled: true } );
$( ".selector" ).progressbar("value");
$( ".selector" ).progressbar( "value", 50 );
$( ".selector" ).progressbar("widget");

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ทำลาย การดำเนินการนี้จะลบฟังก์ชันแถบความคืบหน้าขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy การดำเนินการนี้จะลบฟังก์ชันแถบความคืบหน้าขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).progressbar("destroy");`
2	ทำลาย การดำเนินการนี้จะลบฟังก์ชันแถบความคืบหน้าขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy การดำเนินการนี้จะลบฟังก์ชันแถบความคืบหน้าขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).progressbar("destroy");`
3	ปิดการใช้งาน การดำเนินการนี้ปิดใช้งานฟังก์ชันแถบความคืบหน้าขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable การดำเนินการนี้ปิดใช้งานฟังก์ชันแถบความคืบหน้าขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).progressbar("disable");`
4	เปิดใช้งาน การดำเนินการนี้เปิดใช้งานฟังก์ชันแถบความคืบหน้า วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable การดำเนินการนี้เปิดใช้งานฟังก์ชันแถบความคืบหน้า วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).progressbar("enable");`
5	ตัวเลือก (optionName) การดำเนินการนี้จะเรียกค่าเชื่อมโยงกับที่ระบุOptionName โดยoptionNameคือ String Action - option( optionName ) การดำเนินการนี้จะเรียกค่าเชื่อมโยงกับที่ระบุOptionName โดยoptionNameคือ String Syntax `var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );`
6	ตัวเลือก การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกแถบความคืบหน้าปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - option การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกแถบความคืบหน้าปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `var options = $( ".selector" ).progressbar( "option" );`
7	ตัวเลือก (optionName ค่า) การกระทำนี้จะตั้งค่าตัวเลือก ProgressBar ที่เกี่ยวข้องกับการระบุOptionName Action - option( optionName, value ) การกระทำนี้จะตั้งค่าตัวเลือก ProgressBar ที่เกี่ยวข้องกับการระบุOptionName อาร์กิวเมนต์optionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะกำหนดให้กับอ็อพชัน Syntax `$( ".selector" ).progressbar( "option", "disabled", true );`
8	option (ตัวเลือก) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับแถบความคืบหน้า ตัวเลือกอาร์กิวเมนต์คือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Action - option( options ) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับแถบความคืบหน้า ตัวเลือกอาร์กิวเมนต์คือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax `( ".selector" ).progressbar( "option", { disabled: true } );`
9	มูลค่า การดำเนินการนี้ดึงค่าปัจจุบันของoptions.valueนั่นคือเปอร์เซ็นต์ของการเติมในแถบความคืบหน้า Action - value การดำเนินการนี้ดึงค่าปัจจุบันของoptions.valueนั่นคือเปอร์เซ็นต์ของการเติมในแถบความคืบหน้า Syntax `$( ".selector" ).progressbar("value");`
10	มูลค่า (มูลค่า) การดำเนินการนี้ระบุค่าใหม่ให้กับเปอร์เซ็นต์ที่กรอกในแถบความคืบหน้า ค่าอาร์กิวเมนต์สามารถเป็นตัวเลขหรือบูลีน Action - value( value ) การดำเนินการนี้ระบุค่าใหม่ให้กับเปอร์เซ็นต์ที่กรอกในแถบความคืบหน้า ค่าอาร์กิวเมนต์สามารถเป็นตัวเลขหรือบูลีน Syntax `$( ".selector" ).progressbar( "value", 50 );`
11	วิดเจ็ต การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีแถบความคืบหน้า วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - widget การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีแถบความคืบหน้า วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).progressbar("widget");`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ปิดการใช้งาน ()และตัวเลือก (OptionName ค่า)วิธีการ

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-3" ).progressbar({
               value: 30
            });
            $( "#progressbar-3" ).progressbar('disable');
            $( "#progressbar-4" ).progressbar({
               value: 30
            });
            var progressbar = $( "#progressbar-4" );
            $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
            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>
      <h3>Disabled Progressbar</h3>
      <div id = "progressbar-3"></div><br>
      <h3>Progressbar with max value set</h3>
      <div id = "progressbar-4"></div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML progressbarexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -

ปิดใช้งานแถบความคืบหน้า

แถบความคืบหน้าพร้อมชุดค่าสูงสุด