Ruby on Rails 3.1 i jQuery UI images

Teraz, gdy mamy Ruby on Rails 3.1.0, to działa dla mnie:

app/assets/javascripts/application.js

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

Zawiera bezpośrednio interfejs jQuery dostarczany przez gem jquery-rails. Ale klejnot nie zapewnia plików motywu. W tym celu dodałem katalog theme pod vendor/assets/stylesheets, zawierający:

• plik jquery.ui.theme.css,
• katalog jQuery UI theme images.

Pamiętaj, aby zachować katalog images motywu z plikiem CSS! nie umieszczaj plików graficznych pod vendor/assets/images, lub nie zostaną znalezione przez jQuery (które przeszukują je pod /assets/images).

Na koniec zmieniono plik app/assets/stylesheets/application.css na:

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

Przykład pracy:

    $ 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
            ...

Na koniec uruchom polecenie:

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

Ciesz się jQuery UI

Lubię selektywnie pobierać kod JavaScript jQuery UI, dzięki czemu mogę łatwo uaktualnić go do dowolnej przyszłej wersji i mieć lekki interfejs jQuery (Dołącz tylko potrzebne pliki, tutaj progressbar.js ).

Mam następującą konfigurację dla motywu jQuery UI "Dot Luv".

Uwaga:

Pliki JavaScript i CSS są nieskompresowane i pobrane odpowiednio z jquery-ui-1.8.16.custom/development-bundle/ui i jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv, A ja polegam na sprokets, aby je minifikować i kompresować.

Zdjęcia pochodzą z jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images.

Struktura Katalogów:

App / assets/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

App / assets/stylesheets / 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

Config / application.rb

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

Wiem, że ten wątek ma już wiele odpowiedzi, ale dorzucę to, co dla mnie najlepsze.

Istnieje klejnot o nazwie jQuery-UI-themes , który zawiera domyślne motywy jQuery UI już przekonwertowane do sass za pomocąimage-path helper . Więc możesz dołączyć klejnot i uzyskać dowolny z domyślnych motywów po prostu dodając je do pliku application.css

Jeśli chcesz użyć własnego niestandardowego motywu (tak jak ja), istnieje zadanie rake, które będzie automatycznie przekonwertuj plik CSS na SCSS i użyj helpera image-path, aby znaleźć właściwą ścieżkę.

Z Ruby on Rails 3.1.2 wykonałem następujące czynności.

#app/assets/javascripts/application.js

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

Dla plików CSS, lubię robić @import zamiast tego mieć większą kontrolę nad kolejnością ładowania plików CSS. Aby to zrobić, muszę dodać rozszerzenie .scss do pliku app/assets/stylesheets/application.css, a także do wszystkich plików CSS, które chcę zaimportować, jak plik 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's 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";
....

Następnie umieszczam wszystko związane z jQuery UI w vendor / assets tak:

JQuery UI stylesheet:

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

JQuery UI images folder:

vendor/assets/images/images

Uwaga że możesz utworzyć dodatkowy folder w ścieżce arkuszy stylów, tak jak zrobiłem to tutaj ze ścieżką "jquery-ui/UI-lightness". W ten sposób możesz zachować wiele motywów jQuery ładnie oddzielonych we własnych folderach.

** Uruchom ponownie serwer, aby załadować nowo utworzone ścieżki ładowania **

Ryan Bates ma świetne screencasty o potoku zasobów i Sass w Ruby on Rails 3.1, gdzie pokazuje jak używać funkcji @ import w Sass. Zobacz też tutaj:

• #279 zrozumienie rurociągu aktywów

• #268 Podstawy Sass

Edit: zapomniałem wspomnieć, że działa to zarówno lokalnie, jak i na Heroku na} stosie cedru .

Jest teraz jquery-ui-rails gem (Zobacz announcement ). Pakuje obrazy jako zasoby (i poprawnie odwołuje się do nich z plików CSS) , więc wszystko po prostu działa. :-)

Tak więc, oto jeden sposób, aby to zrobić, że brakuje wad niektórych z innych wymienionych tutaj -- to nie wymaga, aby rozebrać motyw i umieścić jego części w różnych miejscach, to nie wymaga dowiązań symbolicznych, i nadal pozwala skompilować css motywu do jednego głównego css jako część potoku zasobów. Nie wymaga małpiej łatki, jak sugestia Nasha Bridgesa.

Jednak wymaga dodatkowego rodzaju hacky linii konfiguracyjnej. (jednowarstwowa chociaż w zasadzie).

