重复标题

Question

请参阅下面的HTML结构示例

<div data-role="page" id="p1"> 
  <div  data-role="header"><h1>Header</h1></div> 

  <div  data-role="content">
      <a href="#" id="add" data-role="button">Click Me</a>
  </div> 

  <div  data-role="footer"><h4>Footer</h4></div> 
</div> 

<div data-role="page" id="p2"> 
  <div  data-role="header"><h1>Header 1</h1></div> 

  <div  data-role="content">
    Page Two
  </div> 
  <div  data-role="footer"><h4>Footer</h4></div> 
</div> 

相同的jquery

$('#p1').live('pagecreate', function(e){
  $("#add").click(function(e) {
      $.mobile.changePage('#p2', { transition: "flip"} );
  });
});

上面的示例工作正常，但标题部分正在重复。 那么如何避免这个问题，因为我为每个data-role =“page”使用相同的标题和页脚部分？

Answer 1

似乎没有好的“内置”方法来做到这一点。您可以在此处找到一些解决方法：jQuery Mobile: Use same header footer for all pages