JQuery CSS ThemeRoller Mobile：將主題A，B，C應用到不同的頁面

Question

我試圖根據生成的主題設計一個基於Themeroller CSS的移動應用程序。此外，該封裝包括：

• 的jQuery 1.9.1
• 的jQuery 1.3.0
• jquery.mobile.structure-1.3.0.min.css

的ThemeRoller生成CSS文件有三個不同的主題（共3頁）：

• 主題A（藍色）
• 主題B（紅）
• 主題C（灰色）

我在HTML5創造了一切，並應用了所有上面提到的來源，但結果是所有的頁面都在一個主題，而不是另一個主題分別爲B和C。這是該項目的JSFIDDLE版本。

我找不到要出錯的地方。有任何想法嗎？

<!-- Page 1 --> 
<div data-role="page" id="firstPage" data-theme="a"> 
    <div data-role="header" data-position="inline"> 
     <h1>Page 1</h1> 
     <a href="#" data-role="button" data-theme="a">!</a> 
     <a href="#secondPage" data-role="button" data-theme="a">p2</a></div> 
    <div data-role="content" data-theme="a" align="center"> 
    <!-- Content --> 
    <h1>Test1 Test1</h1> 
    <p>Text1 Text1</p> 
    <select name="sound" data-role="slider" data-theme="a"> 
     <option value="0">Off</option> 
     <option value="1" selected="selected">On</option> 
    </select></div> 
    <!-- /Content --> 
</div> 
<!-- Page 2 --> 
<div data-role="page" id="secondPage" data-theme="b"> 
    <div data-role="header" data-position="inline"> 
     <h1>Page 2</h1> 
     <a href="#firstPage" data-role="button" data-theme="b">p1</a> 
     <a href="#thirdPage" data-role="button" data-theme="b">p3</a></div> 
<div data-role="content" data-theme="b" align="center"> 
    <!-- Content --> 
    <h1>Test2 Test2</h1> 
    <p>Text2 Text2</p> 
    <select name="sound" data-role="slider" data-theme="b"> 
     <option value="0">Off</option> 
     <option value="1" selected="selected">On</option> 
    </select></div> 
    <!-- /Content --> 
</div> 
<!-- Page 3 --> 
<div data-role="page" id="thirdPage" data-theme="c"> 
    <div data-role="header" data-position="inline"> 
     <h1>Page 3</h1> 
     <a href="#secondPage" data-role="button" data-theme="c">p2</a> 
     <a href="#" data-role="button" data-theme="c">!</a></div> 
<div data-role="content" data-theme="c" align="center"> 
    <!-- Content --> 
    <h1>Test3 Test3</h1> 
    <p>Text3 Text3</p> 
    <select name="sound" data-role="slider" data-theme="c"> 
     <option value="0">Off</option> 
     <option value="1" selected="selected">On</option> 
    </select></div> 
    <!-- /Content --> 
</div> 

Answer 1

首先這是jQuery Mobile的一個錯誤，但你可以，如果你從你的所有data-role="page"格的刪除數據主題，並將其移動到您data-role="header" DIV它的工作。

工作例如：http://jsfiddle.net/Gajotres/ceBAj/

<!-- Page 1 --> 
<div data-role="page" id="firstPage"> 
    <div data-role="header" data-position="inline"> 
     <h1>Page 1</h1> 
     <a href="#" data-role="button" data-theme="a">!</a> 
     <a href="#secondPage" data-role="button" data-theme="a">p2</a></div> 
    <div data-role="content" data-theme="a" align="center"> 
     <!-- Content --> 
     <h1>Test1 Test1</h1> 
     <p>Text1 Text1</p> 
     <select name="sound" data-role="slider" data-theme="a"> 
      <option value="0">Off</option> 
      <option value="1" selected="selected">On</option> 
     </select></div> 
     <!-- /Content --> 
</div> 

<!-- Page 2 --> 
<div data-role="page" id="secondPage"> 
    <div data-theme="b" data-role="header" data-position="inline"> 
     <h1>Page 2</h1> 
     <a href="#firstPage" data-role="button" data-theme="b">p1</a> 
     <a href="#thirdPage" data-role="button" data-theme="b">p3</a></div> 
    <div data-role="content" data-theme="b" align="center"> 
     <!-- Content --> 
     <h1>Test2 Test2</h1> 
     <p>Text2 Text2</p> 
     <select name="sound" data-role="slider" data-theme="b"> 
      <option value="0">Off</option> 
      <option value="1" selected="selected">On</option> 
     </select></div> 
     <!-- /Content --> 
</div> 

<!-- Page 3 --> 
<div data-role="page" id="thirdPage"> 
    <div data-theme="c" data-role="header" data-position="inline"> 
     <h1>Page 3</h1> 
     <a href="#secondPage" data-role="button" data-theme="c">p2</a> 
     <a href="#" data-role="button" data-theme="c">!</a></div> 
    <div data-role="content" data-theme="c" align="center"> 
     <!-- Content --> 
     <h1>Test3 Test3</h1> 
     <p>Text3 Text3</p> 
     <select name="sound" data-role="slider" data-theme="c"> 
      <option value="0">Off</option> 
      <option value="1" selected="selected">On</option> 
     </select></div> 
     <!-- /Content --> 
</div>