jQuery UI の Spinner で作るスピナー付き入力欄の数値を、リアルタイムに取得する方法。
実装例（サンプル）
値：0
実装例（サンプル）の動作について
「▲」をクリックすると、インプット欄の数値に「1」を加える。
「▼」をクリックすると、インプット欄の数値から「1」を引く。
スピナーで数値を変更すると、「値：」の右横の数値も変更する。
入力欄の数値を直接変更すると、入力欄からフォーカスを外したときに、入力欄の数値を取得し、「値：」の右横の数値を変更する。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
JavaScript
<script>
jQuery( function() {
jQuery( "#sampleSpinner" ).spinner( {
spin: function( event, ui ) {
jQuery( "#sampleGetValueOutput" ).text( ui.value );
},
change: function() {
jQuery( "#sampleGetValueOutput" ).text( jQuery( "#sampleSpinner" ).val() );
}
} );
} );
</script>
jQuery( function() {
jQuery( "#sampleSpinner" ).spinner( {
spin: function( event, ui ) {
jQuery( "#sampleGetValueOutput" ).text( ui.value );
},
change: function() {
jQuery( "#sampleGetValueOutput" ).text( jQuery( "#sampleSpinner" ).val() );
}
} );
} );
</script>
Spinnerのvalueメソッドを使い、jQuery( "セレクター" ).spinner().spinner( "value" )
のように取得する。
HTML
<input id="sampleSpinner" value="0">
<br />
値：<span id="sampleGetValueOutput">0</span>
<br />
値：<span id="sampleGetValueOutput">0</span>