Jqueryui-spinner
JqueryUI-スピナー
スピナーウィジェットは、入力ボックスの左に上/下矢印を追加するため、ユーザーは入力ボックスの値を増減できます。 ユーザーは値を直接入力するか、キーボード、マウス、またはスクロールホイールで回転して既存の値を変更できます。 値をスキップするステップ機能もあります。 基本的な数値機能に加えて、グローバル化された書式設定オプション（通貨、千単位の区切り記号、小数など）も有効になるため、便利な国際化されたマスクエントリボックスが提供されます。
'__ 次の例は、Globalize_に依存しています。 Globalizeファイルはhttps://github.com/jquery/globalizeから取得できます。 _releases_リンクをクリックし、必要なバージョンを選択して、。zip_または_tar.gz_ファイルをダウンロードします。 ファイルを抽出し、次のファイルをサンプルのあるフォルダーにコピーします。
- lib/globalize.js：このファイルには、ローカライズを処理するためのJavascriptコードが含まれています
- lib/globalize.culture.js：このファイルには、Globalizeライブラリに付属しているロケールの完全なセットが含まれています。
これらのファイルは、jquery-uiライブラリの_external_フォルダーにもあります。 '__
jQueryUIは、スピナーを作成するspinner（）メソッドを提供します。
構文
- spinner（）*メソッドは2つの形式で使用できます-
- link：/jqueryui/jqueryui_spinner＃spinner_options [$（selector、context）.spinner（options）]メソッド
- link：/jqueryui/jqueryui_spinner＃spinner_methods [$（selector、context）.spinner（ "action"、params）]メソッド
[spinner_options]#
$（セレクター、コンテキスト）.spinner（オプション）メソッド
_spinner（オプション）_メソッドは、HTML要素とそのコンテンツをスピナーとして処理および管理する必要があることを宣言します。 _options_パラメーターは、関連するスピナー要素の外観と動作を指定するオブジェクトです。
構文
$(selector, context).spinner (options);Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-
$(selector, context).spinner({option1: value1, option2: value2..... });次の表は、この方法で使用できるさまざまな_オプション_を示しています-
| Sr.No. | Option & Description |
|---|---|
| 1 |
このオプションは、値の解析とフォーマットに使用するカルチャを設定します。 デフォルトでは、その値は null です。これは、Globalizeで現在設定されているカルチャが使用されることを意味します。 オプション-カルチャ このオプションは、値の解析とフォーマットに使用するカルチャを設定します。 デフォルトでは、その値は null です。これは、Globalizeで現在設定されているカルチャが使用されることを意味します。 _numberFormat_オプションが設定されている場合にのみ関連します。 Globalizeを含める必要があります。 構文 |
| 2 |
このオプションは、_true_に設定されている場合、スピナーを無効にします。 デフォルトでは、その値は false です。 オプション-無効 このオプションは、_true_に設定されている場合、スピナーを無効にします。 デフォルトでは、その値は false です。 構文 |
| 3 |
このオプションは、ボタンに使用するアイコンを設定し、https://api.jqueryui.com/theming/icons/[jQuery UI CSS Framework]によって提供されるアイコンと一致します。 デフォルトでは、その値は \ {down： "ui-icon-triangle-1-s"、up： "ui-icon-triangle-1-n"} です。 オプション-アイコン このオプションは、ボタンに使用するアイコンを設定し、https://api.jqueryui.com/theming/icons/[jQuery UI CSS Framework]によって提供されるアイコンと一致します。 デフォルトでは、その値は \ {down： "ui-icon-triangle-1-s"、up： "ui-icon-triangle-1-n"} です。 構文 |
| 4 |
このオプションは、スピンボタンを押したときに実行されるステップの数を制御します。 デフォルトでは、その値は true です。 オプション-増分 このオプションは、スピンボタンを押したときに実行されるステップの数を制御します。 デフォルトでは、その値は true です。 これはタイプにすることができます-
構文 |
| 5 |
このオプションは、許可される最大値を示します。 デフォルトでは、その値は null であり、強制される最大値はありません。 オプション-最大 このオプションは、許可される最大値を示します。 デフォルトでは、その値は null であり、強制される最大値はありません。 これはタイプにすることができます-
構文 |
| 6 |
このオプションは、許可される最小値を示します。 デフォルトでは、その値は null です。これは、強制される最小値がないことを意味します。 オプション-最小 このオプションは、許可される最小値を示します。 デフォルトでは、その値は null です。これは、強制される最小値がないことを意味します。 これはタイプにすることができます-
. 構文 |
| 7 |
このオプションは、可能であれば、_Globalize_に渡される数値の形式を示します。 最も一般的なのは、10進数の「n」と通貨値の「C」です。 デフォルトでは、その値は null です。
このオプションは、可能であれば、_Globalize_に渡される数値の形式を示します。 最も一般的なのは、10進数の「n」と通貨値の「C」です。 デフォルトでは、その値は null です。 構文 |
| 8 |
このオプションは、pageUp/pageDownメソッドを介してページングするときに実行するステップの数を示します。 デフォルトでは、その値は 10 です。 オプション-ページ このオプションは、pageUp/pageDownメソッドを介してページングするときに実行するステップの数を示します。 デフォルトでは、その値は 10 です。 構文 |
| 9 |
このオプションは、ボタンまたは_stepUp（）/stepDown（）_メソッドを使用してスピンするときに実行するステップのサイズを示します。 要素の_step_属性が存在し、オプションが明示的に設定されていない場合に使用されます。 オプション-ステップ このオプションは、ボタンまたは_stepUp（）/stepDown（）_メソッドを使用してスピンするときに実行するステップのサイズを示します。 要素の_step_属性が存在し、オプションが明示的に設定されていない場合に使用されます。 これはタイプにすることができます-
|
次のセクションでは、スピナーウィジェットの機能のいくつかの実例を示します。
デフォルトの機能
次の例は、* 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>上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
最小、最大、およびステップオプションの使用
次の例は、JqueryUIのスピナーウィジェットで3つのオプション 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>上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
上記の例では、最初のスピナーで最大値と最小値がそれぞれ10と-10に設定されていることがわかります。 したがって、これらの値を超えると、スピナーはインクリメント/デクリメントを停止します。 2番目のスピナーでは、スピナーの値が100ずつ増加/減少します。
アイコンの使用オプション
次の例は、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>上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
上記の例では、画像スピナーが変更されていることがわかります。
カルチャ、numberFormat、およびページオプションの使用
次の例は、JqueryUIのスピナーウィジェットで3つのオプション 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>上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
上記の例では、_numberFormat_が "C"に設定され、_culture_が "de-DE"に設定されているため、スピナーに通貨形式で数値が表示されています。 ここでは、jquery-uiライブラリのGlobalizeファイルを使用しました。
[spinner_methods]#
$（セレクター、コンテキスト）.spinner（ "action"、params）メソッド
_spinner（ "action"、params）_メソッドは、スピナーの有効化/無効化など、スピナー要素に対してアクションを実行できます。 アクションは、最初の引数で文字列として指定されます（たとえば、「disable」はスピナーを無効にします）。 次の表で、渡すことができるアクションを確認してください。
構文
$(selector, context).spinner ("action", params);;次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-
| Sr.No. | Action & Description |
|---|---|
| 1 |
このアクションは、要素のスピナー機能を完全に破壊します。 要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。 アクション-破壊 このアクションは、要素のスピナー機能を完全に破壊します。 要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。 構文 |
| 2 |
このアクションは、スピナー機能を無効にします。 このメソッドは引数を取りません。 アクション-無効 このアクションは、スピナー機能を無効にします。 このメソッドは引数を取りません。 構文 |
| 3 |
このアクションにより、スピナー機能が有効になります。 このメソッドは引数を取りません。 アクション-有効 このアクションにより、スピナー機能が有効になります。 このメソッドは引数を取りません。 構文 |
| 4 |
このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前です。 アクション-option（optionName） このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前です。 構文 |
| 5 |
このアクションは、現在のスピナーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。 アクション-オプション このアクションは、現在のスピナーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。 構文 |
| 6 |
このアクションは、指定された_optionName_に関連付けられたスピナーオプションの値を設定します。
このアクションは、指定された_optionName_に関連付けられたスピナーオプションの値を設定します。 構文 |
| 7 |
このアクションは、スピナーの1つ以上のオプションを設定します。 アクション-オプション（オプション） このアクションは、スピナーの1つ以上のオプションを設定します。 構文 |
| 8 |
このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を減らします。 アクション-pageDown（[pages]） このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を減らします。 pageDown（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。 構文 |
| 9 |
このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を増やします。 アクション-pageUp（[pages]） このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を増やします。 pageUp（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。 構文 |
| 10 |
このアクションは、指定されたステップ数だけ値を減らします。 アクション-stepDown（[steps]） このアクションは、指定されたステップ数だけ値を減らします。 stepDown（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。 構文 |
| 11 |
このアクションは、指定されたステップ数だけ値を増やします。 アクション-stepUp（[steps]） このアクションは、指定されたステップ数だけ値を増やします。 stepUp（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。 構文 |
| 12 |
このアクションは、現在の値を数値として取得します。 値はnumberFormatおよびカルチャオプションに基づいて解析されます。 このメソッドは引数を取りません。 アクション-値 このアクションは、現在の値を数値として取得します。 値はnumberFormatおよびカルチャオプションに基づいて解析されます。 このメソッドは引数を取りません。 構文 |
| 13 |
このアクションは値を設定します。 値が渡された場合、値はnumberFormatおよびcultureオプションに基づいて解析されます。 アクション-値（値） このアクションは値を設定します。 値が渡された場合、値はnumberFormatおよびcultureオプションに基づいて解析されます。 構文 |
| 14 |
このアクションは、スピナーウィジェット要素を返します。 _ui-spinner_クラス名で注釈が付けられたもの。 アクション-ウィジェット このアクションは、スピナーウィジェット要素を返します。 _ui-spinner_クラス名で注釈が付けられたもの。 構文 |
次の例は、上記の表に示されているアクションの使用方法を示しています。
アクション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>上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです-
上記の例では、それぞれのボタンを使用して、スピナーを増減します。
アクションの使用の有効化と無効化
次の例は、_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>上記のコードをHTMLファイル spinnerexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-
上記の例では、有効化/無効化ボタンを使用してスピナーを有効または無効にします。
スピナー要素のイベント管理
前のセクションで見たスピナー（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-
| Sr.No. | Event Method & Description |
|---|---|
| 1 |
このイベントは、スピナーの値が変更され、入力がフォーカスされなくなったときにトリガーされます。 イベント-change（event、ui） このイベントは、スピナーの値が変更され、入力がフォーカスされなくなったときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
| 2 |
このイベントは、スピナーが作成されたときにトリガーされます。 イベント-create（event、ui） このイベントは、スピナーが作成されたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
| 3 |
このイベントは、インクリメント/デクリメント中にトリガーされます。 イベント-spin（event、ui） このイベントは、インクリメント/デクリメント中にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベントがキャンセルされない限り、設定される新しい値を表します。 構文 |
| 4 |
このイベントはスピンの前にトリガーされます。 キャンセルして、スピンの発生を防ぐことができます。 イベント-start（event、ui） このイベントはスピンの前にトリガーされます。 キャンセルして、スピンの発生を防ぐことができます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
| 5 |
このイベントはスピン後にトリガーされます。 イベント-停止（イベント、UI） このイベントはスピン後にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
例
次の例は、スピナーウィジェットでのイベントメソッドの使用方法を示しています。 この例は、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>上記のコードをHTMLファイル spinnerexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-
上記の例では、スピナーの値を変更し、スピンおよび停止イベントについて以下に表示されるメッセージを確認します。 スピナーのフォーカスを変更すると、変更イベントでメッセージが表示されます。
拡張ポイント
スピナーウィジェットは、ウィジェットファクトリで構築され、拡張できます。 ウィジェットを拡張するには、既存のメソッドの動作をオーバーライドまたは追加できます。 次のメソッドは、スピナーメソッドと同じAPI安定性を拡張ポイントとして提供します。 link：/jqueryui/jqueryui_spinner＃dialog_spinner [上記の表]にリストされています。
| Sr.No. | Method & Description |
|---|---|
| 1 |
このメソッドは、HTMLである文字列を返します。 このHTMLは、スピナーの増分ボタンと減分ボタンに使用できます。 関連付けられたイベントが機能するには、各ボタンにui-spinner-buttonクラス名を指定する必要があります。 このメソッドは引数を取りません。 拡張ポイント-_buttonHtml（event、ui） このメソッドは、HTMLである文字列を返します。 このHTMLは、スピナーの増分ボタンと減分ボタンに使用できます。 関連付けられたイベントが機能するには、各ボタンにui-spinner-buttonクラス名を指定する必要があります。 このメソッドは引数を取りません。 コード例 |
| 2 |
このメソッドは、スピナーの<input>要素をラップするために使用するHTMLを決定します。 このメソッドは引数を取りません。 拡張ポイント-_uiSpinnerHtml（event、ui） このメソッドは、スピナーの<input>要素をラップするために使用するHTMLを決定します。 このメソッドは引数を取りません。 コード例 |
'_jQuery UIウィジェットファクトリは、jQuery UIのすべてのウィジェットが構築される拡張可能なベースです。 ウィジェットファクトリを使用してプラグインを作成すると、状態管理に便利なだけでなく、プラグインメソッドの公開やインスタンス化後のオプションの変更などの一般的なタスクの規則が提供されます。_
