jquery-ui - ejemplos - ui draggable dragging

Ruby on Rails 3.1 y jQuery UI imágenes

Question

Estoy usando Ruby on Rails (Edge, la versión de desarrollo) y Ruby rvm 1.9.2.

application.js es el siguiente.

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

¿Dónde está el lugar correcto en Ruby on Rails 3.1 para poner el tema jQuery UI ?

De acuerdo con los campos Autocompletar en Ruby on Rails 3.1 con jQuery UI , debería colocar un tema jQuery UI en la carpeta vendor / assets / stylesheets. Eso suena como un lugar inteligente para tenerlo, pero no lo hago funcionar :-(.

Me las arreglé para cargar el CSS poniéndolo en la carpeta assets / stylesheets, pero las imágenes que no pude cargar.

Por supuesto, podría estar usando el viejo estilo simplemente colocando el tema en la carpeta public / stylesheets / y usando:

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

en application.html.erb, pero tratando de ser un hombre moderno, prefiero usar la nueva forma de hacer tings :-).

Answer 1

Ahora hay una gema jquery-ui-rails (ver announcement ). Encapsula las imágenes como activos (y las referencia correctamente desde los archivos CSS) para que las cosas funcionen. :-)

Answer 2

Ahora que tenemos Ruby on Rails 3.1.0, esto es lo que funcionó para mí:

app/assets/javascripts/application.js

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

Esto incluye directamente la jQuery UI proporcionada por la gema jquery-rails . Pero la gema no proporciona los archivos de tema. Para estos, agregué un directorio de theme en vendor/assets/stylesheets , que contiene:

• el archivo jquery.ui.theme.css ,
• el directorio de images del tema jQuery UI.

¡Asegúrese de mantener el directorio de images del tema con el archivo CSS! No coloque los archivos de imagen en vendor/assets/images , o no los encontrará jQuery (que los buscará en /assets/images ).

Finalmente, cambió el archivo app/assets/stylesheets/application.css a:

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

Answer 3

Combinar sugerencias aquí es lo que hizo que las cosas funcionen para mí:

Coloque la carpeta CSS del tema de jQuery UI en vendor/assets/stylesheets .

Ponga vendor.css en vendor/assets/stylesheets :

*= require_tree ./theme-css-name

En production.rb agregué esto:

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

Eso es lo que se necesitó para obtener las imágenes para que se precompilasen y resolvieran sin editar el archivo CSS del tema de la interfaz de usuario de jQuery ni mover las imágenes fuera de la carpeta de CSS del tema.

Answer 4

Con Ruby on Rails 3.1.2 hice lo siguiente.

#app/assets/javascripts/application.js

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

Para los archivos CSS, me gusta hacer @import para tener más control sobre el orden de carga de los archivos CSS. Para hacer esto, tengo que agregar la extensión .scss al .scss app/assets/stylesheets/application.css , y también a todos los archivos CSS que deseo importar, como el archivo 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";
....

Luego pongo todo lo relacionado con jQuery UI en proveedores / activos como este:

Hoja de estilo jQuery UI:

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

jQuery UI images folder:

vendor/assets/images/images

Tenga en cuenta que puede crear una carpeta adicional en la ruta de las hojas de estilo, como hice aquí con la ruta "jquery-ui / ui-lightness". De esta forma, puede mantener múltiples temas jQuery muy bien separados en sus propias carpetas.

** Reinicie su servidor para cargar cualquier ruta de carga recién creada **

Ryan Bates tiene algunos screencasts excelentes sobre el flujo de activos y Sass en Ruby on Rails 3.1, donde muestra cómo usar la función @import en Sass. Míralo aquí:

• # 279 Comprender el inventario de activos

• # 268 Conceptos básicos de Sass

Editar: Olvidé mencionar que esto funciona tanto localmente como en Heroku en la pila de Cedar .

Answer 5

Creo que puedes poner estilos de interfaz de usuario en la aplicación / assets / stylesheets. Haz algo como esto:

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

En la hoja de estilo ''jquery-ui'', algo como esto:

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

Answer 6

Ejemplo de una configuración de trabajo:

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

Finalmente ejecuta este comando:

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

Disfruta tu jQuery UI

Answer 7

Hay una solución propuesta en Ruby on Rails que hace que la precompilación de las imágenes de jQuery UI funcione.

(A partir de 3.1.0rc6, el precompilador de activos usa la expresión regular //w+/.(?!js|css).+/ para encontrar elementos que compilar. Esto omite todas las imágenes de jQuery UI porque sus nombres incluyen guiones y guiones bajos. )

Answer 8

Lo que funcionó para mí fue en lugar de tener el archivo CSS del tema jQuery en la app/assets/stylesheets/ y las imágenes en la app/assets/images/ . Los coloqué en la app/assets/images/images/ , y funcionó. Es como un hack, pero parece funcionar en este punto con un mínimo de fudge y sin modificar los archivos CSS.

Answer 9

Lo que hice para que todo funcione correctamente es el siguiente.

1.) Agregó el CSS a la carpeta assets / stylesheets

