将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文件

回答

相关问题