Ruby on Rails中用户的个人CSS样式表

时间:2012-10-14 02:53:46

标签: css ruby-on-rails ruby-on-rails-3 forms styles

我环顾四周但是我无法找到我需要做的事情以使以下成为可能:

这个问题假设我让所有模型控制器都正常工作,并且在默认样式表中定义了命名的CSS属性。

我希望用户能够在登录时选择一些CSS属性来个性化他们自己的主题。基础属性将是“body”和“page-wrapper”颜色。 (前景)

我希望他们能够在用户的编辑页面中选择这些属性(来自表单?)。 (已经创建)

关于如何使这项工作或在正确方向上取得良好领导的任何想法?

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我认为最好的方法是通过javascript,在头上生成具有所需样式的样式标记。 Jquery提供了一种简单的方法,您可以将样式存储在模型的列中。

这样的事情:

class User
  attr_accesible :styles

view.erb

<script>
  // Assume the @styles attr has something like "body { background-color: #567;}"
  $('head').append($('<style>').html('<%= @user.styles %>'))
</script>

@styles将是您模型中的另一列,因此您应该使用迁移添加它

rails g migration addstylestousers styles:string

在你的form.erb

<%= f.label :styles %>
<%= f.text_field :styles %>

我认为只要你给他足够的提示,例如“在此字段中添加body { background-color: red }以使你背景变红,就足以让用户在这里放置css样式!”。

关于序列化,请考虑this

如果要嵌套样式,那么脚本将是

//Lets say that the user stored on @bgcolor and @fgcolor only css color codes, like '#222' or 'blue'
var bgc = '<%= @user.style.bgcolor %>'
var fgc = '<%= @user.style.fgcolor %>'
var style = 'body { background-color: ' + bgc + '; foreground-color: ' + fgc + ' }'
$('head').append($('<style>').html(style))

请记住,在这种情况下,关系应该是User has_one :style。然而,嵌套它让你自己陷入更多问题,我认为它根本不值得。