2.) Agregó las imágenes a la carpeta assets / images

3.) Se eliminaron las rutas a todas las imágenes en el CSS usando find "url (images /" y replace with "" dejando solo el nombre del archivo de imagen.

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

¡Bingo! Todo debería funcionar correctamente.

Answer 10

Me gusta descargar selectivamente el código JavaScript de jQuery UI para poder actualizar fácilmente a cualquier versión futura y tener una interfaz de usuario de jQuery ligera (solo incluya los archivos necesarios, aquí progressbar.js ).

Tengo la siguiente configuración para el tema jQuery UI "Dot Luv".

Nota:

Los archivos JavaScript y CSS están descomprimidos y tomados de jquery-ui-1.8.16.custom/development-bundle/ui y jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv , respectivamente, y confío en sprokets para minimizarlos y comprimirlos.

Las imágenes son de jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images .

Estructura de directorios:

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 11

Me he enamorado de hacerlo a la vieja usanza:

Puse la carpeta jQuery, que contiene el tema (sin cambios con CSS y la carpeta de imágenes) en la carpeta assets / stylesheets, y poniendo en: <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %> en la app/views/layouts/application.html.erb file. Esta solución es la que tiene menos avellana cuando actualizaré jQuery más tarde.

(Gracias por todas las sugerencias sobre la solución. Es hora de concluir).

Answer 12

Obtén el tema alojado por CDN de Google:

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

Answer 13

Para ese momento, encontré no una solución perfecta pero trabajando.

Suponiendo que tiene el tema jQuery UI en la carpeta /vendor/assets/stylesheets/ . Luego debes modificar application.css :

/* =require ui-lightness */

y crea plugin_assets_monkey_patch.rb en /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 en every /vendor/assets/stylesheets/ subfolder garantiza que se compilarán las hojas de estilo como jquery-ui-1.8.11.custom.css (si necesita esa subcarpeta).

config.assets.paths asegura que las carpetas como /vendor/assets/stylesheets/ui-lightness/images sean visibles en el ámbito raíz de la aplicación.

Answer 14

Para que esto funcione en mi entorno de desarrollo local y en Heroku, hice casi lo mismo que sugerí denysonique , pero con un par de diferencias al final:

Primero, mi estructura de directorios se veía así:

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

Y segundo, mi enlace simbólico fue:

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

Esto es lo que finalmente funcionó para mí.

Answer 15

Por lo tanto, esta es una forma de hacerlo que carece de las desventajas de algunos de los otros mencionados aquí: no requiere desmontar el tema y colocar partes de él en diferentes lugares, no requiere enlaces simbólicos, y aún le permite compilar el CSS del tema en el CSS principal como parte de la canalización de activos. No requiere un parche de mono como la sugerencia de Nash Bridges.

Sin embargo, requiere un tipo adicional de línea de configuración hacky. (un one-liner, básicamente).

De acuerdo, pon tu tema en el proveedor / assets / jquery / ui-lightness /, como quisieras. (también funcionará en lib / assets o app / assets, del mismo modo).

Y

/* =require ui-lightness */

en su application.css. Hasta aquí todo bien. Ahora, para que las imágenes se muestren correctamente, simplemente añádalo a 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

Para mí, ahora funciona en dev, producción y otras configuraciones de activos no estándares en las que podría pensar (como dev con debug = false, que activa algunas de las otras soluciones).

Más información en http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

Answer 16

Sé que este hilo ya tiene muchas respuestas, pero voy a incluir lo que funcionó mejor para mí.

Hay una joya llamada jquery-ui-themes que incluye los temas predeterminados de jQuery UI ya convertidos en sass usando el asistente de image-path la image-path . De modo que puede incluir la gema y obtener cualquiera de los temas predeterminados al agregarlos a su archivo application.css .

Si desea usar su propio tema personalizado (como yo lo hice) hay una tarea de rake que convertirá automáticamente el archivo CSS a SCSS y usará el helper de image-path para encontrar la ruta correcta.

Answer 17

Sobre la base de una serie de otras sugerencias aquí, encontré una solución que funciona en mi entorno de desarrollo y en producción en 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 .
*/

proveedor / assets / stylesheets / vendor.css

 /*
 *= require_self
 *= require_tree .
*/

Agregué jquery-ui-1.8.16.custom.css y la carpeta de imágenes asociada a vendor / assets / stylesheets (encontré que a menos que la carpeta de imágenes estuviera en la misma carpeta que vendor.css no funcionó).

No fue necesario ningún otro cambio para que esto funcione en el entorno de producción de Heroku.

Gracias a @denysonique, @softRli y @Paul Cook por sus respuestas anteriores que me han ayudado.

Answer 18

Usando Ruby on Rails 3.1.1, simplemente coloqué los archivos de la siguiente manera. No se requieren otros cambios.

• app / assets / stylesheets / jquery-ui-1.8.16.custom.css
• app / assets / images / ui-bg_highlight-soft_75_cccccc_1x100.png
• ...