web-dev-qa-db-ja.com

ポップアップとコンテンツを動的に作成するjQuery Mobileの最良の方法

JQuery mobileを使用してポップアップを作成する次のコードがあります。ポップアップが作成され、フォームが作成されて、2つのボタンとともにポップアップに追加されます。このコードは機能しますが、私の意図する目標を達成するためのより良い方法があるかどうか疑問に思っています。

    //create a div for the popup
    var $popUp = $("<div/>").popup({
        dismissible : false,
        theme : "a",
        overlyaTheme : "a",
        transition : "pop"
    }).bind("popupafterclose", function() {
                    //remove the popup when closing
        $(this).remove();
    });
    //create a title for the popup
    $("<h2/>", {
        text : PURCHASE_TITLE
    }).appendTo($popUp);

            //create a message for the popup
    $("<p/>", {
        text : PURCHASE_TEXT
    }).appendTo($popUp);

    //create a form for the pop up
    $("<form>").append($("<input/>", {
        type : "password",
        name : "password",
        placeholder : PASSWORD_INPUT_PLACEHOLDER
    })).appendTo($popUp);

   //Create a submit button(fake)
    $("<a>", {
        text : SUBMIT_BTN_TXT
    }).buttonMarkup({
        inline : true,
        icon : "check"
    }).bind("click", function() {
        $popUp.popup("close");
        that.subscribeToAsset(callback);
    }).appendTo($popUp);

    //create a back button
    $("<a>", {
        text : BACK_BTN_TXT,
        "data-jqm-rel" : "back"
    }).buttonMarkup({
        inline : true,
        icon : "back"
    }).appendTo($popUp);

    $popUp.popup("open").trigger("create");
htmljquery-mobilejqueryjquery-mobile-popup
17
user1812741

あなたの例は素晴らしいです、これは動的なjQuery/jQuery Mobileコンテンツを作成する方法のポスターの例です。

変更するのは3つだけです。

  • 最後に、必要なjQuery Mobileページにポップアップを追加する必要があります。これは、data-role = "page" divの外部では機能しないためです。
  • 関数bindを関数onに変更します。 Onは、イベントバインディングのはるかに高速な方法です。バインドとデリゲートを置き換えるためにここにあります。
  • コードがChromeなどのWebキットブラウザで機能するかどうかを確認します。 Chromeには、pageshowを除くすべてのページイベントでプログラムによるポップアップが開かないという厄介なバグがあります。）この問題の詳細： https://stackoverflow.com/a/15830353/18486
9
Gajotres

https://github.com/serbanghita/jQM-dynamic-popup が役立ちます。それでも、ポップアップのコンテンツ内でjQuery Mobileコードをマークアップする必要があります。これを本番環境で使用していますが、単純なメッセージ用です。

0
Șerban Ghiță

まず、一定のポップアップダイビング

 <div  id="popupPhotoLandscape" class="photopopup" data-role="popup" data-theme="none" data-     shadow="false" data-overlay-theme="a">
            <a href="#home"  data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

 //Content
        </div>

ポップアップを開くボタン

   <a  data-role="button" data-theme="c" data-inline="true" data-mini="true" id="snap_view_btn" style="float:left;margin-top: 4px;" >Snap View</a>

ボタンをクリックしてください

$('#snap_view_btn').click(function() {

   $('#popupPhotoLandscape').popup();
   $('#popupPhotoLandscape').popup("open");
});

ページ初期化

$( document ).on( "pageinit", function() {

   $( ".photopopup" ).on({
    popupbeforeposition: function() {
        var maxHeight = $( window ).height() - 60 + "px";
        $( ".photopopup" ).css( "height", '800px' );
        $( ".photopopup" ).css( "width", '600px' );
    }

 });

 });
0
Amit