jQuery

jQuery UIでSpinnerを設定する方法

2021年10月22日 by single コメントはまだありません

jQuery UIでSpinnerを設定する方法

サンプル

スピナー


デフォルト

整数値

小数値

時間

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>jQuery UI Spinner </title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
   <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
   <script src="https://jqueryui.com/resources/demos/external/globalize/globalize.js"></script>
   <script src="https://jqueryui.com/resources/demos/external/globalize/globalize.culture.de-DE.js"></script>
   <script src="https://jqueryui.com/resources/demos/external/globalize/globalize.culture.ja-JP.js"></script>
   <script src="https://jqueryui.com/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>

   <script>
      /* incremental オプションの呼び出し関数 */
      function spinnerIncrement() {
         return 3;
      }
      $( function() {
         var spinner1 = $( "#spinner1" ).spinner();

         var spinner2 = $( "#spinner2" ).spinner({
            incremental :spinnerIncrement,
            max :9,
            min:-9 
         });


         $( "#spinner3" ).spinner({
            step: 0.01,
            numberFormat: "n"
         });
         $( "#culture3" ).on( "change", function() {
            var current = $( "#spinner3" ).spinner( "value" );
            Globalize.culture( $(this).val() );
            $( "#spinner3" ).spinner( "value", current );
         });
         $.widget( "ui.timespinner", $.ui.spinner, {
            options: {
               // seconds
               step: 60 * 1000,
               // hours
               page: 60
            },
            _parse: function( value ) {
               if ( typeof value === "string" ) {
                  // already a timestamp
                  if ( Number( value ) == value ) {
                     return Number( value );
                  }
                  return +Globalize.parseDate( value );
               }
               return value;
            },
            _format: function( value ) {
               return Globalize.format( new Date(value), "t" );
            }
         });

         $( "#spinner4" ).timespinner();
         $( "#culture4" ).on( "change", function() {
            var current = $( "#spinner4" ).timespinner( "value" );
            Globalize.culture( $(this).val() );
            $( "#spinner4" ).timespinner( "value", current );
         });
      } );
   </script>
</head>
<body>
   <h2>スピナー</h2>

   <div>
      <h3>デフォルト</h3>
      <p>
         <label for="spinner1">値を選択してください:</label>
         <input id="spinner1" name="value">
      </p>
   </div>

   <div>
      <h3>整数値</h3>
      <p>
         <label for="spinner2">値を選択してください:</label>
         <input id="spinner2" name="value">
      </p>
   </div>

   <div>
      <h3>小数値</h3>
      <p>
         <label for="spinner3">小数値:</label>
         <input id="spinner3" name="spinner" value="5.06">
      </p>
      <p>
         <label for="culture3">小数値に適用するフォーマットのカルチャを選択してください:</label>
         <select id="culture3">
            <option value="en-EN" selected="selected">英語</option>
            <option value="de-DE">ドイツ語</option>
            <option value="ja-JP">日本語</option>
         </select>
      </p>
   </div>


   <div>
      <h3>時間</h3>
      <p>
         <label for="spinner4">時刻:</label>
         <input id="spinner4" name="spinner" value="08:30 PM">
      </p>
      <p>
         <label for="culture4">時刻に適用するフォーマットのカルチャを選択してください</label>
         <select id="culture4">
            <option value="en-EN" selected="selected">英語</option>
            <option value="de-DE">ドイツ語</option>
            <option value="ja-JP">日本語</option>
         </select>
      </p>
   </div>

<body>
</html>

デモ

Spinner Widget

オプション

Spinner ウィジェットのオプションを紹介していこうと思います。

classes

Spinnerのスタイルのクラスを定義できるオプションです。デフォルトは以下の通りです。

{
  "ui-spinner": "ui-corner-all",
  "ui-spinner-down": "ui-corner-br",
  "ui-spinner-up": "ui-corner-tr"
}

culture

数値や通貨の場合、国／地域によって違うフォーマットが違うので、利用するカルチャを設定設定できます。

デフォルトは「null」。

日本の場合は「ja」、フランスの場合は「fr」のように指定します。

disabled

「true」にすると無効化することができるオプションです。

デフォルトは「false」です。

icons

Spinnerのアイコンを指定できるオプションです。デフォルトは以下の通りです。

{
 down: "ui-icon-triangle-1-s"
,  up: "ui-icon-triangle-1-n" 
}

downが減らすためのアイコン、upが増加用のアイコンとなります。

incremental

増加数、または、減少数を定義する関数を指定できるオプションです。

デフォルトは「true」です。

max

増加できる最大値を定義できるオプションです。

min

減少できる最小値を定義できるオプションです。

numberFormat

数値フォーマットを定義できるオプションです。一般的なオプションとしては以下の二つになります。

  • n：数値型
  • C：通貨型

page

「pageUp」または「pageDown」メソッド実行時、増える、または、減る値を定義できるオプションです。

デフォルトは「10」です。

step

Spinnerアイコンクリック時、または、「stepUp」／「stepDown」メソッド実行時、増える、または減る値を定義できるオプションです。

デフォルトは「1」です。