更新

Question

我正在使用jquery mobile和phone gap构建应用程序。当我即将启动应用程序时，对如何动态更改应用程序的主题或使用最少的更改有疑问，以便我可以为不同的客户端使用具有不同主题的相同应用程序。

请让我知道在开发过程中的任何时刻是否有可用于更新/更改整个应用程序主题的配置或公共位置。

编辑：很抱歉有点混淆，问题是如何在jquery mobile默认提供的主题之间切换，如a，b，c，d和e，而不做任何或更多的代码更改。

感谢。

Answer 1

jQuery Mobile有3个不同的CSS文件，你可以在下载整个软件包时获取它们。

jQuery Mobile CSS文件
jQuery Mobile Structure CSS文件
jQuery Mobile Theme CSS文件

如果你想使用不同的主题，你需要做的就是使用第二个和第三个提到的文件。结构CSS包含jQuery Mobile结构CSS，它是整个结构的支柱。你需要改变的是jQuery Mobile主题CSS文件。这是您在创建新主题时获得的文件。

另一方面，jQuery Mobile将有几个CSS文件，但逻辑是相同的。如果您从以下链接下载jQuery Mobile：http://jquerymobile.com/

你会找到这些文件：

jquery.mobile.external-PNG-1.4.2.min.css
jquery.mobile.icons-1.4.2.min.css
jquery.mobile.inline-PNG-1.4.2.min.css
jquery.mobile.inline-SVG-1.4.2.min.css
jquery.mobile.structure-1.4.2.min.css
jquery.mobile.theme-1.4.2.min.css
jquery.mobile-1.4.2.min.css

如果您想使用自定义主题，则需要删除 jquery.mobile-1.4.2.min.css 和 jquery.mobile.theme-1.4.2.min.css 即可。主题构建器将为您提供新的 jquery.mobile.theme-1.4.2.min.css 文件，或者即使您从某个地方下载它，您也可以获得替代 jquery.mobile.theme-1.4 .2.min.css 档案。

更新

工作示例：http://jsfiddle.net/Gajotres/LfLFm/

的JavaScript：

$(document).on('pagebeforecreate', '#index',function (e, ui) {
    $(this).removeClass('ui-page-theme-a').addClass('ui-page-theme-b');
});

甚至更好：http://jsfiddle.net/Gajotres/ML2F6/

$(document).on('pagebeforecreate', '#index',function (e, ui) {
    $(this).page({theme:'b'});
});

Answer 2

您只需通过.page({ theme : "a, b, c" })小部件即可完成此操作。它将改变整个页面的主题。

$(document).on("pagecreate", function () {
    $(".selector").on("click", function () {
        $.mobile.pageContainer.pagecontainer("getActivePage").page({
            theme: "b"
        });
    });
});

<强> Demo

如何更改使用jquery-mobile开发的现有应用程序的主题？

2 个答案:

更新

的JavaScript：