Ruby on Rails 3.1 및 jQuery UI 이미지

IT박스

Ruby on Rails 3.1 및 jQuery UI 이미지

itboxs 2021. 1. 8. 08:01

Ruby on Rails 3.1 및 jQuery UI 이미지

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 UI의 자동 완성 필드에 따르면 공급 업체 / 자산 / 스타일 시트 폴더에 jQuery UI 테마를 넣어야합니다. 그것은 그것을 가지고있는 현명한 장소처럼 들리지만 작동하지 않습니다 :-(.

나는 assets / stylesheets 폴더에 넣어서 CSS를로드 할 수 있었지만, 이미지는로드되지 않았습니다.

물론 public / stylesheets / 폴더에 테마를 넣고 다음을 사용하여 예전 방식을 사용할 수 있습니다.

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

application.html.erb에 있지만 현대인이 되려고 노력하면 차라리 새로운 방식의 tings를 사용하고 싶습니다 :-).

이제 Ruby on Rails 3.1.0이 있으므로 이것이 저에게 효과적이었습니다.

app/assets/javascripts/application.js

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

여기에는 jquery-railsgem에서 제공하는 jQuery UI가 직접 포함됩니다 . 그러나 gem은 테마 파일을 제공하지 않습니다. 이를 위해 theme아래 vendor/assets/stylesheets에 다음을 포함 하는 디렉토리를 추가했습니다 .

jquery.ui.theme.css파일,
jQuery UI 테마의 images디렉토리.

imagesCSS 파일과 함께 테마의 디렉토리 를 유지 하십시오! 이미지 파일을 아래에 두지 마십시오. 그렇지 않으면 vendor/assets/imagesjQuery (아래에서 검색)에서 찾을 수 없습니다 /assets/images.

마지막으로 app/assets/stylesheets/application.css파일을 다음 과 같이 변경 했습니다.

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

작동 설정의 예 :

    $ 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 UI 즐기기

나는 그것을 옛날 방식으로 해왔다.

: 나는 / 스타일이 폴더 자산 (모두 CSS와 이미지 폴더 변경) 테마를 포함하고, 퍼팅, JQuery와 폴더를 넣어 <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %>에서 app/views/layouts/application.html.erb파일. 이 솔루션은 나중에 jQuery를 업데이트 할 때 적갈색이 적은 솔루션입니다.

(솔루션에 대한 모든 제안에 감사드립니다. 이제 결론을 내릴 때입니다.)

jQuery UI JavaScript 코드를 선택적으로 다운로드하여 향후 모든 버전으로 쉽게 업그레이드하고 가벼운 jQuery UI (필요한 파일 만 포함, 여기에는 progressbar.js )를 가질 수 있습니다 .

"Dot Luv"jQuery UI 테마에 대해 다음 설정이 있습니다.

노트 :

자바 스크립트와 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.

디렉토리 구조 :

디렉토리 구조

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

이 스레드에는 이미 많은 답변이 있지만 나에게 가장 잘 맞는 것을 던질 것입니다.

helper를 사용하여 이미 sass로 변환 된 기본 jQuery UI 테마 를 포함하는 jquery-ui-themes 라는 gem이 있습니다 . 따라서 gem을 포함하고 파일 에 추가하기 만하면 기본 테마를 즉시 사용할 수 있습니다.image-pathapplication.css

나만의 커스텀 테마를 사용하고 싶다면 (내가했던 것처럼) CSS 파일을 SCSS로 자동 변환하고 image-path도우미를 사용 하여 올바른 경로를 찾는 레이크 작업이 있습니다.

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하며 jQuery UI CSS 파일과 같이 가져 오려는 모든 CSS 파일에도 확장자 를 추가해야 합니다.

#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";
....

그런 다음 공급 업체 / 자산에 관련된 모든 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

여기서 "jquery-ui / ui-lightness"경로를 사용하여했던 것처럼 스타일 시트 경로에 추가 폴더를 만들 수 있습니다. 이렇게하면 여러 jQuery 테마를 자체 폴더에 멋지게 분리하여 유지할 수 있습니다.

** 새로 생성 된로드 경로를로드하려면 서버를 다시 시작 **

Ryan Bates has some excellent screencasts about the asset pipeline and Sass in Ruby on Rails 3.1, where he shows how to use the @import function in Sass. Watch it here:

Edit: I forgot to mention that this works both locally and on Heroku on the Cedar stack.

There is now a jquery-ui-rails gem (see announcement). It packages the images as assets (and correctly references them from the CSS files) so things Just Work. :-)

