將jQuery更改保存到服務器上的css文件

我正在開發一個允許在不訪問代碼的情況下更改某些css參數的系統。爲了實現這一點，我有jQuery對象，如滑塊和拖動器影響站點看起來像用戶的方式，例如。 $("#MainContent").css("width", "55%");。現在我需要一種方法將這些更改追加到服務器上的.css文件中。將jQuery更改保存到服務器上的css文件

讓我來澄清一下，這是一種CMS系統，只有系統管理員纔有這個選項，而不是用戶端網站的訪問者。我意識到.css是適用於所有用戶的。

每次用戶進行更改時，理想的解決方案都會連接到服務器，並且只替換一行css代碼。但我不知道如何有效地做到這一點，或者如果有可能的話。

來源

2013-11-03 KrisRogo

由於css規則的排序順序而不簡單...進行內聯更改，例如使用'$完成。css（）'具有最高優先級。所以，如果有相同的選擇器有4個其他規則......很難知道文件中要更改什麼。並改變'＃MainContent'共享一個規則，而不是與'＃Sidebar'相關的維度...添加'width'可能會使整個佈局搞砸 – charlietfl

我正在考慮像素修正百分比和相應地調整其他元素來填充'我的JavaScript/jQuerry代碼中的'空白'。我只需要將所有這些更改保存到CSS中，同時保持所有這些不變。所以如果我改變了一個元素的寬度，我就會覆蓋它的寬度，它是鄰居，但是我會獨自留下它們的背景色，文本字體等所有其他元素的所有其他屬性。 – KrisRogo

我的確在CSS文件類似

我替換屬性的值由東西一串像width : PAGE_WIDTH_
在頁面
。INI文件我有PAGE_WIDTH =「960px」（我看了很多解決方案，但我選擇了這個保存json對象的例子，因爲易於手動編輯這些）
請求頁面php查找該網站緩存的css文件，如果沒有找到PHP打開css文件，它發現在INI文件中的值替換PAGE_WIDTH_ &其他參數
管理員可以通過一個簡單的界面更改的INI文件值（很簡單，只需遍歷INI文件中的所有屬性即可）&保留多個主題以及&從一個切換到另一個;於INI文件之一的編輯，PHP刪除緩存的css文件強制系統在下次頁面請求

在這裏你去，頗有些工作，極大的好處來更新網站的CSS（如主題管理，不解析css文件，在閃爍時添加新的可編輯屬性...）

來源

2013-11-03 16:12:25 mikakun

我嘗試了所有提議，並且您的解決方案最適合我的腳本。謝謝。 – KrisRogo

不客氣 - >'parse_ini_file' – mikakun

如果沒有多少管理員，您不應該擔心使其變得非常高效。

在您撥打$("#MainContent").css("width", "55%");的地方，您還應該放置更新服務器的代碼。

所以，你會喜歡有一個功能：

function updateServer(data){ 
    // data would probably be a JSON array with the changes to be made 
    // Something like {element : {attribute1 : value1, attribute2 : value2}} 
    $.post(...); 
}

然後在您正在使用的CSS（），您將調用函數也更新服務器的地方。

如果有可以改變許多參數，並要避免將過多的POST請求，你也可以建立一個大data對象，以updateServer每次調用（附加上），然後使用Save按鈕或定時器發送給服務器。

現在在服務器，你將不得不實行某種邏輯來解析這個JSON數據，並相應編輯CSS文件。我認爲最簡單的方法是將每個屬性的所有值存儲在數據庫或可讀的文本文件中，然後從那裏重新生成CSS文件。

我不知道你使用的服務器端語言，但它不應該太難。

來源

2013-11-03 16:07:26 aurbano

您可以使用less（或其他具有客戶端支持的預處理器）。我從來沒有做過這樣的事情，但這很有可能，可能適合你。

如果您從未使用過CSS預處理器，那麼在繼續操作之前，您可能需要先關注該主題。

基本的想法是將變量用於任何要管理員可修改的數據。這些將被持久化在服務器端（可能在數據庫中），然後用於生成一個單獨的「變量」較少的文件。需要注意的是，因爲less需要這個文件來編譯，必須生成並保存到磁盤：

/* variables.less */ 
@mainContentWidth: 55%;

然後有可能的，某種生成的映射的JavaScript/JSON映射，這將被用來填充表單控件：

/* variables.js */ 
window.LESSVARS = { 
    // `type` here totally just an idea, but the idea is that a "percentage" 
    // field might be controlled with a slider, etc. 
    mainContentWidth: { value: "55%", type: "percentage" } 
}

對於你的CSS的其餘部分，無論您使用的較少的其他功能是你的，但這裏的關鍵部分是，你使用你定義的變量適用：

/* styles.less */ 
@import "variables.less";  
#MainContent { width: @mainContentWidth; }

一般公衆將永遠不會看到任何這一點，因爲他們將送達編譯styles.css這使它一起，簡單地說：

<link rel="stylesheet" type="text/css" href="styles.css">

但管理，而另一方面，將接收未編譯少和映射JavaScript對象，這將被用來建立表單控件和維護狀態：

<link rel="stylesheet/less" type="text/css" href="variables.less" /> 
<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<script src="variables.js" type="text/javascript"></script> 
<script src="less.js" type="text/javascript"></script>

現在，當管理員操縱而不是用jQuery的內聯樣式表單控件，你不是更新通過less.modifyVars頁面：

// something like this, which updates the less variable state and then 
// sends it to less which will recompile the CSS. Note that this is 
// just a simple example. In the real version you'd probably want to 
// track changes, etc. 
function setVar(name, value) { 
    LESSVARS[name].value = val; 
    var o = {}; 
    o['@'+name] = value; 
    less.modifyVars(o); 
} 

// which you'd then call on form control change 
setVar('mainContentWidth', '30%');

最後，一旦管理員想要保存更改，他們就會提交更改後的狀態以進行保存。這可能是整個LESSVARS對象或只是跟蹤的更改。在服務器端，您將存儲這些更改並觸發variables.less的重寫和styles.less的重新編譯。

來源

2013-11-03 17:44:51 numbers1311407

將jQuery更改保存到服務器上的css文件

回答

相關問題