JqueryUI - Spinner

Tiện ích con quay thêm một mũi tên lên / xuống ở bên trái của hộp nhập, do đó cho phép người dùng tăng / giảm một giá trị trong hộp nhập. Nó cho phép người dùng nhập trực tiếp một giá trị hoặc sửa đổi một giá trị hiện có bằng cách xoay với bàn phím, chuột hoặc con lăn. Nó cũng có một tính năng bước để bỏ qua các giá trị. Ngoài các tính năng số cơ bản, nó cũng cho phép các tùy chọn định dạng toàn cầu hóa (tức là tiền tệ, dấu phân cách nghìn, số thập phân, v.v.), do đó cung cấp một hộp nhập có mặt nạ quốc tế hóa thuận tiện.

Ví dụ sau đây phụ thuộc vào Globalize . Bạn có thể lấy các tệp Globalize từhttps://github.com/jquery/globalize. Nhấp vào thông cáo liên kết, chọn phiên bản mà bạn muốn, và tải về .zip hoặc tar.gz tập tin. Giải nén các tệp và sao chép các tệp sau vào thư mục chứa ví dụ của bạn.

  • lib / globalize.js: Tệp này chứa mã Javascript để xử lý các bản địa hóa

  • lib / globalize.culture.js: Tệp này chứa một tập hợp đầy đủ các ngôn ngữ mà thư viện Globalize đi kèm.

Các tệp này cũng có trong thư mục bên ngoài của thư viện jquery-ui của bạn.

jQueryUI cung cấp phương thức spinner () để tạo một spinner.

Cú pháp

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

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

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

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

Phương thức spinner (options) tuyên bố rằng một phần tử HTML và nội dung của nó phải được xử lý và quản lý như spinner. 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 các yếu tố spinner liên quan.

Cú pháp

