1

我正在尝试使用此处的解决方案使用 jquery mobile 为我的 html/css/js 应用程序的多个页面创建相同的面板。但不幸的是，就像面板的内容一样，jquery mobile 样式没有被应用......取而代之的是，它只是普通的旧 html。

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

这是我的面板：

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

谢谢

4

1 回答 1

2

我已经发表了一篇原创文章，所以让我向您展示一种不同的方式，而不是使用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/

于 2013-06-06T10:29:25.180 回答