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>

1 つのリストに入力し、進行状況バーを更新する 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 に答える