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 файл имеет три различные темы (для трех страниц):

• Тема А (синий)
• Theme B (Red)
• Theme 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" DIV и переместить его к вам 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>