0

編集 - 以下のフレンドリーなコメンターのおかげで、なんとかうまくいきました。関数を適切な場所で呼び出していなかったため、かなり基本的なものであることが判明しました。関数呼び出しを、DragDealer を使用している div のグループを開くクリック イベントに移動したところ、動作するようになりました。

構築中のサイトのスライダーにDragdealerプラグインをセットアップしようとしています

ブラウザー ウィンドウのサイズを少し変更するまで、スライダー ボタンを移動できません。スライダー自体はページの読み込み時に非表示の div にあるため、DragDealer の呼び出しを親 div が開いたときに接続しましたが、まだ初期化されていません。

<div id="assetTable">
    <div id="assetTableHeaders">
        <div class="investmentHeading odd">Investment option</div>
            <div class="investmentHeading even">Allocation</div>
        </div>
        <div class="investmentOption" id="global_property">
            <div class="investmentTitle"><a href="#">Global Property</a></div>
            <div class="investmentSlider">
                <div class="slider short">
                    <div class="slider-bg">
                        <div class="slider-indicator"><div class="active">&nbsp;</div></div>
                <div id="slider_global_property" class="dragdealer">
                                                <div class="handle ir" style="left: 208px;">Drag</div>
                </div>
            </div>
        </div>
    </div>
    <div class="investmentInput">
    <input type="text" id="input_global_property" class="investmentPercent" name="input_global_property" value="0%">
</div>
</div>
</div>

「asseTtable」は、jquery を介して onclick ハンドラーによって展開されるまで非表示になります

function setUpSliders() {
var val_global_property = document.getElementById('input_global_property');

var sliderGlobalProperty = new Dragdealer('slider_global_property',
    {
        steps: 100,
        animationCallback: function(x, y)
    {
        val_global_property.value = (Math.round(x * 100) + '%');
    }
});

$('#input_global_property').change(function(){
    sliderGlobalProperty.setStep(stripPercentages());
        return false;
    });

}

$('#investmentOption_selfSelect').click(function(){
    setUpSliders();
});
4

2 に答える 2

2

私は DragDealer で同じ問題を抱えていましたが、Google 経由でこの回答を見つけました。示されているように、JQuery を使用して 1 つの HTML ページ ビューから別の HTML ページ ビューに移行していて、fadeOut/fadeIn が完了する前に setUpSliders() を呼び出していました。この回答を読んだ後、コードを変更して、フェードインが完了した後に setUpSliders() を呼び出すようにしました。これで問題は解決しました。この例は、他の人を助けるかもしれません。

//switch from Home page to Charts page DOM
var switchToChartsPage = function () {
    $("#HomePage").fadeOut(fadeOutTime, function () {
        $("#chartsPage").fadeIn(fadeInTime, function () { setUpSliders(); }); 
        //Note: delay setting up DragDealer sliders until after DOM settles
    });
    startChartPage();
}

var startChartPage = function () {
    showPanels = true; //initialization switch
      <some code removed>
    carouselPaneCount = buildCharts(); //build the charts and tables html
    //setUpSliders(); // do NOT set up the sliders here - see comment above
    $(".chartspagetitle").text(pageTitleTextLine[currentLocalStorageKey]);
}
于 2014-02-12T22:23:54.760 に答える
1

フレンドリーなコメント投稿者 @Juhana のおかげで、なんとか解決できました。関数を適切な場所で呼び出していなかったため、かなり基本的なものであることが判明しました。関数呼び出しを、DragDealer を使用している div のグループを開くクリック イベントに移動したところ、動作するようになりました。

于 2013-02-21T08:42:53.363 に答える