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>