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는 어떻습니까?

아니면이 모든 것이 완전히 분리되어야합니까?

이 작업을 수행하는 일반적인 방법이있는 경우이 모든 것을 구성하는 방법은 확실하지 않습니다. 입력이 감사합니다.

(. 당신이 어떤을 필요로하는 경우 자세한 내용은 문의 바랍니다)

편집 : 가 나는 또한 내 모바일 전용 JS와 CSS를 넣어하는 방법 궁금하네요 * ... 그것은 정말 당신의 결정이다

답변

6

이제 애셋 파이프 라인에서 jQuery Mobile 파일을 사용할 수있게 해주는 jQuery Mobile Ruby gem이 있습니다.

설치가 쉽습니다. 간단하게 앱을 Gemfile

gem "jquery-mobile-rails" 

에 보석을 추가하고 bundle install를 실행합니다. 그런 다음 application.js 또는 파일을 포함하려는 다른 곳에

을 추가 할 수 있습니다.

+0

이 보석은 비슷하며 사용 중일 수도 있습니다. https://github.com/dbloete/jquery_mobile-rails – Pygmalion

+0

감사합니다. 기회가 생겼을 때 이것을 시험해 보겠습니다. – dmonopoly

+0

링크가 더 이상 유효하지 않습니다. – Meier

1

당신이 우선하고 싶은 것에 함수를 file2에서 호출하는 경우 해당 함수를 정의하는 file1이 먼저 포함되어 있는지 확인해야합니다.

asset_pipeline에서이 작업을 수행하는 방법은 자산을 직접 다운로드하고 application.css/application.js에 번들로 제공하거나 <head> 순서대로 보관하십시오.

6

jQuery Mobile (이제는 최종 1.0)을 Rails 3.1의 새로운 자산 파이프 라인과 함께 사용하는 방법을 알아 내려 했었습니다.

먼저 jquery.mobile.js 및 jquery.mobile.css를 assets/javascripts 및 assets/stylesheets에 놓습니다.

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

셋째, 넣어 "application.js :

둘째,

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

매니페스트 그리고 당신의 application.css 매니페스트에 같은 당신의 application.js에"jquery.mobile 필요 "삽입 "및"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을 사용하는 것보다 간단하고 훨씬 덜 신비 롭습니다. 고맙습니다. –

관련 문제