5

ご存知かもしれませんが、私はjQueryを初めて使用するため、このテーマに属さないコードの改善は引き続き非常に許可されています。

これは私のHTMLコードです：

<div style="display: inline-block; width: 120px;">
    <div>
        Bananas:
        <br />
        <input id="bananas_amount" />
        <input id="bananas_amount_percent" />
    </div>
    <br />
    <div id="bananas" style="height:200px;"></div>
</div>

そして、これは私の恐ろしいjsコードです：

$( "#bananas" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 20,
    step: 5,
    slide: function( event, ui ) {
        $( "#bananas_amount_percent" ).val( ui.value + " %" );

            // the code displays a percentage by standart, but I need the real value, too:
            var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
            var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
            var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
            $( "#bananas_amount" ).val( bananas_amount + " g" );
    }
});
$( "#bananas_amount_percent" ).val( $( "#bananas" ).slider( "value" ) + " %" );

// again the real value (else the value would not be updatet on reload-reset)
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );

（重量は200）

ただし、1つの「小さな」詳細を除いて、機能しています。マウスホイールではありません。私はすでにこの拡張機能が必要であることを知っています：https ：//github.com/brandonaaron/jquery-mousewheel/downloads

しかし、これをスライダーに実装する方法がまったくわかりません（私のサイトには5つあります）。

pls、Thxを助けて！

4

3 に答える 3

8

マウスホイール プラグインは、その役割に対して重すぎます。エッセンスを抽出しました。すべてのブラウザでうまく機能します。

$('#bananas').bind('mousewheel DOMMouseScroll', function (e) {
    var delta = 0, element = $(this), value, result, oe;
    oe = e.originalEvent; // for jQuery >=1.7
    value = element.slider('value');

    if (oe.wheelDelta) {
        delta = -oe.wheelDelta;
    }
    if (oe.detail) {
        delta = oe.detail * 40;
    }

    value -= delta / 8;
    if (value > 100) {
        value = 100;
    }
    if (value < 0) {
        value = 0;
    }

    result = element.slider('option', 'slide').call(element, e, { value: value });
    if (result !== false) {
        element.slider('value', value);
    }
    return false;
});

編集：に#slider変更#bananas

EDIT2：トリガーslideイベントを追加

プロパティのみを使用しているため、valueこのプロパティのみを使用してパラメーター オブジェクトに渡します。さらに何かが必要な場合は、忘れずにマウスホイール コードに追加してください。

EDIT3：slide関数が返されたときに変更をキャンセルする機能を追加しましfalseた（ドキュメントのように）

更新:deltaホイールの方向を示すだけでなく、より深い意味もあります。スクロールするピクセル数を記述します。スクロールのデフォルト設定は 3 行、つまり 120 ピクセルですが、異なる場合があります。
ホイールの方向のみを取得する場合は、次のように変更します。

value -= delta / 8;

これに：

value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0;

ただし、発生することはありdelta === 0ません。

更新: jQuery (e.originalEvent) の新しいバージョンの一部を追加しました。

于 2011-04-19T22:06:12.630 に答える
4

これまでマウスホイールプラグインを使用したことはありませんが、私が見たところ、次のように使用する必要があります。

$("#DivName").mousewheel(function(event, delta) {
     //Trigger slide event


      //Prevent the default mouse wheel
      event.preventDefault();

});

DivName はおそらくあなたのスライダーであり、Delta はスクロール方向 (単位) であると私は信じています。

于 2011-04-19T21:44:02.640 に答える