13

jQuery UI Sliderで使用するカスタム データ セットを作成できるかどうかを確認したかったのです。[ 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W ] の範囲のドレス サイズがあるサイトで作業しています。

私が抱えている問題は、18 の直後に、少しユニークな「ワイド」サイズにジャンプしたときに発生します。

16W、18W、およびオンのサイズを追加する前に、次のコードを使用して動作するスライダーを作成しました。

$("#slider-size .slider").slider({
  min: 0,
  max: 18,
  step: 2,
  slide: function(event, ui) {
    $(".rsize").text(ui.value);
  }
});

その関数の最後の引数は、スライダーが変更されるとテキスト値を変更します。

このリストの最後に 16W、18W などを追加する方法を知っている人はいますか?

ありがとう！

4

2 に答える 2

34

カスタム サイズの場合、ラベルに別の配列を使用できます。

var sizes = ["0","2","4","6","8","10","12","14","16","18","16W","18W","20W"];
$("#slider-size .slider").slider({
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $(".rsize").text(sizes[ui.value]);
  }
});

サイズを追加または削除するには、sizes配列を変更するだけです。

于 2010-07-26T16:27:09.783 に答える
7

デモ

$("#slider-size .slider").slider({
  min: 0,
  max: 24, // max is 24
  step: 2,
  slide: function(event, ui) {
    var s = ui.value;
    switch(ui.value) {
       case 20:
         s = '16W';
         break;
       case 22:
         s = '18W';
         break;
       case 24:
         s = '12W';
         break;
    }
    $(".rsize").text(s);
  }
});

- - - また - - -

デモ

$("#slider-size .slider").slider({
  min: 0,
  max: 24, // max is 24
  step: 2,
  slide: function(event, ui) {
      $(".rsize").text((ui.value >18)?(ui.value-4)+'W':ui.value);
  }
});​
于 2010-07-26T16:18:43.380 に答える