Rails 3.1 и jQuery mobile: лучший способ организовать свой JS & CSS с учетом конвейера активов? - PullRequest
Новая
       19

Rails 3.1 и jQuery mobile: лучший способ организовать свой JS & CSS с учетом конвейера активов?

9 голосов
/ 04 августа 2011

Я интегрирую свое приложение Rails 3.1 с мобильным jQuery (бета-версия 2, на данный момент), и я не знаю, как организовать мой JS & CSS.

У меня есть это в моем приложении.Тег заголовка .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>

Должен ли я поместить свой stylesheet_link_tag для 'application' прямо над этим, чтобы мои стили CSS не перекрывали причудливый CSS jQuery mobile?'application'?

Или, может быть, все это должно быть совершенно отдельным?

Я просто не уверен, как все это организовать / если есть обычный способ сделать это..

(Пожалуйста, попросите более подробную информацию, если вам это понадобится.)

РЕДАКТИРОВАТЬ: * Мне также интересно, куда поместить мои мобильные JS и CSS ...

Ответы [ 3 ]

6 голосов
/ 19 сентября 2011

Теперь существует jQuery Mobile Ruby gem , который сделает файлы jQuery Mobile доступными вам в конвейере ресурсов.

Установка проста. Просто добавьте драгоценный камень в ваши приложения Gemfile

gem "jquery-mobile-rails"

и запустить bundle install. Затем вы можете добавить 

//= require jquery.mobile

на application.js или куда вы хотите включить файлы.

6 голосов
/ 08 января 2012

Точно так же, как и вы, я не мог понять, как использовать jQuery Mobile (сейчас финальная версия 1.0) с новым конвейером ресурсов Rails 3.1.

Сначала удалите jquery.mobile.js и jquery.mobile.css в assets / javascripts и assets / stylesheets соответственно.

Во-вторых, вставьте "require jquery.mobile" в ваш application.js manifest 

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

И то же самое для вашего приложения.Манифест css: 

*= 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 name ~~~', чтобы она работала правильно. 

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

Также правильно используйте свойства jQuery для мобильных устройств, например, "data-role =" page "" на странице.Другие рекомендуют использовать драгоценные камни, такие как «jquery-mobile-rails» или аналогичные, но я бы не стал.

1 голос
/ 05 августа 2011

Это действительно ваше решение о том, что вы хотите иметь приоритет. Некоторые вещи могут иметь приоритет над другими просто в зависимости от порядка их вызова (если функция вызывается в file2, убедитесь, что файл1, определяющий эту функцию, включен перед ней).

Что касается работы с asset_pipeline, вы либо сами загружаете ресурсы и связываете их в application.css/application.js, либо сохраняете в <head> в том порядке, который вам подходит.

...