9

Rails3.1アプリをjQuerymobile（現時点ではベータ2）と統合していますが、JSとCSSを整理する方法がわかりません。

私はこれを私のapplication.mobile.erbのヘッドタグに持っています（http://jquerymobile.com/download/から直接コピーされました）：

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

'application'のstylesheet_link_tagをこのすぐ上に配置して、CSSスタイルがjQuery mobileの派手なCSSを上書きしないようにする必要がありますか？'application'のjavascript_include_tagはどうですか？

それとも、これらすべてを完全に分離する必要がありますか？

私はこれをすべて整理する方法がわかりません/これを行うための従来の方法があるかどうか。入力を歓迎します。

（必要に応じて詳細をお問い合わせください。）

編集：*モバイル固有のJSとCSSをどこに配置するかも疑問に思っています...

4

3 に答える 3

6

アセットパイプラインでjQueryMobileファイルを利用できるようにするjQueryMobileRubygemが追加されました。

インストールは簡単です。アプリに宝石を追加するだけですGemfile

gem "jquery-mobile-rails"

を実行しますbundle install。次に、追加できます

//= require jquery.mobile

あなたapplication.jsまたはあなたがファイルを含めたい他のどこにでも。

于 2011-09-19T15:24:53.827 に答える
6

あなたと同じように、Rails3.1の新しいアセットパイプラインでjQueryMobile（現在はfinal 1.0）を使用する方法を理解するのにかなり混乱していました。

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

次に、「requirejquery.mobile」をapplication.jsマニフェストに挿入します

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

そして、application.cssマニフェストも同じです。

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

3番目に、「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 %>

第4に、正しく機能させるために「メタ名~~~」行を追加することを忘れないでください。

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

また、ページの「data-role =” page”」のように、jQueryモバイルプロパティを適切に使用します。'jquery-mobile-rails'などのgemを使用することを推奨する人もいますが、私はそうしません。

于 2012-01-08T03:14:47.370 に答える
1

何を優先したいかは、本当にあなたの決断です。呼び出す順序に基づいて、他のものよりも優先する必要がある場合があります（file2で関数が呼び出されている場合は、その関数を定義するfile1がその前に含まれていることを確認してください）。

これをasset_pipelineで操作する方法については、アセットを自分でダウンロードしてバンドルするか、適切な順序でapplication.css/application.js保持<head>します。

于 2011-08-05T08:21:33.963 に答える