Ruby on Rails 3.1 et images jQuery UI

Question

J'utilise Ruby on Rails (Edge, la version de développement), et Ruby rvm 1.9.2.

application.js est le suivant.

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

Quel est le bon endroit dans Ruby on Rails 3.1 pour mettre l'option jQuery UI thème ?

Según Champs autocomplets en Ruby on Rails 3.1 avec jQuery UI Je devrais mettre un thème jQuery UI dans le dossier vendor/assets/stylesheets. Cela semble être l'endroit idéal, mais je n'arrive pas à le faire fonctionner :-(.

J'ai réussi à charger le CSS en le plaçant dans le dossier assets/stylesheets, mais je n'ai pas réussi à charger les images.

Je pourrais bien sûr utiliser l'ancienne méthode en plaçant simplement le thème dans le dossier public/stylesheets/, et en utilisant :

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

dans application.html.erb, mais pour être un homme moderne, je préfère utiliser la nouvelle façon de faire :-).

Answer 1

Maintenant que nous avons Ruby on Rails 3.1.0, voici ce qui a fonctionné pour moi :

app/assets/javascripts/application.js

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

Cela inclut directement l'interface utilisateur jQuery fournie par l'application jquery-rails gemme. Mais la gemme ne fournit pas les fichiers du thème. Pour ceux-ci, j'ai ajouté un theme sous le répertoire vendor/assets/stylesheets contenant :

• le site jquery.ui.theme.css fichier,
• l'élément du thème jQuery UI images répertoire.

Assurez-vous de garder le thème images avec le fichier CSS ! Ne placez pas les fichiers image sous vendor/assets/images ou ils ne seront pas trouvés par jQuery (qui les cherche sous le nom de /assets/images ).

Enfin, vous avez modifié le app/assets/stylesheets/application.css vers :

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

Answer 2

Exemple d'une configuration de travail :

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

Enfin, exécutez cette commande :

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

Profitez de votre interface utilisateur jQuery

Answer 3

Je me suis rabattu sur l'ancienne façon de faire :

J'ai mis le dossier jQuery, contenant le thème (inchangé avec le dossier CSS et images) dans le dossier assets/stylesheets, et en mettant : <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %> en app/views/layouts/application.html.erb fichier. Cette solution est celle qui présente le moins de risques lorsque je mettrai à jour jQuery plus tard.

(Merci pour toutes les suggestions sur la solution, il est temps de conclure).

Answer 4

J'aime télécharger sélectivement le code JavaScript de jQuery UI afin de pouvoir facilement mettre à jour vers les versions futures et avoir un jQuery UI léger (inclure uniquement les fichiers nécessaires, ici progressbar.js ).

J'ai la configuration suivante pour le thème jQuery UI "Dot Luv".

Note :

Les fichiers JavaScript et CSS ne sont pas compressés et proviennent de l'adresse suivante jquery-ui-1.8.16.custom/development-bundle/ui y jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv respectivement, et je compte sur les sprokets pour les minifier et les compresser.

Les images proviennent de jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images .

Structure du répertoire :

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/')

Answer 5

Avec Ruby on Rails 3.1.2, j'ai fait ce qui suit.

#app/assets/javascripts/application.js

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

Pour les fichiers CSS, j'aime faire @import pour avoir un meilleur contrôle sur l'ordre de chargement des fichiers CSS. Pour ce faire, je dois ajouter l'élément .scss l'extension à la app/assets/stylesheets/application.css et aussi à tous les fichiers CSS que je veux importer, comme le fichier CSS de 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";
....

Ensuite, j'ai mis tout ce qui concerne l'interface utilisateur de JQuery dans vendor/assets comme ceci :

Feuille de style jQuery UI :

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

Dossier des images de jQuery UI :

vendor/assets/images/images

Notez que vous pouvez créer un dossier supplémentaire dans le chemin des feuilles de style comme je l'ai fait ici avec le chemin "jquery-ui/ui-lightness". De cette façon, vous pouvez garder plusieurs thèmes jQuery bien séparés dans leurs propres dossiers.

** Redémarrez votre serveur pour charger les chemins de chargement nouvellement créés. **

Ryan Bates propose d'excellents screencasts sur le pipeline des actifs et Sass en Ruby on Rails 3.1, où il montre comment utiliser la fonction @import dans Sass. Regardez-le ici :

• #279 Comprendre le pipeline d'actifs

• #268 Sass Basics

Edit : J'ai oublié de mentionner que cela fonctionne à la fois localement et sur Heroku sur le Pile de cèdres .