如何向不同的ajax页面提供不同的css文件？

在jQuery Mobile中，创建一个包含所有页面的单个文件。如果用户选择一个页面，那么ajax只需加载与该页面相关的元素。如何向不同的ajax页面提供不同的css文件？

我明白这一点，但不知道如果你想为这些页面提供CSS，如果你想要有一些例外，你将如何提供CSS？

我有两种风格，一种是菜单页面（深色主题），然后是任何其他页面的浅色主题。

什么是每种风格的最佳方式？

为了说明问题，由于jQuery Mobile真的错综复杂的“swatch”主题，因此每个页面都有例外是不现实的，因此为每个页面提供不同的CSS文件会更有意义。

2012-02-28 RGBK

您[强烈建议避免构建使用此方法的jQuery Mobile]（http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-template.html）。 – rockerest 2012-02-28 21:06:36

到目前为止，我已经处理了很多CSS主题。这是我正在使用的方法。基本主题a，b，c，d，我大部分时间都没有留下 - 除了C & D我已经把其余部分分开了。（你可以把它们放在一边，用你自己的外观替换掉黑色主题）或者创建一个F主题并使用它。

我目前在我们的应用程序中使用S以下的主题。它工作得很好，易于管理。这与你提到的一个非常相似。当我需要时，我会调用我需要的主题，而且它似乎工作得很好。

当我需要使用新的基础版本时，我将复制我现有的一个A，B，C，并根据需要更改和扩展css。这解决了您可能遇到的使用类似主题名称的页面的重叠问题。我会采取这种方法，所以我不会重叠并且很难调试主题。

所有的信息，我中继带有约3个月的日夜工作与JQM主题& CSS的经验。

的看点：

使用Firebug在Firefox或Chrome - 这将节省您的时间和头痛小时。
重叠使用类 - 避免它们 - 只有JQm渲染的层次和深度才会花费数天的时间。
试图重写基本主题需要重要的一些属性
认真思考一下，如果你确实需要一个新的主题，或者可以简单地创建一小组类，并使用你的主题作为布局，结构的基础，（例如，您可能只想更改1色）
在新生成的动态页面上，我只会在需要时加载需要的主题，或者在加载另一个页面之前预加载它。这将有助于保持加载时间最低
请务必压缩您的主题和自定义主题
我分离成以下内容（structure.css，themes.css，custom.css（这包含我的自定义主题以及我的覆盖，（additional.css - 理想情况下，这应该只在需要时才加载
确定您是需要一个全新的主题还是简单地将内联样式放入页面文档中您从主题添加的任何额外代码就是这样额外的代码和额外的加载时间，所以请注意，全部添加主题可以通过几行代码增加您的css大小。

来源

2012-02-28 21:01:47 imaginethepoet

您可以指定此解决方案：https://stackoverflow.com/a/7349521/737023 - 这不完全是您想要的，但可以说您的主题1使用色板a，b，c，d，e - 创建第二个主题并使用色板f， g，h，i，j（可能需要连接两个CSS并进行一些替换？） - 然后使用此解决方案将所有a交换为f，将b交换为g等等......当然，这只会支持我猜5集5色样？

只要不使用AJAX加载，数据AJAX =“假”，如果有需要的新主题网站的独立部分，确保所有链接到它不使用AJAX和只是包括在头上的新的CSS

如果你真的想获得幻想，你需要更多的主题，从我知道有这个没有漂亮的解决方案，我认为，要开始，如果你将你的CSS包含在你的div [data-role =“page”]标签中s将会被AJAX加载并初始化为可用。

如果你在谈论每个页面上的a，b，c ..等值有不同的美乐软件色板，我不认为这是可能的，如果没有变得很丑。 jQM只加载<head>一次，后续页面通过AJAX加载。

即使您将CSS包含在这些页面中，您也无法摆脱原始CSS类。因此，您需要提取出您需要的样式，将其添加到每个页面的唯一类中，并使用！重要标志来覆盖jQM的样式。 jQM也使用data-theme =“x”来进行DOM操作，将事物封装在多个等等中，你需要做大量的工作来检查所有的元素，看看你需要覆盖哪些类/样式。但我怀疑它是可能的 - 你甚至可能需要通过JS来处理一些事情，e.g. find a <ul data-role="listview" class="myCustomClass"> and add your custom classes to dynamically generated DOM

来源

2012-02-28 19:16:08

只需在每个页面上添加你想要的CSS标记。例如，您可以更改主题为特定的页面，或只是一些具体的CSS规则：

主题覆盖 -

<div data-role="page" data-theme="e"> ... </div>

每个页面都可以有不同的data-theme属性（每个插件可以有它自己的data-theme属性以及）。

CSS覆盖 -

/*this adds 50px of padding to the `data-role="content"` element in the `#my-page-id` pseudo-page*/ 
#my-page-id .ui-content { 
    padding : 50px; 
}

您可以定位有这样一个ID属性（也可以用方括号其它属性选择：[data-myAttribute="myValue"] { ... }）任何个人页面。

我建议只添加一些CSS规则来覆盖菜单页面的样式。

来源

2012-02-28 20:28:11 Jasper

如何向不同的ajax页面提供不同的css文件？

回答

相关问题