如何在jQuery Mobile中以優雅的風格動態添加標題欄

我的移動網站動態添加標題欄以減少代碼冗餘。如何在jQuery Mobile中以優雅的風格動態添加標題欄

但是，我堅持與jquery移動頁面的樣式標頭部分。

當我看到生成的HTML標記，它看起來還好，

但它的元素沒有被jQuery Mobile的裝飾。

添加的內容後，我調用

$(pageId).trigger('create');

你有什麼想法？

來源

2013-04-09 Sungam Yang

而不是調用觸發方法，我執行了下面的命令，它運作良好。

$('#pageHome').closest(":jqmData(role='page')").trigger('pagecreate');

來源

2013-04-09 17:39:04

請參閱此：http://stackoverflow.com/questions/8088837/jquery-mobile-triggercreate-command-not-working – 2013-04-09 17:42:55

你可以分享一個jsfiddle嗎？所以我從你的方法中探索和學習一點。 – Hugolpz 2013-04-26 14:43:59

@Hugolpz對不起，以便延遲迴復。這裏是：http://jsbin.com/efisef/1/edit – 2013-05-01 09:50:26

這爲我工作：http://jsfiddle.net/emBxx/2/

HTML：

<script type="text/javascript" src="js/main.js"></script>

...

<div data-role="page" data-theme="b"> 
    <header></header> 
    <div data-role="content"> 
     <div class="content-primary"> 
      <br /> 
      <ul data-role="listview" data-filter="true"> 
       <li><a href="index.html">Some</a></li> 
       <li><a href="index.html">random</a></li> 
       <li><a href="index.html">searchable</a></li> 
       <li><a href="index.html">content</a></li> 
       <li><a href="index.html">(list!)</a></li> 
      </ul> 
     </div><!--/content-primary --> 
    </div> 
    <footer></footer> 
</div><!-- page end--> 
<script>  
    appendJQMHeader('Injected header !'); 
    appendJQMFooter('—Injected ftr!', 'JQM 1.3.1Beta'); 
</script>

JS，JS中/ main.js：

function appendJQMHeader(pageTitle) { 
    $('header').replaceWith(
     '<header data-role="header" data-theme="f">'+ 
     '<h1>'+pageTitle+'</h1>'+ 
     '<a href="index.html" data-transition="slide" data-rel="back" data-icon="home" data-iconpos="notext" data-ajax="true">Home</a>'+ 
     '</header><!-- /header -->'); 
} 

function appendJQMFooter(left, right) { 
    $('footer').replaceWith('<footer data-role="footer" data-theme="f" class="jqm-footer"><p>&copy;'+left+'!</p><p class="jqm-version">—'+right+'</p></footer>'); 
}

注：爲的jsfiddle，它需要 'Framework & extension>No wrap - in <head>'
對於單機版，它工作得很好用HTML調用頭包含JS的js/main.js。然後html體appendJQMHeader() & appendJQMFooter()。看到小提琴:)

來源

2013-04-25 20:13:10 Hugolpz

感謝您的回答。我通過調用jQM的內部方法來應用jQM樣式。 – 2013-04-26 13:19:39

如何在jQuery Mobile中以優雅的風格動態添加標題欄

回答

相關問題