Ok, umieść swój motyw w vendor/assets / jquery / UI-lightness/, tak jak chciałeś. (działa również w lib/assets lub app/assets, w ten sam sposób).

I

/* =require ui-lightness */

W twoim zgłoszeniu.css. Jak na razie dobrze. Teraz, aby obrazy wyświetlały się prawidłowo, wystarczy dodać to do 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

Dla mnie działa teraz w dev, production i innych niestandardowych konfiguracjach zasobów, które mogłem wymyślić (jak dev z debug = false, co podnosi niektóre z innych próby rozwiązania).

Więcej informacji na http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

Bazując na wielu innych sugestiach tutaj, znalazłem rozwiązanie, które działa w moim środowisku deweloperskim i w produkcji na Heroku.

app / assets/javascripts / application.js

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

app / assets/stylesheets / application.css

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

vendor/assets/stylesheets / vendor.css

 /*
 *= require_self
 *= require_tree .
*/

Dodałem jquery-ui-1.8.16.na zamówienie.css i powiązanych images folder vendor/assets/stylesheets (znalazłem, że chyba images folder znajdował się w tym samym folderze co vendor.css nie zadziałało).

Żadne inne zmiany nie były konieczne, aby to działało w środowisku produkcyjnym Heroku.

Aby to zadziałało zarówno na moim lokalnym środowisku deweloperskim, jak i na Heroku, zrobiłem prawie to samo co denysonique zasugerował , ale z kilkoma różnicami na końcu:

Najpierw moja struktura katalogów wyglądała tak:

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

A po drugie, mój link symboliczny brzmiał:

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

Jest proponowana poprawka w Ruby on Rails, która sprawia, że prekompilacja obrazów interfejsu jQuery działa.

(od wersji 3.1. 0rc6, precompiler zasobów używa wyrażenia regularnego /\w+\.(?!js|css).+/, aby znaleźć rzeczy do kompilacji. Pomija to wszystkie obrazy interfejsu jQuery, ponieważ ich nazwy zawierają myślniki i podkreślenia.)

Łączenie sugestii jest tym, co działa na mnie:

Umieść folder CSS z motywem jQuery UI w vendor/assets/stylesheets.

Umieścić vendor.css w vendor/assets/stylesheets:

*= require_tree ./theme-css-name

W production.rb dodałem to:

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

To właśnie wymagało, aby obrazy zostały wstępnie skompilowane i rozwiązane bez edycji pliku CSS motywu jQuery UI lub przenoszenia obrazów z folderu CSS motywu.

Myślę, że możesz umieścić style ui w app / assets / stylesheets. Zrób coś takiego:

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

W arkuszu stylów 'jquery-ui', coś takiego:

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

To, co zrobiłem, aby wszystko działało prawidłowo, jest następujące.

1.) Dodano CSS do folderu assets/stylesheets

2.) Dodano images do folderu assets / images

3.) Usunięto ścieżki do wszystkich obrazów w CSS za pomocą Znajdź "url (images /" i zamień na "" pozostawiając tylko nazwę pliku obrazu.

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

Używając Ruby on Rails 3.1.1, po prostu umieściłem pliki w następujący sposób. Inne zmiany nie były wymagane.

• app/assets/stylesheets/jquery-ui-1.8.16.na zamówienie.css
• app / assets / images / ui-bg_highlight-soft_75_ccccc_1x100.png
• ...

To, co działało dla mnie, to zamiast pliku CSS motywu jQuery w app/assets/stylesheets/ i obrazów w app/assets/images/. Umieściłem je w app/assets/images/images/ i zadziałało. To rodzaj włamania, ale wydaje się działać w tym momencie z minimalnym fudging i bez modyfikowania plików CSS.

Pobierz motyw hostowany CDN z Google:

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

Na ten moment znalazłem Nie idealne, ale działające rozwiązanie.

Zakładając, że masz motyw jQuery UI w folderze /vendor/assets/stylesheets/. Następnie należy zmodyfikować aplikację.css:

/* =require ui-lightness */

I utworzyć plugin_assets_monkey_patch.rb W /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

Indeks.css w każdym podfolderze /vendor/assets/stylesheets/ gwarantuje, że arkusze stylów takie jak jquery-ui-1.8.11.custom.css zostaną skompilowane (jeśli potrzebujesz tego podfolderu).

config.assets.paths zapewnia, że foldery takie jak /vendor/assets/stylesheets/ui-lightness/images są widoczne na główny zakres aplikacji.