JqueryUI - Thanh tiến trình

Các thanh tiến trình cho biết phần trăm hoàn thành của một hoạt động hoặc quy trình. Chúng tôi có thể phân loại thanh tiến trình làdeterminate progress bar và indeterminate progress bar.

Determinate progress barchỉ nên sử dụng trong trường hợp hệ thống có thể cập nhật chính xác trạng thái hiện tại. Một thanh tiến trình xác định không bao giờ được điền từ trái sang phải, sau đó lặp lại để trống cho một quy trình.

Nếu tình trạng thực tế không thể được tính toán, một indeterminate progress bar nên được sử dụng để cung cấp phản hồi của người dùng.

jQueryUI cung cấp một tiện ích thanh tiến trình dễ sử dụng mà chúng tôi có thể sử dụng để cho người dùng biết rằng ứng dụng của chúng tôi đang nỗ lực thực hiện thao tác được yêu cầu. jQueryUI cung cấp phương thức processbar () để tạo các thanh tiến trình.

Cú pháp

Các progressbar() phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .progressbar (tùy chọn) Phương thức

  • $ (selector, context) .progressbar ("action", params) Phương thức

$ (bộ chọn, ngữ cảnh) .progressbar (tùy chọn) Phương thức

Phương thức thanh tiến trình (tùy chọn) tuyên bố rằng một phần tử HTML có thể được quản lý dưới dạng thanh tiến trình. Các tùy chọn tham số là một đối tượng mà xác định sự xuất hiện và hành vi của thanh tiến trình.

Cú pháp

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

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

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

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 tàn tật

Tùy chọn này khi được đặt thành true sẽ vô hiệu hóa các thanh tiến trình. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này khi được đặt thành true sẽ vô hiệu hóa các thanh tiến trình. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).progressbar({ disabled: true });
2 tối đa

Tùy chọn này đặt giá trị lớn nhất cho thanh tiến trình. Theo mặc định, giá trị của nó là100.

Option - max

Tùy chọn này đặt giá trị lớn nhất cho thanh tiến trình. Theo mặc định, giá trị của nó là100.

Syntax

$( ".selector" ).progressbar({ max: 500});
3 giá trị

Tùy chọn này chỉ định giá trị ban đầu của thanh tiến trình. Theo mặc định, giá trị của nó là0.

Option - value

Tùy chọn này chỉ định giá trị ban đầu của thanh tiến trình. Theo mặc định, giá trị của nó là0.

Syntax

$( ".selector" ).progressbar({ value: 20 });

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động về chức năng của thanh tiến trình.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng thanh tiến trình, không chuyển tham số nào cho progressbar() phương pháp.

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML progressbarexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Ví dụ này cho thấy việc tạo thanh tiến trình bằng phương thức processbar () . Đây là một thanh tiến trình xác định mặc định.

Sử dụng max và value

Ví dụ sau minh họa việc sử dụng hai tùy chọn values và max trong chức năng thanh tiến trình của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML progressbarexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Ở đây, bạn có thể thấy rằng thanh tiến trình lấp đầy từ phải sang trái và dừng lại khi giá trị đạt đến 300.

$ (selector, context) .progressbar ("action", params) Phương thức

Phương thức thanh tiến trình ("action", params) có thể thực hiện một hành động trên thanh tiến trình, chẳng hạn như thay đổi tỷ lệ phần trăm đã điền. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "giá trị" để thay đổi phần trăm được điền). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

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

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 hủy hoại

Hành động này loại bỏ hoàn toàn chức năng thanh tiến trình của một phần tử. Các phần tử trở về trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy

Hành động này loại bỏ hoàn toàn chức năng thanh tiến trình của một phần tử. Các phần tử trở về trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).progressbar("destroy");
2 hủy hoại

Hành động này loại bỏ hoàn toàn chức năng thanh tiến trình của một phần tử. Các phần tử trở về trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy

Hành động này loại bỏ hoàn toàn chức năng thanh tiến trình của một phần tử. Các phần tử trở về trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).progressbar("destroy");
3 vô hiệu hóa

Hành động này vô hiệu hóa chức năng thanh tiến trình của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable

Hành động này vô hiệu hóa chức năng thanh tiến trình của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).progressbar("disable");
4 kích hoạt

Hành động này kích hoạt chức năng thanh tiến trình. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable

Hành động này kích hoạt chức năng thanh tiến trình. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).progressbar("enable");
5 option (optionName)

Hành động này truy xuất giá trị hiện được liên kết với optionName được chỉ định . Trong đó optionName là một chuỗi.

Action - option( optionName )

Hành động này truy xuất giá trị hiện được liên kết với optionName được chỉ định . Trong đó optionName là một chuỗi.

Syntax

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
6 Lựa chọn

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn thanh tiến trình hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - option

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn thanh tiến trình hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var options = $( ".selector" ).progressbar( "option" );
7 option (optionName, value)

Hành động này đặt giá trị của tùy chọn thanh tiến trình được liên kết với optionName được chỉ định .

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn thanh tiến trình được liên kết với optionName được chỉ định . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Syntax

$( ".selector" ).progressbar( "option", "disabled", true );
số 8 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho các thanh tiến trình. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho các thanh tiến trình. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Syntax

( ".selector" ).progressbar( "option", { disabled: true } );
9 giá trị

Hành động này truy xuất giá trị hiện tại của options.value , tức là phần trăm điền vào thanh tiến trình.

Action - value

Hành động này truy xuất giá trị hiện tại của options.value , tức là phần trăm điền vào thanh tiến trình.

Syntax

$( ".selector" ).progressbar("value");
10 value (giá trị)

Hành động này chỉ định một giá trị mới cho tỷ lệ phần trăm được điền vào thanh tiến trình. Giá trị đối số có thể là một Số hoặc Boolean.

Action - value( value )

Hành động này chỉ định một giá trị mới cho tỷ lệ phần trăm được điền vào thanh tiến trình. Giá trị đối số có thể là một Số hoặc Boolean.

Syntax

$( ".selector" ).progressbar( "value", 50 );
11 phụ tùng

Hành động này trả về một đối tượng jQuery có chứa thanh tiến trình. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - widget

Hành động này trả về một đối tượng jQuery có chứa thanh tiến trình. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).progressbar("widget");

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng các phương thức disable () và option (optionName, value) .

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML progressbarexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Thanh tiến trình bị vô hiệu hóa


Thanh tiến trình với giá trị tối đa được đặt

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved