10

Webフォームのスライダーを生成するための2つの優れたjqueryプラグインを見つけました。これらは、JavaScriptをサポートしていないブラウザーでは、スタイルがオフになっているなど、うまく機能しません。

1つ目はJquery.UIバージョンです：http：//ui.jquery.com/demos/slider/#steps

2つ目は、スライダーを選択する要素です：http ://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

ただし、スライダーを均等に分割するだけではないスライダーを作成する必要があります。

たとえば、次の範囲の数値があるとします。

800、1000、1100、1200、1300、1400、1500

スライダーのギャップを800から1000の間に大きくし、次に1100から1500の間にギャップを小さくしたいと思います。

したがって、スライダーは次のようになります。

800----1000--1100--1200--1300--1400--1500

できればドロップダウンに劣化させたいので、問題は、これをサポートするプラグインを知っているか、これを実現するための最良の方法に関する推奨事項があるか、フィラメントグループプラグインロールを自分でカスタマイズするかなどです。

更新：フィラメントグループのスライダーをハッキングしていて、とにかくJQueryUIのスライダーを介してハンドルを実装しています。したがって、JQuery.UIを改造するのは、それ自体が利用可能な唯一のオプションのようです。コードを掘り下げて、変更が必要な必要なビットを見つけることができるかどうかを確認します。その間に誰かが何かアイデアを持っているなら!!!

4

2 に答える 2

27

スライドイベントにフックする（効果的にオーバーライドする）ことにより、jqueryのスライダーを使用してそれを行うことができます...次のようなもの：

$(function() {
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100];
    var slider = $("#slider").slider({
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
            return false;
        }
    });
    function findNearest(includeLeft, includeRight, value) {
        var nearest = null;
        var diff = null;
        for (var i = 0; i < values.length; i++) {
            if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
                var newDiff = Math.abs(value - values[i]);
                if (diff == null || newDiff < diff) {
                    nearest = values[i];
                    diff = newDiff;
                }
            }
        }
        return nearest;
    }
});

あなたが説明したものでうまくいくはずです...マウスでドラッグし、左/右/ホーム/エンドキーを使用してテストしました(明らかに、垂直にしたい場合は、左/右を上/下に変更する必要があります)スライダー）。

いくつかのメモ:

  • 明らかに、values 配列は、目的に合わせて必要な手順です。
  • また、明らかに、上記のコードは、「スライダー」の id を持つ div が機能することを前提としています。
  • 最小/最大値がスライダーの最小/最大値と同じでない場合、おそらく奇妙に機能します（「最小：値[0]、最大：値[values.length - 1]」を次のように使用することをお勧めしますスライダーの最小/最大オプションを選択すると、常に安全になるはずです）。
  • 明らかに、このオプションは現在ドロップダウンリストに劣化しませんが、非常に簡単に実行できます...単に選択を通常のドロップダウンリスト（javascriptがない場合のデフォルト状態）としてレンダリングし、jqueryを使用して非表示にしますドロップダウン リストを開き、オプションに基づいて値の配列も作成します。次に、上記のコードでスライダーを更新すると同時に (非表示の) ドロップダウン リストを更新するだけで、フォームが投稿されたときにドロップダウン リストで正しい値が選択されます。

それが役立つことを願っています。

于 2009-03-26T03:04:04.773 に答える
0

Es6 では、次の手順で最も近い番号を見つけることができます。

function findClosest(array, value) {
  return array.sort( (a, b) => Math.abs(value - a) - Math.abs(value - b) )[0];
}

let array = [1, 5, 10, 28, 21];
let v = 4;
let number = findClosest(array, v); // -> 5

于 2016-11-30T13:14:14.040 に答える