jquery 移动样式不起作用

Question

为什么我的页面看起来像这样？我找不到问题

可以吗？

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

HTML:

<div data-role="header" style="overflow: hidden;">
        <h1>I'm a header</h1>
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>

Answer 1

使用任何外部小部件时，您需要添加data-theme="a" 或"b"。

正常行为，小部件从父 div 继承主题。但是，由于外部小部件的父级是 body 而 body 没有接收任何主题，因此外部小部件应该是主题化的。

<div data-role="header" data-theme="a">
</div>