jquery-ui - Ruby onRails3.1およびjQueryUIイメージ

Question

私はRubyonRails（Edge、開発バージョン）とRubyrvm1.9.2を使用しています。

application.js以下のとおりであります。

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

Ruby on Rails 3.1でjQueryUIテーマを配置するのに適切な場所はどこですか？

Ruby on Rails3.1のjQueryUIを使用したオートコンプリートフィールドによると、 jQueryUIテーマをvendor/ Assets/stylesheetsフォルダーに配置する必要があります。それを持っているのは賢い場所のように聞こえますが、私はそれを機能させません:-(。

CSSをassets/stylesheetsフォルダーに入れることでロードできましたが、画像をロードできませんでした。

もちろん、テーマをpublic / stylesheets /フォルダーに配置し、次を使用するだけで、古い方法を使用することもできます。

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

application.html.erbにありますが、現代人になろうとすると、新しい方法を使用したいと思います:-)。

score 26 · Accepted Answer

Ruby on Rails 3.1.0 ができたので、これでうまくいきました。

app/assets/javascripts/application.js

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

jquery-railsこれには、 gemによって提供される jQuery UI が直接含まれます。ただし、gem はテーマファイルを提供しません。これらのために、以下を含むthemeディレクトリをの下に追加しました。vendor/assets/stylesheets

jquery.ui.theme.cssファイル、
jQuery UI テーマのimagesディレクトリ。

テーマのimagesディレクトリを CSS ファイルと一緒に保管してください。画像ファイルをの下vendor/assets/imagesに置かないでください。そうしないと、jQuery によって検出されなくなります (これらはの下で検索されます/assets/images)。

最後に、app/assets/stylesheets/application.cssファイルを次のように変更しました。

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

score 19 · Accepted Answer

作業セットアップの例:

    $ 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 をお楽しみください

score 7 · Accepted Answer

私はそれを古い方法で行うことに落ちました：

テーマ (CSS フォルダーと画像フォルダーの両方で変更されていない) を含む jQuery フォルダーを assets/stylesheets フォルダーに配置し、ファイルに:<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %>を配置しapp/views/layouts/application.html.erbます。このソリューションは、後で jQuery を更新するときにヘーゼルが少ないソリューションです。

（解決策に関するすべての提案に感謝します。結論を出す時が来ました。）

score 6 · Accepted Answer

jQuery UI JavaScript コードを選択的にダウンロードして、将来のバージョンに簡単にアップグレードし、軽量の jQuery UI (必要なファイルのみを含めます。ここではprogressbar.js ) を使用できるようにするのが好きです。

「Dot Luv」jQuery UI テーマの次の設定があります。

ノート：

JavaScript と CSS ファイルは圧縮されておらずjquery-ui-1.8.16.custom/development-bundle/ui、jquery-ui-1.8.16.custom/development-bundle/themes/dot-luvそれぞれとから取得されています。スプロケットを使用して縮小および圧縮しています。

画像はからのものjquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/imagesです。

ディレクトリ構造:

ディレクトリ構造

アプリ/資産/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

config/application.rb

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

score 5 · Accepted Answer

このスレッドにはすでに多くの答えがあることは知っていますが、私にとって最も効果的なものを投入します。

ヘルパーを使用してすでにsassに変換されているデフォルトのjQueryUIテーマを含むjquery-ui-themesと呼ばれるgemがあります。したがって、gemを含めて、ファイルに追加するだけで、デフォルトのテーマをすぐに利用できます。image-pathapplication.css

（私が行ったように）独自のカスタムテーマを使用したい場合は、CSSファイルをSCSSに自動的に変換し、image-pathヘルパーを使用して正しいパスを見つけるrakeタスクがあります。

score 5 · Accepted Answer

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 ファイル (jQuery UI 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 は、Ruby on Rails 3.1 のアセットパイプラインとSassに関するいくつかの優れたスクリーンキャストを公開しており、Sassで @import 関数を使用する方法を示しています。ここでそれを見る：

編集:これは、ローカルとCedar スタック上のHerokuの両方で機能することを忘れていました。

score 5 · Accepted Answer

jquery-ui-rails gem が追加されました (お知らせを参照)。画像をアセットとしてパッケージ化 (および CSS ファイルから正しく参照) するので、問題なく動作します。:-)

