如何向不同的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文件？

回答

相關問題