So, here's one way to do it that lacks the downsides of some of the others mentioned here -- it doesn't require you to take apart the theme and put parts of it in different places, it doesn't require symbolic links, and it still allows you to compile the theme css into the one main css as part of the asset pipeline. It does not require a monkey patch like Nash Bridges' suggestion.

However, it does require an additional kind of hacky configuration line. (a one-liner though, basically).

Okay, put your theme in vendor/assets/jquery/ui-lightness/, like you wanted to. (will also work in lib/assets or app/assets, same way).

And

/* =require ui-lightness */

in your application.css. So far so good. Now to get the images to show up right, just add this to 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

For me, it now works in dev, production, and other non-standard asset configs I could think of (like dev with debug=false, which trips up some of the other attempted solutions).

More info at http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

Building on a number of other suggestions here, I found a solution that works in my dev environment and in production on 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 .
*/

I added jquery-ui-1.8.16.custom.css and the associated images folder to vendor/assets/stylesheets (I found that unless the images folder was in the same folder as vendor.css it didn't work).

No other changes were necessary for this to work in the Heroku production environment.

Thanks to @denysonique, @softRli and @Paul Cook for their previous answers which helped me.

To get this to work on both my local dev environment and on Heroku, I did almost the same thing as denysonique suggested, but with a couple of differences at the end:

First, my directory structure looked like this:

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

And second, my symbolic link was:

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

This is what finally worked for me.

There's a proposed fix in Ruby on Rails that makes precompilation of jQuery UI's images work.

(As of 3.1.0rc6, the asset precompiler uses the regular expression /\w+\.(?!js|css).+/ to find things to compile. This misses all the jQuery UI images because their names include dashes and underscores.)

Combining suggestions here is what got things working for me:

Put the jQuery UI theme CSS folder in vendor/assets/stylesheets.

Put vendor.css in vendor/assets/stylesheets:

*= require_tree ./theme-css-name

In production.rb I added this:

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

That is what it took to get the images to get precompiled and resolve without editing the jQuery UI theme CSS file or moving the images out of the theme CSS folder.

I think you can put ui styles in app/assets/stylesheets. Do something like this:

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

In 'jquery-ui' stylsheet, something like this:

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

What I did to get everything to work properly is as follows.

1.) Added the CSS to the assets/stylesheets folder

2.) Added the images to the assets/images folder

3.) Removed the paths to all the images in the CSS using find "url(images/" and replace with "" leaving just the image file name.

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

Bingo! Everything should work correctly.

Using Ruby on Rails 3.1.1, I simply placed the files as follows. No other changes were required.

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

What worked for me was instead of having the jQuery theme CSS file in app/assets/stylesheets/ and the images in app/assets/images/. I placed them into app/assets/images/images/, and it worked. It's kind of a hack, but it seems to work at this point with minimal fudging and without modifying the CSS files.

Get the CDN hosted theme from Google:

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

그 순간 나는 완벽하지 않고 해결책을 찾아 냈다.

/vendor/assets/stylesheets/폴더 에 jQuery UI 테마가 있다고 가정 합니다. 그런 다음 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

모든 /vendor/assets/stylesheets/하위 폴더의 index.css 는 같은 스타일 시트 jquery-ui-1.8.11.custom.css가 컴파일되도록 보장합니다 (해당 하위 폴더가 필요한 경우).

config.assets.paths같은 폴더 /vendor/assets/stylesheets/ui-lightness/images가 응용 프로그램 루트 범위에서 표시되도록합니다.

참조 URL : https://stackoverflow.com/questions/6048490/ruby-on-rails-3-1-and-jquery-ui-images

'IT박스' 카테고리의 다른 글

Facebook "좋아요"버튼 콜백 (0)	2021.01.08
CSS 성능 프로파일 러? (0)	2021.01.08
노트북을 Mathematica의 문서 센터에 통합 (0)	2021.01.08
오류 : Express에서보기를 조회하지 못했습니다. (0)	2021.01.08
webdriver에서 요소의 현재 내용을 어떻게 얻을 수 있습니까? (0)	2021.01.08

현재글Ruby on Rails 3.1 및 jQuery UI 이미지

itboxs

Ruby on Rails 3.1 및 jQuery UI 이미지

Ruby on Rails 3.1 및 jQuery UI 이미지

'IT박스' 카테고리의 다른 글

'IT박스'의 다른글

티스토리툴바

Ruby on Rails 3.1 및 jQuery UI 이미지

Ruby on Rails 3.1 및 jQuery UI 이미지

'IT박스' 카테고리의 다른 글

'IT박스'의 다른글

관련글

티스토리툴바