0

おはよう、

ユーザーがさまざまなカテゴリの値を合計で最大100％スライドできるようにするアプリケーションがあります。Safari、Chrome、さらにはIEでも正常に機能しますが、Firefoxでは、ドラッグ可能なハンドルが適切な場所に表示されず、代わりにラッパーdivの上部に表示されます。

それでも、ドラッグする必要のあるバーをクリックすることができます。これは、これが単なるCSSの問題であると私に信じさせます。

標準のjQueryUIテーマローラーを編集せずに使用しました。

スライダーバーのレンダリングに使用されるコードは次のとおりです。

function bind_slider_bar (category) {

    $(slider_id (category) ).slider({
        min     :   0,
        max     :   100,
        value       :   budget.slider_values[category],
        start       :   function (e, ui) {
            budget.category = $(this).attr('id').replace('_slider','');
                    //sets the current global value to the slider being dragged, so the correct values get set, and the others are decreased if necessary.
        },
        stop        :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields();
            update_distribution_notifiers();

        },
        slide       :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields ();
            update_distribution_notifiers();
            var my_position = $( slider_id (category) ).slider("value");
            $( draggable_handle ( category ) ).css('left', my_position);
        }
    });

}

アプリケーションのURLはclearpointccs.org/holiday-plannerにあります-スライダーバー/計算のロジックもまだ少しバグがあることは知っていますが、私が対処できるロジックです。Firefoxのバグはできません。それをテストするには、初期収入フィールドを空白のままにすることができます。

ありがとう、

トム

4

2 に答える 2

1

スライダーコンテナをtd要素から取り出す必要があります。スライダーは絶対位置で動作するため、スライダーを処理するのには適していません。

スライダーコンテナ要素をから変更します

<td id="gifts_slider"></td>
<td id="parties_slider"></td>
<td id="travel_slider"></td>
<td id="food_slider"></td>
<td id="donations_slider"></td>

に

<td><div id="gifts_slider"></div></td>
<td><div id="parties_slider"></div></td>
<td><div id="travel_slider"></div></td>
<td><div id="food_slider"></div></td>
<td><div id="donations_slider"></div></td>
于 2011-11-17T15:42:39.283 に答える
0

テーブルセルをスライダーに変える代わりに（jQueryがそれをサポートしているとは思いませんが、間違っているかもしれませんが、すべての例でdivを使用しています）。テーブルセル内にdivを配置し、それをスライダーコンテナーとして使用します。

追加する場合

display: block:

のtdCSSに、親指が正しく含まれています。しかし、その後、サイズはオフになります。

于 2011-11-17T15:43:06.333 に答える