jquery - Rails 3.1 和动态 jquery ui 主题切换

Question

简单来说:

应用程序.css

/*
 *= require_self
 *= require_tree .
 *= require vendor
*/

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

和供应商/ Assets $树

.
└── stylesheets
    ├── ui-themes
    │   ├── smoothness
    │   │   ├── images
    │   │   │   ├── ui-bg_flat_0_aaaaaa_40x100.png
    │   │   │   ├── ui-bg_flat_75_ffffff_40x100.png
    │   │   │   ├── ui-bg_glass_55_fbf9ee_1x400.png
    │   │   │   ├── ui-bg_glass_65_ffffff_1x400.png
    │   │   │   ├── ui-bg_glass_75_dadada_1x400.png
    │   │   │   ├── ui-bg_glass_75_e6e6e6_1x400.png
    │   │   │   ├── ui-bg_glass_95_fef1ec_1x400.png
    │   │   │   ├── ui-bg_highlight-soft_75_cccccc_1x100.png
    │   │   │   ├── ui-icons_222222_256x240.png
    │   │   │   ├── ui-icons_2e83ff_256x240.png
    │   │   │   ├── ui-icons_454545_256x240.png
    │   │   │   ├── ui-icons_888888_256x240.png
    │   │   │   └── ui-icons_cd0a0a_256x240.png
    │   │   └── jquery-ui-1.8.16.custom.css
    │   └── trontastic
    │       ├── images
    │       │   ├── ui-bg_diagonals-small_50_262626_40x40.png
    │       │   ├── ui-bg_flat_0_303030_40x100.png
    │       │   ├── ui-bg_flat_0_4c4c4c_40x100.png
    │       │   ├── ui-bg_glass_40_0a0a0a_1x400.png
    │       │   ├── ui-bg_glass_55_f1fbe5_1x400.png
    │       │   ├── ui-bg_glass_60_000000_1x400.png
    │       │   ├── ui-bg_gloss-wave_55_000000_500x100.png
    │       │   ├── ui-bg_gloss-wave_85_9fda58_500x100.png
    │       │   ├── ui-bg_gloss-wave_95_f6ecd5_500x100.png
    │       │   ├── ui-icons_000000_256x240.png
    │       │   ├── ui-icons_1f1f1f_256x240.png
    │       │   ├── ui-icons_9fda58_256x240.png
    │       │   ├── ui-icons_b8ec79_256x240.png
    │       │   ├── ui-icons_cd0a0a_256x240.png
    │       │   └── ui-icons_ffffff_256x240.png
    │       └── jquery-ui-1.8.16.custom.css
    └── vendor.css.erb

然后我的问题是如何通过params[:theme]动态加载jquery主题css，我尝试了

/*
*= require "ui-themes/<%= params[:theme] %>/jquery-ui-1.8.16.custom"
*
*/

在vendor.css.erb中，但并不幸运。

感谢您的帮助。

Answer 1

1. 解决方案，在 css 文件中包含所有可能的主题，但要限定它们的范围，即将所有规则嵌套在不同的主体 id(或类)下，例如#theme-1 ui-widget-... { .. }ETC...然后动态切换你的body标签的id

2. 解决方案为每个主题创建一个自己的 CSS(每个主题还包括您的其他样式)，将这些文件添加到 config/environments/products 中的 config.assets.precompile 中。 rb，禁用哈希缓存破坏者后缀(堆栈溢出有一个问题如何做到这一点)，然后通过参数在服务器端(在布局中)切换样式表