jQuery UI selectタグ プルダウンをスライダーバーにできるプラグイン selectToUISlider

更新日:

前回のjQuery UI sliderに続いての記事です。

簡単にプルダウンをスライダーにできるプラグインselectToUISlider の説明です。

selectToUISlider pluginデモ
 

selectタグをスライダーにする

 ・JavaScriptファイルのインクルード
 ・CSSファイルのインクルード
 ・セレクトタグ設置
 ・タグに対しての関数コール

<head>
<link type="text/css" href="jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='selectToUISlider.jQuery.js'></script>

<script type='text/javascript'>
    $(document).ready(function() {
      $("#selectSlider").selectToUISlider();
    }
</script>
</head>

<body>
    <select id='selectSlider'>
      <option value="Slower">Slower</option>
      <option value="Slow">Slow</option>
      <option value="Med">Med</option>
      <option value="Fast">Fast</option>
      <option value="Faster">Faster</option>
    </select>

</body>

 
ほんと簡単。用意したselectタグに関数をコールするだけです。

$("#selectSlider").selectToUISlider();

 
 

二つのselectタグを範囲にして一つのスライダーにする

    範囲最少:
    <select id='selectSliderMin'>
      <option value="10">10km</option>
      <option value="20">20km</option>
      <option value="30">30km</option>
      <option value="40">40km</option>
      <option value="50">50km</option>
    </select>

    範囲最大:
    <select id='selectSliderMax'>
      <option value="10">10km</option>
      <option value="20">20km</option>
      <option value="30">30km</option>
      <option value="40">40km</option>
      <option value="50">50km</option>
    </select>

これは何も考えず二つの「select」に関数を実行するだけです。

$("#selectSliderMin,#selectSliderMax").selectToUISlider();

jQUeryのセレクタには「,」で区切るなどすると複数指定できます。
そのふたつを選択した状態で関数をコールすると自動的に関連付けられます。
 
 

オプションを指定してみる

$("#selectSlider").selectToUISlider({
  labels:4,
  labelSrc:"text",
  tooltip:true,
  tooltipSrc:"text",
  sliderOptions: {
    ... // jQuery UI Sliderのオプション
  }
});

すごい簡単です。このプラグイン用に4つ追加されています。

 labels
  スライダーの下に項目の説明がありますが、その表示数です。(初期値は3)
 labelSrc
  表示される項目の説明文の内容が「select」の"value""text"かを指定。(初期値は"value")
 tooltip
  選択時に表示するツールチップのON/OFF(初期値はtrue)
 tooltipSrc
  ツールチップに表示する内容が「select」の"value""text"かを指定。(初期値は"text")
 sliderOptions
  jQuery UI Sliderに使用するオプション
 
 
スライダー化した後にselectタグがいらなければ「hide()」してやればいいだけですし。
jQuery UI のスライダーでは説明不足になるのでこっちを使う事の方が多いです。
 
 

-jQuery
-,

Copyright© 打ち聞かせ , 2021 All Rights Reserved Powered by STINGER.