2

シンプルな1ページのWebサイトを開発しており、jQueryUISliderを統合しています。私が統合しているウェブサイトは：ウェブサイトです。

スライダーに少し問題があるようです。左右の矢印（または左右のキーボードキー）でナビゲートするときにスライダーをよく見ると、最後のステップの前に戻ると、最小範囲が数ピクセル（背景画像）。

また、ハンドルにアタッチされたアニメーションプロパティは、マウスカーソルを使用してハンドルを移動すると機能しません。たとえば、ハンドルが位置0にあり、最後の位置をクリックすると、通常は最後の位置にアニメーション化されますが、そこにジャンプします。

誰かがこれらのバグを修正する方法を教えてもらえますか？最初の問題でCSSに取り組んでみましたが、それが原因ではないようです。

4

2 に答える 2

5

  1. 「最小範囲がハンドルの先にジャンプします」-ここでバグを減らしました：http：//jsfiddle.net/jefferyto/Gd5dn/

    これは、ピクセル以外の値をアニメーション化するときのバグです。jQuery.animate()スライダーはパーセンテージを使用します。アニメーション化する前に、jQueryは要素の開始値（ピクセル単位）を終了値の単位に変換し、この非pxの開始値を要素に割り当てます（jQuery 1.7.2（非縮小）の8601〜8605行目）。

    小さい終了値（0％など）の計算には欠陥があるため、範囲の開始幅が本来の幅よりも大きくなります。

    修正を加えてプルリクエストを開きました。同じ修正をjQueryの現在の安定バージョンに適用できます。

    更新：このバグを修正するプラグイン（jQuery 1.7.2の場合）は次の場所にあります：http：//jsfiddle.net/jefferyto/zbkQX/

    （上部）からコピー

    // Start jQuery.animate() fix

    to（テストコードの前）

    // End jQuery.animate() fix

    このコードをplugins.jsに貼り付けると機能するはずです。

  2. 「最後の位置までアニメーション化する必要がありますが、そこにジャンプします」-これは、SliderプラグインとjPagesプラグインが循環コールバックに接続されているためです。

    ユーザーがスライダーをクリックすると、スライダーがslideイベントをトリガーし、ハンドルと範囲をアニメーション化します。slideイベントハンドラーはjPagesを呼び出して、新しいページに変更します。jPagesは、割り当てられたコールバック関数を呼び出します。これにより、現在のページ番号がSliderに返されます。Sliderはその値を設定し、ハンドル/範囲のアニメーション化を開始します。

    イベントの後slide、Sliderはハンドルと範囲のアニメーションに戻ります（実際には2回目のアニメーションです）。Sliderは.stop(1, 1)、アニメーション化する前に要素を呼び出します。これにより、最初のアニメーションが停止し、すぐに終了値にジャンプします。（.animate()要素はすでに正しい位置にあるため、2番目は何もしません。）

    （私はそれが理にかなっていることを願っています:-)）

    jPagesコールバックにロジックを追加して、トリガーが元々Sliderからのものでない場合にのみ、新しいページ番号でSliderを呼び出すことをお勧めします。

    更新：両方のコールバックを更新する必要があると思います。

    スライダーの場合：

    slide: function(event, ui) {
    if (!self.paging) {
        self.paging = true;
        $(self.shop_navigation_class).jPages(ui.value);
        self.paging = false;
    }
}

    jPagesの場合：

    callback: function(pages) {
    var data = {
        current_page: pages.current,
        total_pages: pages.count
    }
    self.set_local_storage_data(self.data_key, JSON.stringify(data));
    if (!self.paging) {
        self.paging = true;
        $(self.shop_slider_class).slider("value", pages.current);
        self.paging = false;
    }
}

    これでうまくいくかどうか教えてください。

于 2012-06-03T11:10:56.200 に答える
1

最も簡単な答えは、おそらくjQueryUIのスライダーを使用しないことです。

コードを見ると、JSとCSSで簡単に十分な能力があり、その外観とコアの動作を自分で複製し、希望どおりに機能させることができます。

于 2012-06-01T11:32:38.713 に答える