如何更改使用jquery-mobile开发的现有应用程序的主题？(How to change the theme of an existing application developed using jquery-mobile?)

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

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

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

谢谢。

I am building an application using jquery mobile and phone gap. As I am about to start the application, have a doubt on how to change the theme of an application on the fly or with minimum changes involved so that I can use the same app with different themes for different client.

Please let me know is there a configuration or common place available to update/change the theme of an entire application at any moment during the development.

EDIT: sorry to confuse a bit, the question is with how to switch between the themes provided by default by jquery mobile like a, b, c, d and e without doing any or much code change.

Thanks.

最满意答案

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'}); });

jQuery Mobile has 3 different CSS files, you can get them when you download whole package.

jQuery Mobile CSS file jQuery Mobile Structure CSS file jQuery Mobile Theme CSS file

If you want to use different themes all you need to do is use second and third mentioned file. Structure CSS holds jQuery Mobile structure CSS and it is a backbone of whole structure. What you need to change is jQuery Mobile theme CSS file. This is a file you get when you create a new theme.

On the other hand jQuery Mobile will have several more CSS files but logic is the same. If you download jQuery Mobile from this link: http://jquerymobile.com/

You will find these files:

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

If you want to use customized themes you will need to remove jquery.mobile-1.4.2.min.css and jquery.mobile.theme-1.4.2.min.css. Theme builder will give you new jquery.mobile.theme-1.4.2.min.css file, or even if you download it from somewhere you will get alternative jquery.mobile.theme-1.4.2.min.css file.

Update

Working example: http://jsfiddle.net/Gajotres/LfLFm/

JavaScript:

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

or even better: http://jsfiddle.net/Gajotres/ML2F6/

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