Переопределить Jquery Mobile CSS - PullRequest
Новая
       2

Переопределить Jquery Mobile CSS

8 голосов
/ 26 октября 2011

Можно ли переопределить уже стилизованные элементы JQuery Mobile (кнопки, списки и т. Д.) Отдельным пользовательским файлом css?

Если да, то как мне ссылаться на элементы?

Спасибо

Ответы [ 4 ]

21 голосов
/ 26 октября 2011

Да, вы можете переопределить все стили CSS, уже определенные в jQuery mobile, но посмотрите, как это сделать правильно. Тематический обзор в документации jQuery содержит информацию, относящуюся к вашему вопросу. В частности:

Переопределяющие темы

Темы предназначены для прочной отправной точки, но предназначены для настроить, чтобы добавить элементы пользовательского дизайна, которые делают ваш сайт или приложение уникальное. Поскольку все контролируется CSS, легко использовать инструмент веб-инспектора для определения свойств стиля, которые вы хотите изменить. Набор тематических классов (глобальных) и семантических структурных классы (специфичные для виджетов), добавленные к элементам, обеспечивают богатый набор возможные селекторы для целевого стиля переопределяют. Рекомендуем добавление внешней таблицы стилей к голове, расположенной после структуры и ссылки на таблицы стилей темы, которые содержат весь ваш стиль переопределение. Это позволяет легко обновиться до более новых версий библиотека, поскольку переопределения хранятся отдельно от кода библиотеки.

14 голосов
/ 26 октября 2011

Я не знаю официального, элегантного способа сделать это, но я смотрю в неминистическом файле CSS, чтобы найти классы, затем добавляю подобные вещи в файл .css, включенный после jquery mobile:

.ui-header .ui-title {margin-right: 20px; margin-left: 20px;}

.ui-footer .ui-title {margin-right: 20px; margin-left: 20px; пробел: normal;}

Кроме того, firebug и dev. инструменты (хром) ваши друзья - изучите элементы и их стили.

Либби

5 голосов
/ 09 июля 2013

Существует огромное заблуждение об использовании ваших собственных стилей с JQM, которое я обнаружил повсюду, включая SO. Хитрость в использовании вашего собственного CSS с JQM заключается в том, как вы пишете свой собственный CSS. В общем, вы должны сначала указать элемент, который вы хотите переопределить CSS JQM с помощью идентификатора, а затем присоединить класс JQM к этому идентификатору. Например, чтобы удалить стандартную границу CSS ссылки JQM из ссылки на изображение, где # img_button_1 - это идентификатор, данный родительскому якорю изображения, вы должны кодировать свой CSS следующим образом ...

HTML ... 

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
   href="http://www.google.com" target="_blank">
    <img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>

Ваш переопределенный CSS ... 

#img_button_1 .ui-btn-inner { border: 0 }

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

Jquery Mobile - Использование изображения в качестве ссылки - Синяя линия под изображением

Вы можете использовать ту же технику для разрешения всех ваших конфликтов JQM CSS. Теперь вы можете пересмотреть использование JQM для достижения желаемых результатов, зная, насколько просто разрешить эти конфликты, используя специфику CSS в своем собственном CSS. Надеюсь, это поможет!

0 голосов
/ 09 апреля 2014

Обязательно проверяйте примечания к выпуску для каждой новой версии.

Есть полезные сведения об изменениях в иерархии css.Конечно, это обычно становится более стабильным с каждым выпуском, но, вероятно, вам нужно кое-что знать.

1.4 Документ по обновлению CSS: http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css

...