jQuery UI の Spinner によるスピナーのアイコンを指定

jQuery UI の Spinner で作るスピナーのアイコンを指定する方法。

実装例(サンプル)

実装例(サンプル)について

デフォルトの「▲」と「▼」を、「+」と「-」に変更した。

実装例(サンプル)の動作について

「+」をクリックすると、インプット欄の数値に「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

アイコンは、iconsオプションで指定できる。

<script>
jQuery( function() {
    jQuery( "#sampleSpinner" ).spinner(
        {
            icons: {
                up: "ui-icon-plus",
                down: "ui-icon-minus"
            }
        }
    );
} );
</script>

HTML

<input id="sampleSpinner">

スポンサード リンク

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