1

我css在 Rails 应用程序的页面顶部有一个基于通用标题图像的布局。有一个课程模型将有一个可选的徽标图像，当用户查看课程材料时，它有望替换标题图像（如果存在）。这可能吗？我该怎么做？

标题的css如下...

#header{height:116px;width:100%;background:url('logo.jpg') top center no-repeat;}

该应用程序位于...，当用户登录并单击课程时，我希望课程徽标替换标题图像。

4

3 回答 3

1

如果我正确理解了您的问题，则某些模型定义了 logo。在这种情况下，我不会弄乱 CSS - 或者至少不会弄乱资产文件，因为它们应该是静态的。

您可以在布局中定义徽标：app/viev/layouts/application.html.erb只需在此处创建如下内容：

<head>
  ..
  <style type="text/css">
    #header { background-image: url("<%= @logo_path || 'logo.jpg' %>"); }
  </style>

或者

<head>
  <% if @logo_path %>
    <style type="text/css"> #header { .... } </style>
  <% end %>

然后，在某些控制器或动作或某些视图中，@logo_path如果您希望徽标与默认值不同，只需设置实例变量即可。

在您的静态 CSS 中，您可以定义默认的背景图像，并确保您的布局中的这条规则比静态资产中的规则更重要。如有疑问，!important请在布局规则中添加子句。

当然，如果说动态是指 JavaScript，那么您可以直接在onclick给定元素的属性中包含脚本和徽标路径，方式类似于：

<span onclick="replace_logo('<%= model.logo_path %>')">....</span>

这个函数replace_logo写起来不难。

于 2012-06-11T14:39:31.160 回答
0

你可以通过两种方式为你想在标题中显示的每个图像定义不同的类，然后根据某些变量（控制器或操作名称...等）更改 claa 或通过在 head 中添加 yield :style 并覆盖标题样式取决于根据您的要求使用 content_for :style。

于 2012-06-11T13:45:42.053 回答
0

我只会在我的主代码中包含 css 的那一小部分，并使用一个简单的 if...else 语句，并根据用户是否登录来更改“logo.jpg”。

例如，如果用户已登录，则徽标的变量将从默认值更改。如果用户未登录，则使用原始徽标。

由于没有可使用的代码，因此无法真正提供更多细节。

于 2012-06-11T14:15:57.700 回答