JqueryUI - 旋轉輸入框

上一頁
下一頁

旋轉輸入框小部件在輸入框左側添加了向上/向下箭頭，允許使用者增加/減少輸入框中的值。它允許使用者直接鍵入值，或透過鍵盤、滑鼠或滾輪旋轉來修改現有值。它還具有跳過值的步進功能。除了基本的數字功能外，它還支援全域性化格式選項（例如貨幣、千位分隔符、小數等），從而提供了一個方便的國際化掩碼輸入框。

以下示例依賴於Globalize。您可以從https://github.com/jquery/globalize獲取Globalize檔案。點選releases連結，選擇您想要的版本，然後下載.zip或tar.gz檔案。解壓檔案並將以下檔案複製到您的示例所在的資料夾。

  • lib/globalize.js：此檔案包含用於處理本地化的Javascript程式碼

  • lib/globalize.culture.js：此檔案包含Globalize庫附帶的完整語言環境集。

這些檔案也存在於jquery-ui庫的external資料夾中。

jQueryUI 提供了 `spinner()` 方法，該方法建立一個旋轉輸入框。

語法

spinner() 方法可以用兩種形式使用：

$(selector, context).spinner (options) 方法

spinner (options) 方法宣告應將 HTML 元素及其內容視為並管理為旋轉輸入框。options 引數是一個物件，用於指定所涉及的旋轉輸入框元素的外觀和行為。

語法

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

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：

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

下表列出了可與此方法一起使用的不同options：

序號 選項和描述
1 culture

此選項設定用於解析和格式化值的區域設定。預設值為null，這意味著使用 Globalize 中當前設定的區域設定。

選項 - culture

此選項設定用於解析和格式化值的區域設定。預設值為null，這意味著使用 Globalize 中當前設定的區域設定。僅當設定了numberFormat選項時才相關。需要包含Globalize。

語法

$( ".selector" ).spinner(
   { culture: "fr" }
);
2 disabled

如果此選項設定為true，則停用旋轉輸入框。預設值為false。

選項 - disabled

如果此選項設定為true，則停用旋轉輸入框。預設值為false。

語法

$( ".selector" ).spinner(
   { disabled: true }
);
3 icons

