9

Rails 3.1アプリをjQueryモバイル(現時点ではベータ2)に統合しています。私はJS & CSSをどのように整理するのか不明です。Rails 3.1とjQuery mobile:アセットパイプラインを検討しながらJS&CSSを整理する最良の方法は?

私は(http://jquerymobile.com/download/から右にコピー)私のapplication.mobile.erbの頭のタグでこれを持っている:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 

は、私は私のCSSスタイルがオーバーライドしない権利、この上で「アプリケーション」のための私をstylesheet_link_tagを置くべきですjQueryモバイルの華麗なCSS? 'application'のjavascript_include_tagはどうですか?

または、これらのすべてが完全に分離されている必要がありますか?

これを行う方法がわかっていれば、これをすべて整理する方法は不明です。入力が分かりました。

(あなたがいずれかを必要とする場合の詳細はお問い合わせください。)

EDIT: は*私はまた私のモバイル固有のJSとCSSを入れて思ったんだけど...

答えて

6

jQuery Mobile Ruby gemがあり、jQuery Mobileファイルをアセットパイプラインで利用できるようになりました。

インストールは簡単です。単にアプリGemfile

gem "jquery-mobile-rails" 

に宝石を追加し、bundle installを実行します。その後、あなたはあなたのapplication.jsまたはどこ他のファイルを含めるに

//= require jquery.mobile 

を追加することができます。

+0

この宝石は似ており、また使用されている可能性があります。 https://github.com/dbloete/jquery_mobile-rails – Pygmalion

+0

ありがとうございます - 私はチャンスを得るときにこれを試してみるでしょう。 – dmonopoly

+0

リンクはもう有効ではありません。 – Meier

1

それは本当にあなたの決断ですあなたが優先したいものについて関数をfile2で呼び出す場合、その関数を定義するfile1がその前に含まれていることを確認してください。

asset_pipelineでこの作業を行う方法については、アセットを自分でダウンロードしてapplication.css/application.jsに同梱するか、<head>の順番でそれを保持してください。

6

あなたと同じように、Rails 3.1の新しいアセットパイプラインでjQuery Mobile(今は最終版1.0)を使用する方法を理解するのはかなり混乱しました。

まず、jquery.mobile.jsとjquery.mobile.cssをassets/javascriptsとassets/stylesheetsにそれぞれドロップします。

第二に、あなたのapplication.cssマニフェストに

//= require jquery 
//= require jquery_ujs 
//= require jquery.mobile 

と同じマニフェストapplication.jsに "jquery.mobileを必要とし、" 挿入:

*= require_self 
*= require_tree . 
*= require jquery.mobile 

第三に、「application.jsを置きます"と" application.css "をレイアウトapplication.htmlに追加します。ERB

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<%= javascript_include_tag "application" %> 
<%= stylesheet_link_tag "application" %> 
<%= csrf_meta_tags %> 

第四には、追加することを忘れないでください「メタ名を~~~」行を、それが正常に動作するように。

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport"> 

ページの 'data-role = "page"'のように、jQueryモバイルプロパティも正しく使用してください。 「jquery-mobile-rails」などの宝石を使用することをお勧めしますが、そうではありません。

+1

これはjquery-mobile-rails gemを使うよりも簡単で、ずっと不思議です。ありがとうございました。 –

関連する問題