Question

我正在尝试使用解决方案 here使用jquery mobile为我的html / css / js应用程序的几个页面创建相同的面板。但不幸的是，就像面板的内容一样，jquery移动风格并不适用....而不是这个，它只是普通的旧HTML。

如何将jquery移动样式应用于面板内容？是否有某种刷新命令？

这是我的小组：

$(document).on('pagebeforeshow', '#welcome-page', function(){                
  $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
  $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
  $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
  $('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');        
  $.mobile.activePage.find('#mypanel').panel();
  $(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
  });
  //LISTENERS:
  //$("#mypanel").panel("close");
});

这是页面：

<div id="welcome-page" data-role="page">    
    <!--<div data-role="panel" id="mypanel">
    </div>-->                   
<header data-role="header"> 
</header>
<div id="content" data-role="content">              
</div>
<footer data-role="footer">
</footer>

由于

Answer 1

我发了一封原创信息，让我以不同的方式向您展示，而不是使用 pagebeforeshow 事件，您可以使用 pagebeforecreate 。这很重要，因为此时内容仍未设置风格。任何动态添加的内容都将自动设置样式，因此您无需担心这一点。

$(document).on('pagebeforecreate', '#welcome-page', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
    $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
    $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
    $('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');        
    $(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
    });
    //LISTENERS:
    //$("#mypanel").panel("close");
});

根据我的原始答案做出的工作示例：http://jsfiddle.net/Gajotres/pZzrk/60/

将jquery移动样式应用于动态创建的面板的内容

1 个答案: