Ruby on Rails 3.1 и jQuery изображения пользовательского интерфейса

Я использую Ruby on Rails (Edge, версия для разработки) и Ruby rvm 1.9.2.

application.js выглядит следующим образом.

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

Где подходящее место в Ruby on Rails 3.1 для размещения темы jQuery UI?

Согласно Поля автозаполнения в Ruby on Rails 3.1 с пользовательским интерфейсом jQuery Я должен поместить тему пользовательского интерфейса jQuery в папку vendor/assets/stylesheets. Это звучит как умное место, чтобы иметь его, но я не могу заставить его работать: - (.

Мне удалось загрузить CSS, поместив его в папку assets/stylesheets, но изображения, которые мне не удалось загрузить.

Я мог бы, конечно, использовать старый способ, просто поместив тему в общедоступную/stylesheets/папку и используя:

<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.11.custom" %>

в application.html.erb, но, стараясь быть современным человеком, я предпочел бы использовать новый способ делать tings: -).

Ответы

Ответ 1

Я упал, чтобы сделать это по-старому:

Я помещаю папку jQuery, содержащую тему (неизменную как с папкой CSS и изображений) в папку assets/stylesheets, так и вставляя: <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %> в app/views/layouts/application.html.erb файл. Это решение является тем, у кого меньше орешника, когда я буду обновлять jQuery позже.

(Спасибо за все предложения по решению. Пришло время заключить.)

Ответ 2

Теперь, когда у нас есть Ruby on Rails 3.1.0, это то, что сработало для меня:

app/assets/javascripts/application.js

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

Это напрямую включает пользовательский интерфейс jQuery, предоставляемый камнем jquery-rails. Но камень не предоставляет файлы тем. Для этого я добавил каталог theme в vendor/assets/stylesheets, содержащий:

  • файл jquery.ui.theme.css,
  • каталог jQuery пользовательского интерфейса images.

Обязательно сохраните каталог images с файлом CSS! Не помещайте файлы изображений под vendor/assets/images, или они не будут найдены jQuery (которые их ищут в /assets/images).

Наконец, изменил файл app/assets/stylesheets/application.css на:

/*
*= require_tree ../../../vendor/assets/stylesheets
*= require_tree .
*/

Ответ 3

Пример рабочей настройки:

    $ cat app/assets/javascripts/application.js

    //= require jquery
    //= require jquery-ui


    $ cat app/assets/stylesheets/application.css

    /*
     *= require vendor
     *
     */


    $ cat vendor/assets/stylesheets/vendor.css

    /*
     *= require_tree ./jquery_ui 
     *
     */

    vendor/assets/ $ tree
     stylesheets
         vendor.css
             jquery_ui
                      jquery-ui-1.8.13.custom.css
                      ...
     images
        jquery_ui
            ui-bg_flat_0_aaaaaa_40x100.png
            ...

Наконец, запустите эту команду:

    vendor/assets/images $ ln -s jquery_ui/ images

Наслаждайтесь своим пользовательским интерфейсом jQuery

Ответ 4

Мне нравится выборочно загружать JavaScript-код jQuery UI, чтобы я мог легко обновиться до любых будущих версий и иметь легкий пользовательский интерфейс jQuery (включая только необходимые файлы, здесь progressbar.js).

У меня есть следующая настройка для темы пользовательского интерфейса jQuery "Dot Luv".

Примечание:

Файлы JavaScript и CSS несжаты и взяты из jquery-ui-1.8.16.custom/development-bundle/ui и jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv соответственно, и я полагаюсь на sprokets, чтобы их минимизировать и сжать.

Изображения от jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images.

Структура каталогов:

Directory Structure

приложение/активы/JavaScripts/application.js

//= require jquery
//= require jquery-ui/v1.8.16/Core/jquery.ui.core
//= require jquery-ui/v1.8.16/Core/jquery.ui.widget
//= require jquery-ui/v1.8.16/Widgets/jquery.ui.progressbar
//= require jquery_ujs

приложение/активы/таблицы стилей /application.css.scss

*= require_self
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.all
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.base
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.core
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.progressbar
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.theme

