javascript - Dragdealer初始化

编辑-感谢以下友好的评论者，我设法解决了这个问题。事实证明这是非常基本的，因为我没有在正确的地方调用函数。我将函数调用移到了单击事件，该事件在我使用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”，直到由onclick处理程序通过jquery进行扩展

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();
});

最佳答案

我在DragDealer中遇到了同样的问题，并通过Google在这里找到了这个答案。
如图所示，我正在使用JQuery从一个HTML页面视图过渡到另一个HTML页面视图，并在fadeOut / fadeIn完成之前调用了setUpSliders（）。阅读此答案后，我将代码更改为在fadeIn完成后调用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]);
}