jQuery UI の Spinner によるスピナー入力欄の数値をボタンで取得

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>

JavaScript

<script>
jQuery( function() {
    var $sampleSpinner = jQuery( "#sampleSpinner" ).spinner();
    jQuery( "#sampleGetValueButton" ).button().click( function () {
        jQuery( "#sampleGetValueOutput" ).text( $sampleSpinner.spinner( "value" ) );
    } );
} );
</script>

Spinnerのvalueメソッドを使い、
jQuery( "セレクター" ).spinner().spinner( "value" )
のように取得する。

HTML

<input id="sampleSpinner" value="0">
<button id="sampleGetValueButton">値を取得</button>
<span id="sampleGetValueOutput">0</span>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Spinner, スピナー, フォーム パーマリンク