jQueryMobile使用不同的樣本在標題中使用導航欄

使用jquerymobile主題，我希望標題中的導航欄使用與標題不同的樣例。根據http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.html底部的示例，似乎我需要做的就是將主題應用於用作導航欄項目的各個鏈接。如果您查看示例中的源代碼，它們看起來與我在代碼中的內容相似。jQueryMobile使用不同的樣本在標題中使用導航欄

當前，樣本A應用於標題（標識圖像所在的位置），但導航欄只是標準灰色。

<section data-role="page" data-theme="a"> 
     <header data-role="header"> 
     <img src="images/mcn-logo-rev.png" id="logo" /> 
     <img src="images/question-mark-in-circle.png" id="help" class="ui-btn-right" /> 

     <div data-role="navbar"> 
      <ul> 
      <li><a href="#" data-icon="mcn-messages" data-theme="b">Messages</a></li> 
      <li><a href="#" data-icon="mcn-groups" data-theme="b">Groups</a></li> 
      <li><a href="#" data-icon="mcn-settings" data-theme="b">Settings</a></li> 
      </ul> 
     </div> 

     <div data-role="navbar"> 
      <ul> 
      <li><a href="#" data-theme="b">All</a></li> 
      <li><a href="#" data-theme="b">Unread</a></li> 
      <li><a href="#" data-theme="b">Search</a></li> 
      </ul> 
     </div> 
...

來源

2012-08-31 Tim Hoolihan

您是否正確關閉了您的標籤？「b」主題是否可以在其他地方使用？因爲我剛剛嘗試過你的標記，並且'navbars'出現藍色（這是swatch b的默認主題）。 – Jack

其實原來的標記是好的。我誤解了jQueryMobile。我認爲導航欄會選取工具欄的顏色，而不是拾取您應用的色板的按鈕顏色。在不改變標記的情況下修復主題應用了正確的顏色。

來源

2012-08-31 13:28:37

主題屬性應該應用於列表項目而不是鏈接。更改此代碼：

<div data-role="navbar"> 
       <ul> 
       <li><a href="#" data-icon="mcn-messages" data-theme="b">Messages</a></li> 
       <li><a href="#" data-icon="mcn-groups" data-theme="b">Groups</a></li> 
       <li><a href="#" data-icon="mcn-settings" data-theme="b">Settings</a></li> 
       </ul> 
      </div> 

<div data-role="navbar"> 
      <ul> 
      <li><a href="#" data-theme="b">All</a></li> 
      <li><a href="#" data-theme="b">Unread</a></li> 
      <li><a href="#" data-theme="b">Search</a></li> 
      </ul> 
     </div>

這樣：主題化的聯繫，而不是列表中的項目，不建議

<div data-role="navbar"> 
       <ul> 
       <li data-icon="mcn-messages" data-theme="b"><a href="#">Messages</a></li> 
       <li data-icon="mcn-groups" data-theme="b"><a href="#">Groups</a></li> 
       <li data-icon="mcn-settings" data-theme="b"><a href="#">Settings</a></li> 
       </ul> 
      </div> 

<div data-role="navbar"> 
      <ul> 
      <li data-theme="b"><a href="#">All</a></li> 
      <li data-theme="b"><a href="#">Unread</a></li> 
      <li data-theme="b"><a href="#">Search</a></li> 
      </ul> 
     </div>

您的標記，並可能不會在將來的版本工作。這裏的來源：http://jquerymobile.com/demos/1.1.1/docs/lists/lists-themes.html

來源

2012-08-31 13:27:28 adamdehaven

感謝您的建議，但事實證明這是我的主題的問題。我把答案放在下面，並且可以標記它（2天限制） –

其實，我發佈的是正確的標記。通過將data- *屬性應用於鏈接而不是列表項，您的標記在未來的版本中可能不受支持。 – adamdehaven

jQueryMobile使用不同的樣本在標題中使用導航欄

回答

相關問題