0

我正在使用 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 的其余部分后面。

你有什么技巧和窍门要和我分享吗？

4

1 回答 1

0

尝试这样放置：

    <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>

您的进度条应该出现在您的代码上方，如果它没有在进度条中隔离问题。

于 2012-08-14T17:26:39.310 回答