Rails 3.1 and jQuery mobile: Best way to organize your JS & CSS while considering the asset pipeline?
I'm integrating my Rails 3.1 app with jQuery mobile (Beta 2, at the moment), and I'm uncertain how to organize my JS & CSS.
I have this in my application.mobile.erb's head tag (copied right from 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>
Should I put my stylesheet_link_tag for 'application' right above this so my CSS styles don't开发者_运维知识库 override jQuery mobile's fancy CSS? What about the javascript_include_tag for 'application'?
Or maybe all of this should be entirely separate?
I'm just unsure how to organize all of this / if there is a conventional way to do this. Input appreciated.
(Please ask for more details if you need any.)
EDIT: *I'm also wondering where to put my mobile-specific JS and CSS...
There is now a jQuery Mobile Ruby gem that will make the jQuery Mobile files available to you in the assets pipeline.
Installation is easy. Simply add the gem to your apps Gemfile
gem "jquery-mobile-rails"
and run bundle install. Then, you can add
//= require jquery.mobile
to your application.js or wherever else you want to include the files.
Just like you, I was quite confused to figure out how to use jQuery Mobile (now final 1.0) with Rails 3.1's new asset pipeline.
First, drop jquery.mobile.js and jquery.mobile.css into assets/javascripts and assets/stylesheets respectively.
Second, insert "require jquery.mobile" into your application.js manifest
//= require jquery
//= require jquery_ujs
//= require jquery.mobile
And the same to your application.css manifest:
*= require_self
*= require_tree .
*= require jquery.mobile
Third, put "application.js" and "application.css" into the layout, application.html.erb
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application" %>
<%= csrf_meta_tags %>
Fourth, don't forget to add 'meta name~~~' line to make it work properly.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
Also use the jQuery mobile properties properly, like 'data-role=”page”' in the page. Others recommend to use gems like 'jquery-mobile-rails' or similar but I wouldn't.
It's really your decision on what you want to have precedence. Some things may have to have precedence over others just based on the order you call things (if a function is being called in file2, make sure file1 that defines that function is included before it).
In terms of how to work this in with asset_pipeline, you either download the assets yourself and bundle them in application.css/application.js or you keep it in <head> in the order that works for you.
加载中,请稍侯......
精彩评论