jQueryのUIの例 - 回転子（スピナー）
上/下矢印ボタンやキー処理により、入力された値は、テキスト入力機能を増強しました。
スピナーメンバーの詳細については、APIドキュメントを参照してください回転子メンバー（スピナーウィジェット） 。
デフォルトの機能
デフォルトの回転子。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
var spinner = $( "#spinner" ).spinner();
$( "#disable" ).click(function() {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
});
$( "#destroy" ).click(function() {
if ( spinner.data( "ui-spinner" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner();
}
});
$( "#getvalue" ).click(function() {
alert( spinner.spinner( "value" ) );
});
$( "#setvalue" ).click(function() {
spinner.spinner( "value", 5 );
});
$( "button" ).button();
});
</script>
</head>
<body>
<p>
<label for="spinner">选择一个值：</label>
<input id="spinner" name="value">
</p>
<p>
<button id="disable">切换禁用/启用</button>
<button id="destroy">切换部件</button>
</p>
<p>
<button id="getvalue">获取值</button>
<button id="setvalue">设置值为 5</button>
</p>
</body>
</html>
通貨
この例では、通貨オプション及び回転子の数と、寄付の形です。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 旋转器（Spinner） - 货币</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#currency" ).change(function() {
$( "#spinner" ).spinner( "option", "culture", $( this ).val() );
});
$( "#spinner" ).spinner({
min: 5,
max: 2500,
step: 25,
start: 1000,
numberFormat: "C"
});
});
</script>
</head>
<body>
<p>
<label for="currency">要捐款的货币</label>
<select id="currency" name="currency">
<option value="en-US">US $</option>
<option value="de-DE">EUR €</option>
<option value="ja-JP">YEN ¥</option>
</select>
</p>
<p>
<label for="spinner">要捐款的数量：</label>
<input id="spinner" name="spinner" value="5">
</p>
</body>
</html>
10進数
この例では、小数点回転体です。 0.01刻み。 文化を変更するときに、セレクタの現在の値を読み取ります文化的な変化に対応コードが、それは新しい文化のスタイルに基づいて値をリセットします。
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの回転子（スピナー） - 進</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ jquery.mousewheel.js"> </スクリプト>
<SCRIPT SRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ globalize.js"> </スクリプト>
<スクリプトSRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ globalize.culture.de-DE.js"> </スクリプト>
<スクリプトSRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ globalize.culture.ja-JP.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
{（$（ "#spinner」）.spinner
ステップ：0.01、
numberFormat：「n」は
}）;
$（ "#culture」）.change（関数（）{
VAR電流= $（ "#spinner」）.spinner（"値 "）;
Globalize.culture（$（この）.val（））;
$（ "#spinner」）.spinner（"値 "、現在の）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
<= "スピナー"のラベル>小数点回転子：</ label>は
<入力されたID = "スピナー"名前= "スピナー"値= "5.06">
</ P>
<P>
<= "文化"のラベル>文化のフォーマットを選択します：</ label>は
<選択のid = "文化">
英語</オプション> <= "選択"を選択オプション値= "EN-EN">
<オプション値=「脱DE ">ドイツ</オプション>
<オプション値= "JA-JP">日本語</オプション>
</選択>
</ P>
</ BODY>
</ HTML>
地図
緯度と経度を変更するには、スピナーを使用して、Googleマップの統合、。
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの回転子（スピナー） - 地図</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "http://maps.google.com/maps/api/js?sensor=false"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ jquery.mousewheel.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
LatLongブログ機能（）{
返す新しいgoogle.maps.LatLng（$（ "＃緯度」）のval（）、$（"＃のLNG」）のval（）..）。
}
関数の位置（）{
map.setCenter（LatLongブログ（））;
}
$（ "#lat、#lng」）.spinner（{
ステップ：0.001、
変更：位置、
停止：ポジション
}）;
VARマップ=新しいgoogle.maps.Map（$（ "＃マップ"）[0]、{
ズーム：8、
センター：LatLongブログ（）、
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
}）;
</スクリプト>
<スタイル>
#map {
幅：500pxなど。
高さ：500pxなど。
}
</スタイル>
</ HEAD>
<ボディ>
緯度</ label>は、<= "緯度"のラベルは>
<入力されたID = "緯度"名前= "緯度"値= "44.797">
<BR>
<= "LNG"のラベル>経度</ label>は
<入力されたID = "LNG"名前= "LNG"の値= " - 93.278">
<DIVのID = "マップ"> </ div>の
</ BODY>
</ HTML>
オーバーフロー
-10から10までのオーバーフロー回転子を制限します。 10以上の値が、-10にオーバーフロー、およびその逆の場合。
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの回転子（スピナー） - オーバーフロー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ jquery.mousewheel.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
{（$（ "#spinner」）.spinner
スピン：機能（イベント、UI）{
場合（ui.value> 10）{
$（この）.spinner（ "値"、-10）;
falseを返します。
}エルス場合（ui.value <-10）{
$（この）.spinner（ "値"、10）;
falseを返します。
}
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
</ラベル>：値を選択し、<= "スピナー"のラベル>
<入力されたID = "スピナー"名= "値">
</ P>
</ BODY>
</ HTML>
時間
これは、回転子のカスタムパーツから延びています。 プラグインのカスタム・ステップとページのオプションでタイムスタンプを解析し、出力するためにグローバル化（グローバリゼーション）を使用します。 アップ/ダウン分間のカーソルアップ/ダウン、ページアップ/ダウン時間の増分/減少のため。
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの回転子（スピナー） - タイム</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ jquery.mousewheel.js"> </スクリプト>
<SCRIPT SRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ globalize.js"> </スクリプト>
<スクリプトSRC = "/静的/のJS / jqueryui /リソース/デモ/外部/ globalize.culture.de-DE.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$ .widget（「Ui.timespinner "、$の.ui.spinner、{
オプション：{
//第二ステップ：60 * 1000年、
// Hページ：60
}、
_parse：関数（値）{
場合（typeof演算値=== "文字列"）{
{タイムスタンプ//場合（数（値）==値）を有し、
番号（値）を返します。
}
+ Globalize.parseDate（値）を返します。
}
値を返します。
}、
_format：関数（値）{
Globalize.format（新しいDate（値）、「トン」）を返します。
}
}）;
$（関数（）{
$（ "#spinner」）.timespinner（）;
$（ "#culture」）.change（関数（）{
VAR電流= $（ "#spinner」）.timespinner（"値 "）;
Globalize.culture（$（この）.val（））;
$（ "#spinner」）.timespinner（"値 "、現在の）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
<= "スピナー"のラベル>時間ローテータ：</ label>は
<入力されたID = "スピナー"名前= "スピナー"値= "午前8時30分PM">
</ P>
<P>
<= "文化"のラベル>文化のフォーマットを選択します：</ label>は
<選択のid = "文化">
英語</オプション> <= "選択"を選択オプション値= "EN-EN">
<オプション値=「脱DE ">ドイツ</オプション>
</選択>
</ P>
</ BODY>
</ HTML>