此選項設定用於按鈕的圖示，與jQuery UI CSS 框架提供的圖示匹配。預設值為{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。

選項 - icons

此選項設定用於按鈕的圖示，與jQuery UI CSS 框架提供的圖示匹配。預設值為{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。

語法

$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
4 incremental

此選項控制按住旋轉按鈕時採取的步數。預設值為true。

選項 - incremental

此選項控制按住旋轉按鈕時採取的步數。預設值為true。

這可以是以下型別：

  • 布林值 - 如果設定為false，則所有步進值相等。如果設定為true，則連續旋轉時的步進增量將增加。

  • 函式 - 此函式必須返回當前旋轉應發生的步數。

語法

$( ".selector" ).spinner(
   { incremental: false }
);
5 max

此選項指示允許的最大值。預設值為null，這意味著沒有強制最大值。

選項 - max

此選項指示允許的最大值。預設值為null，這意味著沒有強制最大值。

這可以是以下型別：

  • 數字 - 最大值。

  • 字串 - 如果包含 Globalize，則可以將 max 選項作為字串傳遞，該字串將根據numberFormat和culture選項進行解析

語法

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

此選項指示允許的最小值。預設值為null，這意味著沒有強制最小值。

選項 - min

此選項指示允許的最小值。預設值為null，這意味著沒有強制最小值。

這可以是以下型別：

  • 數字 - 最小值。

  • 字串 - 如果包含 Globalize，則可以將 min 選項作為字串傳遞，該字串將根據numberFormat和culture選項進行解析

    .

語法

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

此選項指示傳遞給Globalize（如果可用）的數字格式。最常見的是“n”（十進位制數）和“C”（貨幣值）。預設值為null。

選項 - numberFormat

此選項指示傳遞給Globalize（如果可用）的數字格式。最常見的是“n”（十進位制數）和“C”（貨幣值）。預設值為null。

語法

$( ".selector" ).spinner(
   { numberFormat: "n" }
);
8 page

此選項指示透過 pageUp/pageDown 方法分頁時要執行的步數。預設值為10。

選項 - page

此選項指示透過 pageUp/pageDown 方法分頁時要執行的步數。預設值為10。

語法

$( ".selector" ).spinner(
   { page: 5 }
);
9 step

此選項指示透過按鈕或stepUp()/stepDown()方法旋轉時要執行的步進大小。如果存在元素的step屬性並且未顯式設定此選項，則使用該屬性。

選項 - step

此選項指示透過按鈕或stepUp()/stepDown()方法旋轉時要執行的步進大小。如果存在元素的step屬性並且未顯式設定此選項，則使用該屬性。

這可以是以下型別：

  • 數字 - 步進大小。

  • 字串 - 如果包含 Globalize，則可以將 step 選項作為字串傳遞，該字串將根據numberFormat和culture選項進行解析，否則將回退到本機 parseFloat。

    • 語法

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

下一節將向您展示一些旋轉輸入框小部件功能的工作示例。

預設功能

以下示例演示了旋轉輸入框小部件功能的一個簡單示例，未向spinner()方法傳遞任何引數。

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

讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以操作結果：

Min、Max 和 Step 選項的使用

以下示例演示了在 JqueryUI 的旋轉輸入框小部件中使用三個選項min、max和step。

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

讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以操作結果：

在上面的示例中，您可以在第一個旋轉輸入框中看到 max 和 min 值分別設定為 10 和 -10。因此，超過這些值後，旋轉輸入框將停止遞增/遞減。在第二個旋轉輸入框中，旋轉輸入框的值以 100 為步進遞增/遞減。

icons 選項的使用

以下示例演示了在 JqueryUI 的旋轉輸入框小部件中使用選項icons。

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

讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以操作結果：

在上面的示例中，您可以注意到旋轉輸入框的影像已更改。

culture、numberFormat 和 page 選項的使用

以下示例演示了在 JqueryUI 的旋轉輸入框小部件中使用三個選項culture、numberFormat和page。

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

讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以操作結果：

在上面的示例中，您可以看到旋轉輸入框以貨幣格式顯示數字，因為numberFormat設定為“C”，culture設定為“de-DE”。這裡我們使用了 jquery-ui 庫中的 Globalize 檔案。

$(selector, context).spinner ("action", params) 方法

spinner ("action", params) 方法可以在旋轉輸入框元素上執行操作，例如啟用/停用旋轉輸入框。操作在第一個引數中指定為字串（例如，“disable”停用旋轉輸入框）。請查看下錶中可以傳遞的操作。

語法

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

下表列出了可與此方法一起使用的不同actions：

序號 操作和描述
1 destroy

此操作會完全銷燬元素的旋轉輸入框功能。元素將返回到其初始化前的狀態。此方法不接受任何引數。

操作 - destroy

此操作會完全銷燬元素的旋轉輸入框功能。元素將返回到其初始化前的狀態。此方法不接受任何引數。

語法

$(".selector").spinner("destroy");
2 disable

此操作停用旋轉輸入框功能。此方法不接受任何引數。

操作 - disable

此操作停用旋轉輸入框功能。此方法不接受任何引數。

語法

$(".selector").spinner("disable");
3 enable

此操作啟用旋轉輸入框功能。此方法不接受任何引數。

操作 - enable

此操作啟用旋轉輸入框功能。此方法不接受任何引數。

語法

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

此操作獲取當前與指定的optionName關聯的值。其中optionName是要獲取的選項的名稱。

操作 - option( optionName )

此操作獲取當前與指定的optionName關聯的值。其中optionName是要獲取的選項的名稱。

語法

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
5 option

此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前旋轉輸入框選項雜湊。此方法不接受任何引數。

操作 - option

此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前旋轉輸入框選項雜湊。此方法不接受任何引數。

語法

var options = $( ".selector" ).spinner( "option" );
6 option( optionName, value )

此操作設定與指定的optionName關聯的旋轉輸入框選項的值。

操作 - optionName

此操作設定與指定的optionName關聯的旋轉輸入框選項的值。

語法

$( ".selector" ).spinner( "option", "disabled", true );
7 option( options )

此操作設定旋轉輸入框的一個或多個選項。

操作 - option( options )

此操作設定旋轉輸入框的一個或多個選項。

語法

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

此操作根據 page 選項定義的值遞減指定頁數。

操作 - pageDown( [pages ] )

此操作根據 page 選項定義的值遞減指定頁數。呼叫pageDown()將觸發start、spin和stop事件。

語法

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

此操作根據 page 選項定義的值遞增指定頁數。

操作 - pageUp( [pages ] )

此操作根據 page 選項定義的值遞增指定頁數。呼叫pageUp()將觸發start、spin和stop事件。

語法

$(".selector").spinner("pageUp");
10 stepDown( [steps ] )

此操作根據指定步數遞減值。

操作 - stepDown( [steps ] )

此操作根據指定步數遞減值。呼叫stepDown()將觸發start、spin和stop事件。

語法

$(".selector").spinner("stepDown");
11 stepUp( [steps ] )

此操作根據指定步數遞增值。

操作 - stepUp( [steps ] )

此操作根據指定步數遞增值。呼叫stepUp()將觸發start、spin和stop事件。

語法

$(".selector").spinner("stepUp");
12 value

此操作獲取當前值作為數字。該值將根據 numberFormat 和區域設定選項進行解析。此方法不接受任何引數。

操作 - value

此操作獲取當前值作為數字。該值將根據 numberFormat 和區域設定選項進行解析。此方法不接受任何引數。

語法

var value = $( ".selector" ).spinner( "value" );
13 value( value )

此操作設定值。如果傳遞了 value，則根據 numberFormat 和區域設定選項解析 value。

操作 - value( value )

此操作設定值。如果傳遞了 value，則根據 numberFormat 和區域設定選項解析 value。

語法

$( ".selector" ).spinner( "value", 50 );
14 微件

此操作返回微件元素；帶有 ui-spinner 類名的那個。

操作 - widget

此操作返回微件元素；帶有 ui-spinner 類名的那個。

語法

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

以下示例演示如何使用上表中給出的操作。

使用操作 stepUp、stepDown、pageUp 和 pageDown

以下示例演示了 stepUp、stepDown、pageUp 和 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>

讓我們將以上程式碼儲存在一個名為 spinnerexample.htm 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

在以上示例中，使用相應的按鈕來遞增/遞減微調器。

使用操作 enable 和 disable

以下示例演示了 enable 和 disable 方法的使用。

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

讓我們將以上程式碼儲存在一個名為 spinnerexample.htm 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您也應該看到以下輸出：

在以上示例中，使用啟用/停用按鈕來啟用或停用微調器。

微調器元素上的事件管理

除了我們在前面幾節中看到的微調器 (options) 方法外，JqueryUI 還提供在特定事件觸發時觸發的事件方法。這些事件方法列在下面：

序號 事件方法和描述
1 change(event, ui)

當微調器的值發生更改並且輸入不再處於焦點狀態時，將觸發此事件。

事件 - change(event, ui)

當微調器的值發生更改並且輸入不再處於焦點狀態時，將觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
2 create(event, ui)

建立微調器時會觸發此事件。

事件 - create(event, ui)

建立微調器時會觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
3 spin(event, ui)

遞增/遞減期間會觸發此事件。

事件 - spin(event, ui)

遞增/遞減期間會觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

並表示要設定的新值，除非事件被取消。

語法

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
4 start(event, ui)

此事件在旋轉之前觸發。可以取消，從而阻止旋轉發生。

事件 - start(event, ui)

此事件在旋轉之前觸發。可以取消，從而阻止旋轉發生。其中 event 的型別為 Event，ui 的型別為 Object。

語法

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

旋轉後會觸發此事件。

事件 - stop(event, ui)

旋轉後會觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

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

示例

以下示例演示了微調器微件中事件方法的使用。此示例演示了 spin、change 和 stop 事件的使用。

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

讓我們將以上程式碼儲存在一個名為 spinnerexample.htm 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您也應該看到以下輸出：

在以上示例中，更改微調器的值，然後檢視為 spin 和 stop 事件顯示的訊息。現在更改微調器的焦點，您將看到在 change 事件上顯示的訊息。

擴充套件點

微調器微件是使用微件工廠構建的，可以擴充套件。要擴充套件微件，我們可以覆蓋或新增到現有方法的行為。以下方法提供了與微調器方法相同的 API 穩定性作為擴充套件點。列在 上表 中。

序號 方法和描述
1 _buttonHtml(event)

此方法返回一個字串，它是一個 HTML。此 HTML 可用於微調器的遞增和遞減按鈕。為了關聯事件能夠工作，每個按鈕都必須被賦予 ui-spinner-button 類名。此方法不接受任何引數。

擴充套件點 - _buttonHtml(event, ui)

此方法返回一個字串，它是一個 HTML。此 HTML 可用於微調器的遞增和遞減按鈕。為了關聯事件能夠工作，每個按鈕都必須被賦予 ui-spinner-button 類名。此方法不接受任何引數。

程式碼示例

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml(event)

此方法確定用於包裝微調器的 <input> 元素的 HTML。此方法不接受任何引數。

擴充套件點 - _uiSpinnerHtml(event, ui)

此方法確定用於包裝微調器的 <input> 元素的 HTML。此方法不接受任何引數。

程式碼示例

_uiSpinnerHtml: function() {
  return "";
}
jQuery UI 微件工廠是一個可擴充套件的基礎，所有 jQuery UI 的微件都是基於它構建的。使用微件工廠構建外掛提供了狀態管理的便利，以及對常見任務（例如公開外掛方法和在例項化後更改選項）的約定。
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.