jQuery CSS ThemeRoller Mobile : Applying Theme A, B,C到不同页面

Question

我正在尝试基于 Themeroller CSS 设计一个移动应用程序生成的主题。此外，该套餐还包括:

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

Themeroller 生成的 CSS 文件具有三个不同的主题(三个页面):

• 主题 A(蓝色)
• 主题 B(红色)
• 主题 C(灰色)

我在 HTML5 中创建了所有内容并应用了上述所有来源，但结果是所有页面都在主题 A 中，而不是分别在另一个主题 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>