2012-11-28 71 views
0

在我的小應用程序中,我有一個使用jQuery手機的嵌套列表。如果我點擊列表中的某個項目,標題中的標題會更改並顯示我點擊的項目的標題。我怎樣才能實現,標題停留在頁面之前?jquery mobile:如何保持嵌套列表中標題的標題

例子:

 <div data-role="page" id="newspage" data-theme="a"> 

     <div data-role="header" data-position="fixed"> 
      <a href="#home" data-role="button" data-icon="home" data-iconpos="notext" data-mini="true" data-inline="true" data-transition="slide" data-direction="reverse">Home</a> 
      <h1>News</h1> 
     </div> 

     <div data-role="content" id="newsList"> 
      <ul data-role="listview"> 
       <li> 
        <h2>News 1</h2> 
        <p>This is a short version of news 1</p> 
        <ul> 
         <li> 
          <h2>News 1</h2> 
          <p>This is the text of news 1</p> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <h2>News 2</h2> 
        <p>This is a short version of news 2</p> 
        <ul> 
         <li> 
          <h2>News 2</h2> 
          <p>This is the text of news 2</p> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 

所以,如果我點擊「新聞1」,在標題更改爲「新聞1」,節目當然嵌套項目的標題。但是我想在嵌套項目的頭部添加「新聞」,就像之前在頭部div中定義的一樣。我希望我明確我想要什麼。 :-)任何想法如何做到這一點?

謝謝!

回答

1

This是您的解決方案。您將在HTML末尾找到您的解決方案。

代碼示例:

$(':jqmData(url^=newspage)').live('pagebeforecreate',function (event) { 
     var title = $(':jqmData(url^=newspage)').find(':jqmData(role=header) h1').html(); 
     $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)').html('<h1>' + title + '</h1>'); 
}); 

看這部分代碼:

$(':jqmData(url^=newspage)'). 

newspage是您的列表視圖容器頁面的ID。

+0

真棒!非常感謝你! – bbasmer