$(selector, context).spinner (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).spinner({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 văn hóa

Tùy chọn này đặt văn hóa sử dụng để phân tích cú pháp và định dạng giá trị. Theo mặc định, giá trị của nó lànull có nghĩa là văn hóa hiện đang được thiết lập trong Globalize được sử dụng.

Option - culture

Tùy chọn này đặt văn hóa sử dụng để phân tích cú pháp và định dạng giá trị. Theo mặc định, giá trị của nó lànullcó nghĩa là văn hóa hiện đang được thiết lập trong Globalize được sử dụng. Chỉ có liên quan nếu tùy chọn NumberFormat được đặt. Yêu cầu Globalize được bao gồm.

Syntax

$( ".selector" ).spinner(
   { culture: "fr" }
);
2 tàn tật

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

Option - disabled

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

Syntax

$( ".selector" ).spinner(
   { disabled: true }
);
3 biểu tượng

Tùy chọn này đặt các biểu tượng để sử dụng cho các nút, khớp với biểu tượng được cung cấp bởi jQuery UI CSS Framework . Theo mặc định, giá trị của nó là{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }.

Option - icons

Tùy chọn này đặt các biểu tượng để sử dụng cho các nút, khớp với biểu tượng được cung cấp bởi jQuery UI CSS Framework . Theo mặc định, giá trị của nó là{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }.

Syntax

$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
4 tăng dần

Tùy chọn này kiểm soát số bước được thực hiện khi nhấn giữ nút xoay. Theo mặc định, giá trị của nó làtrue.

Option - incremental

Tùy chọn này kiểm soát số bước được thực hiện khi nhấn giữ nút xoay. Theo mặc định, giá trị của nó làtrue.

Điều này có thể thuộc loại -

  • Boolean- Nếu đặt thành false, tất cả các bước đều bằng nhau. Nếu được đặt thành true , delta bước sẽ tăng lên khi quay liên tục.

  • Function - Điều này phải trả về số bước sẽ xảy ra cho vòng quay hiện tại.

Syntax

$( ".selector" ).spinner(
   { incremental: false }
);
5 tối đa

Tùy chọn này cho biết giá trị tối đa được phép. Theo mặc định, giá trị của nó lànull có nghĩa là không có hiệu lực thi hành tối đa.

Option - max

Tùy chọn này cho biết giá trị tối đa được phép. Theo mặc định, giá trị của nó lànull có nghĩa là không có hiệu lực thi hành tối đa.

Điều này có thể thuộc loại -

  • Number - Giá trị lớn nhất.

  • String- Nếu Globalize được bao gồm, tùy chọn tối đa có thể được chuyển dưới dạng một chuỗi sẽ được phân tích cú pháp dựa trên tùy chọn numberFormat và culture

Syntax

$( ".selector" ).spinner(
   { max: 50 }
);
6 min

Tùy chọn này cho biết giá trị tối thiểu được phép. Theo mặc định, giá trị của nó lànull có nghĩa là không có mức tối thiểu nào được thực thi.

Option - min

Tùy chọn này cho biết giá trị tối thiểu được phép. Theo mặc định, giá trị của nó lànull có nghĩa là không có mức tối thiểu nào được thực thi.

Điều này có thể thuộc loại -

  • Number - Giá trị nhỏ nhất.

  • String- Nếu Globalize được bao gồm, tùy chọn min có thể được truyền dưới dạng một chuỗi sẽ được phân tích cú pháp dựa trên tùy chọn numberFormat và culture

    .

Syntax

$( ".selector" ).spinner(
   { min: 0 }
);
7 numberFormat

Tùy chọn này cho biết định dạng của các số được chuyển đến Globalize , nếu có. Phổ biến nhất là "n" cho một số thập phân và "C" cho một giá trị tiền tệ. Theo mặc định, giá trị của nó lànull.

Option - numberFormat

Tùy chọn này cho biết định dạng của các số được chuyển đến Globalize , nếu có. Phổ biến nhất là "n" cho một số thập phân và "C" cho một giá trị tiền tệ. Theo mặc định, giá trị của nó lànull.

Syntax

$( ".selector" ).spinner(
   { numberFormat: "n" }
);
số 8 trang

Tùy chọn này cho biết số bước cần thực hiện khi phân trang qua các phương thức pageUp / pageDown. Theo mặc định, giá trị của nó là10.

Option - page

Tùy chọn này cho biết số bước cần thực hiện khi phân trang qua các phương thức pageUp / pageDown. Theo mặc định, giá trị của nó là10.

Syntax

$( ".selector" ).spinner(
   { page: 5 }
);
9 bươc

Tùy chọn này cho biết kích thước của bước cần thực hiện khi quay qua các nút hoặc qua các phương thức stepUp () / stepDown () . Thuộc tính bước của phần tử được sử dụng nếu nó tồn tại và tùy chọn không được đặt rõ ràng.

Option - step

Tùy chọn này cho biết kích thước của bước cần thực hiện khi quay qua các nút hoặc qua các phương thức stepUp () / stepDown () . Thuộc tính bước của phần tử được sử dụng nếu nó tồn tại và tùy chọn không được đặt rõ ràng.

Điều này có thể thuộc loại -

  • Number - Kích thước của bước.

  • String- Nếu Globalize được bao gồm, tùy chọn bước có thể được chuyển dưới dạng một chuỗi sẽ được phân tích cú pháp dựa trên tùy chọn numberFormat và văn hóa , nếu không, nó sẽ trở lại parseFloat gốc.

    • Syntax

    $( ".selector" ).spinner(
   { step: 2 }
);

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động của chức năng tiện ích con quay.

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 tiện ích con quay, không chuyển tham số nào cho spinner() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-1" value = "0" />
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML spinnerexample.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ả -

Sử dụng các tùy chọn tối thiểu, tối đa và bước

Ví dụ sau minh họa việc sử dụng ba tùy chọn min, tối đa và bước trong tiện ích con quay của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -10, 
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         Spinner Min, Max value set:
         <input type = "text" id = "spinner-2" value = "0" /><br><br>
         Spinner increments/decrements in step of of 100:
         <input type = "text" id = "spinner-3" value = "0" />
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML spinnerexample.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ả -

Trong ví dụ trên, bạn có thể thấy trong vòng quay đầu tiên, giá trị tối đa và giá trị nhỏ nhất được đặt lần lượt là 10 và -10. Do đó, vượt qua các giá trị này, con quay sẽ ngừng tăng / giảm. Trong con quay thứ hai, giá trị con quay tăng / giảm theo các bước 100.

Sử dụng các biểu tượng Tùy chọn

Ví dụ sau minh họa việc sử dụng tùy chọn icons trong tiện ích con quay của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-5 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-5" ).spinner({
               icons: {
                  down: "custom-down-icon", up: "custom-up-icon"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-5" value = "0" />
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML spinnerexample.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ả -

Trong ví dụ trên, bạn có thể nhận thấy spinner hình ảnh được thay đổi.

Sử dụng các tùy chọn văn hóa, số Định dạng và trang

Ví dụ sau minh họa việc sử dụng ba tùy chọn culture, numberFormat và trang trong tiện ích con quay của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
      
      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>
   
   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>
     
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML spinnerexample.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ả -

Trong ví dụ trên, bạn sẽ nhìn thấy màn hình spinner số ở định dạng tiền tệ như NumberFormat được đặt thành "C" và văn hóa được thiết lập để "de-DE". Ở đây chúng tôi đã sử dụng các tệp Globalize từ thư viện jquery-ui.

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

Phương thức spinner ("action", params) có thể thực hiện một hành động trên các phần tử của spinner, chẳng hạn như bật / tắt spinner. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "vô hiệu hóa" vô hiệu hóa con quay). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

$(selector, context).spinner ("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 sẽ phá hủy hoàn toàn chức năng quay 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 sẽ phá hủy hoàn toàn chức năng quay 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").spinner("destroy");
2 vô hiệu hóa

Hành động này vô hiệu hóa chức năng quay vòng. 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 quay vòng. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").spinner("disable");
3 kích hoạt

Hành động này bật chức năng quay vòng. 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 bật chức năng quay vòng. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").spinner("enable");
4 option (optionName)

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định . Trong đó optionName là tên của tùy chọn cần lấy.

Action - option( optionName )

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định . Trong đó optionName là tên của tùy chọn cần lấy.

Syntax

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
5 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 spinner 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 spinner 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" ).spinner( "option" );
6 option (optionName, value)

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

Action - optionName

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

Syntax

$( ".selector" ).spinner( "option", "disabled", true );
7 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho con quay.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho con quay.

Syntax

$(".selector").spinner("option", { disabled: true });
số 8 pageDown ([trang])

Hành động này làm giảm giá trị theo số trang được chỉ định, như được xác định bởi tùy chọn trang.

Action - pageDown( [pages ] )

Hành động này làm giảm giá trị theo số trang được chỉ định, như được xác định bởi tùy chọn trang. Việc gọi pageDown () sẽ gây ra các sự kiện bắt đầu, quay vòng và dừng được kích hoạt.

Syntax

$(".selector").spinner("pageDown");
9 pageUp ([trang])

Hành động này làm tăng giá trị theo số trang được chỉ định, như được xác định bởi tùy chọn trang.

Action - pageUp( [pages ] )

Hành động này làm tăng giá trị theo số trang được chỉ định, như được xác định bởi tùy chọn trang. Việc gọi trangUp () sẽ gây ra các sự kiện bắt đầu, quay vòng và dừng được kích hoạt.

Syntax

$(".selector").spinner("pageUp");
10 stepDown ([bước])

Hành động này làm giảm giá trị theo số bước được chỉ định.

Action - stepDown( [steps ] )

Hành động này làm giảm giá trị theo số bước được chỉ định. Gọi stepDown () sẽ kích hoạt các sự kiện start, spin và stop .

Syntax

$(".selector").spinner("stepDown");
11 stepUp ([bước])

Hành động này làm tăng giá trị theo số bước được chỉ định.

Action - stepUp( [steps ] )

Hành động này làm tăng giá trị theo số bước được chỉ định. Gọi stepUp () sẽ kích hoạt các sự kiện start, spin và stop .

Syntax

$(".selector").spinner("stepUp");
12 giá trị

Hành động này nhận giá trị hiện tại dưới dạng số. Giá trị được phân tích cú pháp dựa trên tùy chọn NumberFormat và văn hóa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - value

Hành động này nhận giá trị hiện tại dưới dạng số. Giá trị được phân tích cú pháp dựa trên tùy chọn NumberFormat và văn hóa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var value = $( ".selector" ).spinner( "value" );
13 value (giá trị)

Hành động này đặt giá trị. nếu giá trị được truyền, giá trị được phân tích cú pháp dựa trên tùy chọn numberFormat và culture.

Action - value( value )

Hành động này đặt giá trị. nếu giá trị được truyền, giá trị được phân tích cú pháp dựa trên tùy chọn numberFormat và culture.

Syntax

$( ".selector" ).spinner( "value", 50 );
14 phụ tùng

Hành động này trả về phần tử tiện ích con quay; cái được chú thích bằng tên lớp ui-spinner .

Action - widget

Hành động này trả về phần tử tiện ích con quay; cái được chú thích bằng tên lớp ui-spinner .

Syntax

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

Các ví dụ sau đây trình bày cách sử dụng các hành động được đưa ra trong bảng trên.

Sử dụng hành động stepUp, stepDown, pageUp và pageDown

Ví dụ sau minh họa việc sử dụng các phương thức stepUp, stepDown, pageUp và pageDown .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-6 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-6" />
      <br/>
      <button id = "stepUp-2">Increment</button>
      <button id = "stepDown-2">Decrement</button>
      <button id = "pageUp-2">Increment Page</button>
      <button id = "pageDown-2">Decrement Page</button>
   </body>
</html>

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

Trong ví dụ trên, sử dụng các nút tương ứng để tăng / giảm con quay.

Sử dụng hành động bật và tắt

Ví dụ sau minh họa việc sử dụng các phương thức kích hoạt và tắt .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-7 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-7" />
      <br/>
      <button id = "stepUp-3">Enable</button>
      <button id = "stepDown-3">Disable</button>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML spinnerexample.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:

Trong ví dụ trên, sử dụng các nút Bật / Tắt để bật hoặc tắt con quay.

Quản lý sự kiện trên phần tử Spinner

Ngoài phương thức spinner (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 thay đổi (sự kiện, ui)

Sự kiện này được kích hoạt khi giá trị của con quay đã thay đổi và đầu vào không còn được tập trung nữa.

Event - change(event, ui)

Sự kiện này được kích hoạt khi giá trị của con quay đã thay đổi và đầu vào không còn được tập trung nữa. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
2 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi con quay được tạo.

Event - create(event, ui)

Sự kiện này được kích hoạt khi con quay được tạo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
3 spin (sự kiện, ui)

Sự kiện này được kích hoạt trong quá trình tăng / giảm.

Event - spin(event, ui)

Sự kiện này được kích hoạt trong quá trình tăng / giảm. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

và đại diện cho giá trị mới sẽ được đặt, trừ khi sự kiện bị hủy.

Syntax

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
4 bắt đầu (sự kiện, ui)

Sự kiện này được kích hoạt trước khi quay. Có thể được hủy bỏ, ngăn không cho quay vòng xảy ra.

Event - start(event, ui)

Sự kiện này được kích hoạt trước khi quay. Có thể được hủy bỏ, ngăn không cho quay vòng. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
5 dừng lại (sự kiện, ui)

Sự kiện này được kích hoạt sau một vòng quay.

Event - stop(event, ui)

Sự kiện này được kích hoạt sau một vòng quay. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong các tiện ích con quay. Ví dụ này thể hiện việc sử dụng các sự kiện quay , thay đổi và dừng .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0" />
      </div>
      <span id = "result-2"></span>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML spinnerexample.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:

Trong ví dụ trên, hãy thay đổi giá trị của con quay và xem, các thông báo đang được hiển thị bên dưới cho các sự kiện quay và dừng. Bây giờ hãy thay đổi tiêu điểm của con quay và bạn thấy một thông báo được hiển thị trên sự kiện thay đổi.

Điểm mở rộng

Widget spinner được xây dựng với nhà máy widget và có thể được mở rộng. Để mở rộng các widget, chúng ta có thể ghi đè hoặc thêm vào hành vi của các phương thức hiện có. Phương thức sau cung cấp như một điểm mở rộng với độ ổn định API giống như các phương pháp spinner. Được liệt kê trong bảng trên .

Sr.No. Phương pháp & Mô tả
1 _buttonHtml (sự kiện)

Phương thức này trả về một Chuỗi là một HTML. HTML này có thể được sử dụng cho các nút tăng và giảm của spinner. Mỗi nút phải được đặt tên lớp ui-spinner-button để các sự kiện liên quan hoạt động. Phương pháp này không chấp nhận bất kỳ đối số nào.

Extension Point - _buttonHtml(event, ui)

Phương thức này trả về một Chuỗi là một HTML. HTML này có thể được sử dụng cho các nút tăng và giảm của spinner. Mỗi nút phải được đặt tên lớp ui-spinner-button để các sự kiện liên quan hoạt động. Phương pháp này không chấp nhận bất kỳ đối số nào.

Code Example

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml (sự kiện)

Phương pháp này xác định HTML sẽ sử dụng để bọc phần tử <input> của spinner. Phương pháp này không chấp nhận bất kỳ đối số nào.

Extension Point - _uiSpinnerHtml(event, ui)

Phương pháp này xác định HTML sẽ sử dụng để bọc phần tử <input> của spinner. Phương pháp này không chấp nhận bất kỳ đối số nào.

Code Example

_uiSpinnerHtml: function() {
  return "
            ";
}
JQuery UI Widget Factory là một cơ sở có thể mở rộng để xây dựng tất cả các widget của jQuery UI. Việc sử dụng nhà máy widget để xây dựng một plugin mang lại sự tiện lợi cho việc quản lý nhà nước, cũng như các quy ước cho các tác vụ phổ biến như hiển thị các phương thức plugin và thay đổi các tùy chọn sau khi tạo.
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