score 3 · Accepted Answer

したがって、ここで説明した他のいくつかの欠点がない1つの方法があります。テーマを分解して別の場所に配置する必要はなく、シンボリックリンクも必要ありません。それでも、アセットパイプラインの一部としてテーマcssを1つのメインcssにコンパイルできます。ナッシュブリッジの提案のようなモンキーパッチは必要ありません。

ただし、追加の種類のハッキーな構成行が必要です。（ただし、基本的にはワンライナーです）。

さて、あなたが望むように、あなたのテーマをベンダー/アセット/ jquery /ui-lightness/に入れてください。（lib/assetsまたはapp/assetでも同じように機能します）。

と

/* =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

私にとっては、開発、本番、および考えられるその他の非標準のアセット構成で機能するようになりました（debug = falseのdevのように、他の試行されたソリューションのいくつかをトリップします）。

詳細については、http：//bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/をご覧ください。

score 2 · Accepted Answer

ここでの他の多くの提案に基づいて、開発環境と 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と関連するimagesフォルダーをvendor/assets/stylesheetsに追加しました ( imagesフォルダーがvendor.cssと同じフォルダーにない限り、機能しないことがわかりました)。

これを Heroku 本番環境で機能させるために必要なその他の変更はありません。

@denysonique、@softRli、@Paul Cook の以前の回答に感謝します。

score 1 · Accepted Answer

ここで提案を組み合わせることで、私にとってうまくいきました。

jQuery UI テーマの 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

これは、jQuery UI テーマ CSS ファイルを編集したり、テーマ CSS フォルダーから画像を移動したりせずに、画像をプリコンパイルして解決するために必要なことです。

score 1 · Accepted Answer

Ruby on Rails には、jQuery UI の画像のプリコンパイルを機能させる提案された修正があります。

(3.1.0rc6 の時点で、アセットプリコンパイラは正規表現/\w+\.(?!js|css).+/を使用してコンパイルするものを見つけます。名前にダッシュとアンダースコアが含まれているため、すべての jQuery UI イメージが失われます。)

score 1 · Accepted Answer

これをローカル開発環境と Heroku の両方で動作させるために、 denysonique が提案したのとほぼ同じことを行いましたが、最後にいくつかの違いがあります。

まず、私のディレクトリ構造は次のようになりました。

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

次に、私のシンボリックリンクは次のとおりです。

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

これが最終的に私のために働いたものです。

score 0 · Accepted Answer

私のために働いたのは、jQueryテーマのCSSファイルapp/assets/stylesheets/と画像をに入れる代わりでしたapp/assets/images/。私はそれらをに入れましたapp/assets/images/images/、そしてそれは働きました。これは一種のハックですが、この時点では、CSSファイルを変更せずに最小限の手間で機能しているようです。

score 0 · Accepted Answer

すべてを正しく機能させるために私がしたことは次のとおりです。

1.）CSSをassets/stylesheetsフォルダーに追加しました

2.）アセット/画像フォルダに画像を追加しました

3.）find "url（images /"を使用して、CSS内のすべての画像へのパスを削除し、画像ファイル名だけを残して""に置き換えます。

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

ビンゴ！すべてが正しく機能するはずです。

score 0 · Accepted Answer

Ruby on Rails 3.1.1 を使用して、単純に次のようにファイルを配置しました。他の変更は必要ありませんでした。

アプリ/アセット/スタイルシート/jquery-ui-1.8.16.custom.css
app/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
...

score 0 · Accepted Answer

app/assets/stylesheets に UI スタイルを配置できると思います。次のようにします。

# 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)
}

score 0 · Accepted Answer

Google から CDN がホストするテーマを取得します。

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

score -1 · Accepted Answer

その瞬間、私は完璧ではなく、機能する解決策を見つけました.

フォルダーに 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がアプリケーションのルートスコープで表示されるようにします。

jquery-ui - Ruby onRails3.1およびjQueryUIイメージ

18 に答える 18

Related

Reference