конфигурации /application.rb

config.assets.paths << File.join(Rails.root,'vendor/assets/images/jquery-ui/v1.8.16/dot-luv/')

Ответ 5

С Ruby on Rails 3.1.2 я сделал следующее.

#app/assets/javascripts/application.js

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

Для файлов CSS мне нравится @import вместо этого иметь больше контроля над порядком загрузки файлов CSS. Для этого мне нужно добавить расширение .scss в файл app/assets/stylesheets/application.css, а также ко всем файлам CSS, которые я хочу импортировать, например, файл CSS jQuery UI.

#app/assets/stylesheets/application.css.scss

/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it generally better to create a new file per style scope.
*= require_self
*/

@import "jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss";

/* Other css files you want to import */
@import "layout.css.scss";
@import "home.css.scss";
@import "products.css.scss";
....

Затем я поместил все jQuery UI в поставщика/активы следующим образом:

Таблица стилей jQuery UI:

vendor/assets/stylesheets/jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss

папка изображений jQuery UI:

vendor/assets/images/images

Обратите внимание, что вы можете создать дополнительную папку в пути stylesheets, как я здесь, с помощью пути "jquery-ui/ui-lightness". Таким образом, вы можете сохранить несколько тем jQuery, прекрасно разделенных в своих папках.

** Перезагрузите сервер, чтобы загрузить новые созданные пути загрузки **

У Райана Бэйтса есть отличные скринкасты о конвейере активов и Sass в Ruby on Rails 3.1, где он показывает, как использовать @импортировать в Sass. Смотрите здесь:

Изменить: я забыл упомянуть, что это работает как локально, так и на Heroku на Кедровый стек.

Ответ 6

Я знаю, что в этой теме уже много ответов, но я собираюсь использовать то, что сработало лучше всего для меня.

Существует драгоценный камень, называемый jquery-ui-themes, который включает default jQuery Темы пользовательского интерфейса, уже преобразованные в sass с помощью image-path помощника. Таким образом, вы можете включить драгоценный камень и получить любые темы по умолчанию из коробки, просто добавив их в свой application.css файл

Если вы хотите использовать свою собственную тему (как и я), есть задача rake, которая автоматически преобразует CSS файл в SCSS и использует помощник image-path, чтобы найти правильный путь.

Ответ 7

Теперь есть jquery-ui-rails gem (см. анонс). Он упаковывает изображения как активы (и правильно ссылается на них из файлов CSS), поэтому вещи Just Work.: -)

Ответ 8

Итак, здесь один из способов сделать это, в котором отсутствуют недостатки некоторых других, упомянутых здесь, - это не требует, чтобы вы разделили тему и поместили ее части в разных местах, она не требует символических ссылки, и он по-прежнему позволяет вам скомпилировать тему css в один основной css как часть конвейера активов. Это не требует патча обезьяны, как предложение Нэш Бриджес.

Однако для этого требуется дополнительный вид хакерской строки конфигурации. (однострочный, хотя, в основном).

Хорошо, поместите свою тему в vendor/assets/jquery/ui-lightness/, как вы хотели. (также будет работать в lib/assets или app/assets, таким же образом).

и

/* =require ui-lightness */

в вашем приложении application.css. Все идет нормально. Теперь, чтобы изображения отображались правильно, просто добавьте это в config/application.rb:

initializer :add_jquery_ui_asset_base, :group => :all, :after => :append_assets_path do
   config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "jquery-ui", "ui-lightness").to_s
end

Для меня он теперь работает в dev, production и других нестандартных конфигурациях активов, о которых я мог подумать (например, dev с debug = false, который запускает некоторые из других попыток решения).

Дополнительная информация на http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

Ответ 9

Основываясь на ряде других предложений здесь, я нашел решение, которое работает в моей среде dev и в производстве на Heroku.

Приложение/активы/JavaScripts/application.js

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

Приложение/активы/таблицы стилей /application.css

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

поставщика/активы/таблицы стилей /vendor.css

 /*
 *= require_self
 *= require_tree .
*/

