1

ポップアップのテキストを動的に変更しようとしています。私はそれがこのようなものかもしれないと思いました：

$("#mypopup").text("Loading...");
$("#mypopup").popup("open");
load();
$("#mypopup").text("Loaded!");

これは、関数load（）が終了するまで、ポップアップテキストが「Loading..」になることを意味します。次に、「ロード済み」になります。

私はこれを他の多くの異なるアプローチの中で試しましたが、どれもうまくいきませんでした。

誰かがこれを通して私を助けることができますか？

前もって感謝します！

編集 申し訳ありませんが、jQueryMobileを使用していたことを忘れてしまいました。

詳細はこちらhttp://jquerymobile.com/test/docs/pages/popup/index.html

4

1 に答える 1

3

のコンテンツを変更する方法の1つpopup

このようなマークアップがあるとすると、次のようになります。

<div data-role="page" id="page1">
    <div data-role="content">
        <a id="btn2" href="#popup" data-role="button" data-transition="flip" data-rel="popup">Open a popup</a>
        <div data-role="popup" id="popup" data-overlay-theme="a">
            <h1>It's a popup</h1>
        </div>
    </div>
</div>

あなたは処理popupbeforepositionおよび/またはpopupafteropenイベントすることができます

$(document).on("pageinit", "#page1", function(){
    $("#popup").on("popupbeforeposition", function(event, ui) {
        $(this).append("<p>I've been added to popup!</p>");
    });
    $("#popup").on("popupafteropen", function(event, ui) {
        $(this).append("<p>It has been added after I'm open!</p>");
    });
});

別のアプローチは、clickイベントでポップアップのコンテンツを作成（または変更）することです

マークアップを考えると

<a id="btn1" href="#" data-role="button" data-transition="flip">Dynamic popup</a>
<div data-role="popup" id="popup2" data-overlay-theme="e">
</div>

できるよ

$("#btn1").click(function(){
    $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
});

更新： そして最後に、すべてをまとめることができます：

$("#btn1").click(function(){
   $.mobile.loading('show', {theme:"e", text:"Loading the content...", textonly:true, textVisible: true});
    setTimeout(function(){
        //Do some lengthy work here
        doWork();
        //Show the popup
        $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
    }, 50);
});
$("#popup2").on("popupafteropen", function(event, ui) {
    $.mobile.loading('hide');
});

UPDATE2 ：jsFiddleを更新して、時間のかかる作業を説明します

于 2013-01-21T01:05:56.130 に答える