Переопределение jQuery мобильных CSS-структур: эмпирическое правило

Question

Я довольно новичок в jQuery Mobile, и, как я понял, он включает в себя две разные части css: один для тем, а другой для структуры.

Если вам нужно стилизовать определенный компонент, вы можете воспользоваться Theme Roller (или просто создать свой собственный), а затем указать тему, например, data-theme="myTheme". Напротив, структура позволяет управлять расположением элементов, макетами и т. Д. Он разделяется между всеми элементами.

Основываясь на этом, я хотел бы знать, можно ли следовать некоторым правилам для правильного переопределения структуры элементов при необходимости. В частности, мой подход заключается в том, чтобы найти структуру css, связанную с определенным элементом, скопировать ее и вставить в мою собственную структуру css. Очевидно, таким образом я мог бы воздействовать на структуру других элементов, которые не нуждаются в этой настраиваемой структуре.

Итак, что может быть правильным способом достижения этого?

EDIT

на основе @ Gajotres отвечают.

Откуда: .custom-btn? Я думаю, что необходимо запретить использование других кнопок с таким цветом. Я ошибаюсь? Но в вашем фрагменте кнопка не имеет этого класса.

Если я открою тему css-файла, предоставленного jQuery Mobile, я вижу структуру. Какая разница с тем, что содержится в файле css структуры?

Answer 1

Введение

JQuery Mobile имеет 3 CSS файлы. Я напишу об этой теме, используя jQuery Mobile 1.3 в качестве ориентира.

CSS файлы различия

Первый CSS файл, а также главный из них: jquery.mobile-1.3.2.min.css

Он имеет структуру и тематические стили JQuery Mobile

Второй CSS файлы - это только файл структуры jQuery Mobile и он содержит CSS, необходимые для построения структур страниц и виджета: jquery.mobile.structure-1.3.2.css

Третий содержит только стили темы и может быть использован для создания новых образцов: jquery.mobile.theme-1.3.2 .css

Тема против Swatch

Это следующая вещь, которую вы должны понять. jQuery Mobile имеет только 1 тему, но несколько образцов.

Swatch можно изменить с помощью data-theme="" атрибут. Не спрашивайте, почему он не называется data-swatch="".

Если вы хотите узнать больше об этой разнице, посмотрите на мой другой answer.

CSS Переопределение

Первое, что вам нужно, это инструмент, который покажет вам JQuery Mobile HTML и CSS структуру.

Для браузеров Firefox используйте плагин Firebug для обработки HTML/CSS в режиме реального времени. Это даст вам возможность увидеть расширенную разметку страницы, изменить CSS на лету (гораздо проще, если вы хотите увидеть, что произойдет, когда будут применены изменения, не делая этого вручную) и скопируйте внутреннюю структуру HTML.

Хром также имеет плагин firebug, но вы должны избегать его. Это гораздо более легкая версия firebug Firefox, и в то же время у Chrome есть отличный встроенный инструмент под названием «Инструменты разработчика». Его можно легко вызвать с помощью комбинации CTRL + SHIFT + I. Пользователи Macintosh могут открывать его с помощью этой комбинации: Command + Option + i.

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

с учетом этого вам нужно знать другое. Что вы можете увидеть, как основной JQuery Mobile страницу архитектуры здесь:

<div data-role="page"> 
    <div data-role="header"> 
     <!-- Inner content --> 
    </div> 
    <div data-role="content"> 
     <!-- Inner content --> 
    </div> 
    <div data-role="footer"> 
     <!-- Inner content --> 
    </div> 
</div> 

не является окончательным результатом страницы. Сразу после события pagecreate (и до события pageinit) jQuery Mobile запускает процесс повышения разметки HTML. Таким образом, конечный результат будет выглядеть несколько иначе.

Давайте посмотрим на кнопки, например JQuery Mobile до улучшения выглядит следующим образом:

<a href="#" data-role="button">Link button</a> 

После усиления это выглядит следующим образом:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text">Classic HTML button</span> 
    </span> 
    <input type="button" value="Classic HTML button" class="ui-btn-hidden" data-disabled="false"/> 
</div> 

Вот почему нам нужны дополнительные инструменты, чтобы мы могли см. окончательную структуру HTML.

С этим может продолжаться дальше.

Если вы хотите переопределить определения jQuery Mobile CSS, вам необходимо научиться использовать! Important. Хотя это обычно большой НЕТ НЕТ, мы не можем сделать это без него.

Допустим, мы хотим изменить цвет текста кнопки (из предыдущего примера кнопки) мы хотели бы сделать это следующим образом:

.custom-btn .ui-btn-inner .ui-btn-text { 
    color: #013301 !important; 
} 

Там еще одна вещь, вы всегда можете изменить оригинальную мобильную структуру JQuery Mobile, но я бы посоветуйте вам против этого.

Если вы хотите, чтобы найти еще больше об этой теме, посмотрите на мой блог article где я обсуждаю эту тему (с рабочими примерами jsFiddle).

Последнее, но не менее

Этот ответ можно найти here + рабочие примеры, чтобы быть более прозрачной это мой личный блог.

Answer 2

Если вы знаете, как работает приоритет css-селекторов, вы можете сделать это легко. Например:

.class a { 

} 

переопределить это свойство можно использовать

body .class a {} или div.class a {}.

Точно так же вы можете переопределить существующие цепочки, созданные с помощью jQuery Mobile.