Я добавил jquery-ui-1.8.16.custom.css и связанную папку с изображениями в каталог vendor/assets/stylesheets (я обнаружил, что если папка с изображениями не была в той же папке, что и vendor.css, она не работала).

Никаких других изменений не было необходимо для работы в производственной среде Heroku.

Благодаря @denysonique, @softRli и @Paul Cook для своих предыдущих ответов, которые помогли мне.

Ответ 10

Там предлагаемое исправление в Ruby on Rails, что делает предварительную компиляцию изображений пользовательского интерфейса jQuery.

(Начиная с 3.1.0rc6, прекомпилятор активов использует регулярное выражение /\w+\.(?!js|css).+/, чтобы найти вещи для компиляции. Это пропускает все изображения пользовательского интерфейса jQuery, поскольку их имена включают тире и символы подчеркивания.)

Ответ 11

Сочетание предложений здесь - то, что заставило меня работать:

Поместите jQuery пользовательскую папку CSS в папку vendor/assets/stylesheets.

Поместите vendor.css в vendor/assets/stylesheets:

*= require_tree ./theme-css-name

В production.rb я добавил следующее:

config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name

Это то, что нужно, чтобы изображения были предварительно скомпилированы и разрешены без редактирования файла CSS CSS jQuery или перемещения изображений из папки CSS темы.

Ответ 12

Чтобы это работало как в моей локальной среде разработчиков, так и на Heroku, я сделал почти то же самое, что предлагал denysonique, но с несколькими отличиями в конец:

Сначала моя структура каталогов выглядела так:

vendor/assets/images/
                  jquery_ui/
                      images/
                          ui-bg_flat_0_aaaaaa_40x100.png
                          ...

И во-вторых, моя символическая ссылка:

vendor/assets/images $ ln -s jquery_ui/images images

Вот что, наконец, сработало для меня.

Ответ 13

То, что я сделал, чтобы все было правильно, выглядит следующим образом.

1.) Добавлен CSS в папку assets/stylesheets

2.) Добавлены изображения в папку активы/изображения

3.) Удалены пути ко всем изображениям в CSS с помощью find "url (images/" и заменить с помощью "" оставляя только имя файла изображения.

/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; }
/* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }

Бинго! Все должно работать правильно.

Ответ 14

Я думаю, вы можете поместить стили ui в app/assets/stylesheets. Сделайте что-то вроде этого:

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

В стике jquery-ui, что-то вроде этого:

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

Ответ 15

Используя Ruby on Rails 3.1.1, я просто разместил файлы следующим образом. Никаких других изменений не требовалось.

  • приложение/активы/таблицы стилей/JQuery-щ-1.8.16.custom.css
  • приложение/активы/изображения/щ-bg_highlight-soft_75_cccccc_1x100.png
  • ...

Ответ 16

Что сработало для меня, вместо того, чтобы иметь файл CSS темы jQuery в app/assets/stylesheets/ и изображения в app/assets/images/. Я поместил их в app/assets/images/images/, и он сработал. Это своего рода взлом, но, похоже, он работает с этой точки зрения с минимальным подтасовкой и без изменения файлов CSS.

Ответ 17

Получить тему размещения в CDN от Google:

    = stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'

Ответ 18

В тот момент я нашел не идеальное, но работающее решение.

Предположим, что у вас есть тема jQuery UI в папке /vendor/assets/stylesheets/. Затем вам нужно изменить application.css:

/* =require ui-lightness */

и создайте plugin_assets_monkey_patch.rb в /config/initializers

Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir|
    AppName::Application.config.assets.paths << dir

    index_content = '/*=require_tree .*/'

    index = File.join(dir, 'index.css')
    unless File.exist?(index)
        File.open(index, 'w') { |f| f.puts index_content }
    end
end

index.css в каждой подпапке /vendor/assets/stylesheets/ гарантирует, что таблицы стилей, такие как jquery-ui-1.8.11.custom.css, будут скомпилированы (если вам нужна эта подпапка).

config.assets.paths гарантирует, что такие папки, как /vendor/assets/stylesheets/ui-lightness/images, видны в области приложения.