Jquery ui进度条不显示在其他元素的前面

Question

我使用的是JQuery UI 1.8.20、asp.net 4.0、VS 2010和

在加载数据以填充某些列表时，我遇到在所有其他标记元素前面显示进度条的问题。

我的html标记基本上是这样的(splitDocumentProgressbar是进度条)：

<div id="mainCategorizerContainer">
    <div id="uncategorizedArea" class="uncategorized-area">        
        <ul id="uncategorizedPagesList" class="gallery ui-helper-reset ui-widget ui-helper-clearfix uncategorized-document-pages-list-area uncategorizedPages">                   
        </ul>        
    </div>
    <div id="categorizedArea" class="categorized-area">
        <ul id="documentCategoryList" class="document-category-list-area ui-helper-reset">                                      
        </ul>
        <ul id="categorizedDocumentPagesList" class="categorized-document-pages-list-area ui-helper-reset" >                       
        </ul>
    </div>
    <div id="splitDocumentProgressbar" style="width: 20%;"></div>
    <div id="splitDocumentDialog"><span id="splitDocumentDialogContent"></span></div>
</div>

填充一个列表并更新进度条的javascript (此代码位于我编写的外部javascript文件中，此文件在定义标记的aspx中引用)：

var initializeUncategorizedPagesList = function (data) {
    var listItems = [];

    var progressBarSteps = data.DocumentPages.length;
    showProgressBar(true);

    $.each(data.DocumentPages, function (index, documentPage) {

        updateProgressBar(progressBarSteps, index);

        var headerClass = $.validator.format('<h5 class="ui-widget-header">{0}</h5>', documentPage.Title);
        var image = $.validator.format('<img src="Handlers/ImageHandler.ashx?docid={0}&variantid={1}" alt="{2}"/>', documentPage.DocumentId, documentPage.ThumbVariantId, documentPage.Title);
        var imageUrl = $.validator.format('<a href="Handlers/ImageHandler.ashx?docid={0}&variantid={1}" title="Forstørr bilde" class="ui-icon ui-icon-zoomin">Forstørr bilde</a>', documentPage.DocumentId, documentPage.HoverVariantId, documentPage.Title);
        var listClass = $.validator.format('<li id="uncategorizedPage{0}" class="ui-widget-content ui-corner-tr">{1} {2} {3}</li>', documentPage.DocumentId, headerClass, image, imageUrl);

        listItems.push(listClass);
    });

    pub.UncategorizedPagesList.append(listItems.join(''));
    showProgressBar(false);
};


var updateProgressBar = function (progressBarStep, index) {

    //If this is true, the progressbar property is not set
    if (pub.Progressbar === "Progressbar") {
        return;
    }

    if (progressBarStep === 0) {
        return;
    }

    var progressBarValue = (100 / progressBarStep) * (index + 1);

    pub.Progressbar.progressbar({
        value: progressBarValue
    });
};

// Show/hide the progress bar and will also reset the progress bar
var showProgressBar = function (show) {

    if (show === true) {
        updateProgressBar(1, -1);
        pub.Progressbar.show();
    }
    else {
        pub.Progressbar.hide();
    }
};

进度条工作正常。我之所以知道这一点，是因为当我调试我的javascript代码时，我可以看到显示了进度条，并且值增加了。但在我看来，当我在没有调试的情况下运行代码时，进度条似乎隐藏在ui的其余部分后面。

你有什么小贴士和小窍门和我分享吗？

Answer 1

试着这样放：

    <div id="splitDocumentProgressbar" style="width: 20%;"></div>
    <div id="mainCategorizerContainer">
        <div id="uncategorizedArea" class="uncategorized-area">
            <ul id="uncategorizedPagesList" class="gallery ui-helper-reset ui-widget ui-helper-clearfix uncategorized-document-pages-list-area uncategorizedPages"></ul>
        </div>
        <div id="categorizedArea" class="categorized-area">
            <ul id="documentCategoryList" class="document-category-list-area ui-helper-reset"></ul>
            <ul id="categorizedDocumentPagesList" class="categorized-document-pages-list-area ui-helper-reset" ></ul>
        </div>
        <div id="splitDocumentDialog">
            <span id="splitDocumentDialogContent"></span>
        </div>
    </div>

你的进度条应该出现在你的代码上面，如果没有，你就把问题隔离在进度条里了。