2

我正在使用 jquerymobile 为 iOS 构建一个 PhoneGap 应用程序，我尝试更改 jquerymobile 的背景，但我不能。这是我的html源代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
        <script type="text/javascript" src="../../js/cordova-2.5.0.js"></script>
            <link rel="stylesheet" href="mainUI.css"/>


    </head>
    <body>

        <div data-role="page" id='mypage'>
            <div data-role="header" data-position="fixed">
                <h1>Page Title</h1>
                <a data-role="button" data-rel="back">back</a>
            </div><!-- /header -->

            <div data-role="content">
                content
            </div><!-- /content -->
            <div class="my-footer" style="background-color: #00FF00;" data-role="footer" data-position="fixed">
                <div class="my-tabbar">
                    MYTEST div
                </div>
            </div>
        </div><!-- /page -->
    </body>
</html>

这是我的自定义 CSS 文件：

.my-footer {
    background-color:   #ff0000;    
}
.my-footer .my-tabbar{
    background-color:   #ff0000;
}
.my-tabbar{
    background-color: #ff00ff;
}

当我在 Chrome 浏览器上运行这个 html 时，我工作了。但是当我在 iPhone5 设备上运行时，它没有。请帮忙。

4

3 回答 3

2

感谢我的同事，我终于找到了根本原因。当我用 PC 浏览器测试这个 html 文件时，我双击它。所以它作为一个普通的 html 文件运行，它将加载<header>标签内所有声明的资源。但是当我在 iPhone 上测试时，我使用 导航到另一个页面的这个 html 文件$.mobile.changePage()，这将只加载<body>标签的内容。在这种情况下，我的css文件没有加载。这就是为什么我的页面无法在 iPhone 上运行的原因。

所以，要解决这个问题，我只需要将所有资源声明（内部）移动到标签<head>的底部。<body>通过这种方式，资源文件将始终被加载。

希望这可以帮助。

于 2013-04-01T05:49:53.097 回答
2

您需要使用实际的 jQuery 页脚移动选择器。您可以在 iPhone 上使用 Safari 网络检查器来找到任何东西的确切选择器，并在您自己的样式表中相应地更改它。

以下是一些我认为可以完成工作的选择器：

.ui-bar-a.ui-footer {

/*Change background here */

}

PS 在您的样式表中，如果您想覆盖 jQuery mobile，请让您的选择器更加具体。所以，而不是...

.ui-bar-a.ui-footer {

/*Change background here */

}

利用....

.my-footer.ui-bar-a.ui-footer {

/*Change background here */

}

或者....

.home-page .ui-bar-a.ui-footer {

/*Change background here */

}

于 2013-04-01T05:46:29.387 回答
-1

为什么要手动编辑 CSS 并弄乱框架。JQuery Mobile 提供了一个优雅的解决方案来更改 JQM 元素（如页眉、页脚、按钮等）的颜色主题。

你听说过主题滚轮吗？主题滚轮可让您将您选择的颜色导入您的 UI 元素。添加您的颜色并将 css 文件导入项目并将data-theme元素更改为您在 Theme Roller 中使用的色板。

我个人推荐您在 Swatch “g” 之后的自定义主题，并在 jQuery 移动 css 文件之前导入您的 css 文件。

于 2013-04-01T04:58:05.073 回答