Как обслуживать разные CSS-файлы для разных страниц AJAX?

Question

В jQuery Mobile создается один файл, который включает все страницы. Если пользователь выбирает страницу, ajax просто загружает элементы, связанные с этой страницей.

Я понимаю это, но не уверен, что тогда вы будете использовать CSS для этих страниц, если вы хотите, чтобы были некоторые исключения?

У меня есть два стиля: один для страницы меню (тема темного цвета), а затем более светлая тема для любой другой страницы.

Какой лучший способ стилизовать каждый?

Чтобы уточнить, поскольку jQuery Mobile имеет действительно сложные «образцы» тем, было бы нецелесообразно иметь исключения для каждой из страниц, было бы более разумно просто обслуживать разные CSS-файлы для каждой.

Answer 1

Просто добавьте разметку CSS, которую вы хотите, на каждую страницу.Например, вы можете изменить тему для определенной страницы или просто для некоторых определенных правил CSS:

Переопределение темы -

<div data-role="page" data-theme="e"> ... </div>

Каждая страница может иметь свой атрибут data-theme (каждый виджеттакже может иметь свой собственный атрибут data-theme).

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

/*this adds 50px of padding to the `data-role="content"` element in the `#my-page-id` pseudo-page*/
#my-page-id .ui-content {
    padding : 50px;
}

Вы можете настроить таргетинг на любую отдельную страницу, имеющую атрибут ID, подобный этому (вы также можете выбратьдругие атрибуты с использованием квадратных скобок: [data-myAttribute="myValue"] { ... }).

Я рекомендую просто добавить некоторые правила CSS, которые переопределяют стили для страницы меню.

Answer 2

В последнее время я много работал с темами CSS. Вот подход, который я использую. Базовые темы a, b, c, d, я по большей части оставил в покое - кроме C & D, я удалил все остальное. (вы можете взять их и переопределить их своим собственным видом темной темы) или просто создать тему F и использовать ее.

Я использую темы до S в настоящее время в нашем приложении. Он работает довольно хорошо и прост в управлении. Это очень похоже на то, что вы упоминаете выше. Я призываю темы, которые мне нужны, когда мне это нужно, и, кажется, это работает очень хорошо.

Когда мне нужно будет использовать новую базовую, я скопирую одну из моих существующих A, B, C, а также изменю и дополню css по мере необходимости. Это устраняет проблему перекрытия, с которой вы можете столкнуться на страницах, которые используют похожие названия тем. Я бы выбрал такой подход, чтобы не перекрывать друг друга, и мне было трудно отлаживать темы.

Вся информация, которую я передаю, содержит около 3 месяцев опыта дневной и ночной работы с темами JQM и CSS.

На что обратить внимание:

• Используйте Firebug на Firefox или Chrome - это избавит вас от многих часов головной боли.
• Перекрывается в использовании классов - ИЗБЕГАЙТЕ их - существует столько уровней и глубин рендеринга JQm, что вы можете потратить дни на ошибку.
• Попытка переопределить базовые темы требует! Важных в некоторых ваших атрибутах
• Тщательно подумайте, действительно ли вам нужна новая тема или вы можете просто создать небольшую группу классов и использовать свою тему в качестве основы для макета, структуры (например, вы можете просто захотеть изменить 1 цвет)
• На вашей недавно сгенерированной динамической странице я бы загружал только нужную вам тему в то время, когда вам это нужно, или предварительно извлекал ее после загрузки другой страницы. Это поможет сохранить время загрузки до минимума
• Обязательно сожмите свои темы и пользовательские темы
• Я разделяюсь на следующие (struct.css, themes.css, custom.css (это содержит мои пользовательские темы, а также мои переопределения, (Additional.css - в идеале это должно быть загружено только тогда, когда это необходимо)
• Определите, нужна ли вам совершенно новая тема, или просто вставьте встроенные стили в документ страницы. Любой дополнительный код, который вы добавляете из темы, - это просто дополнительный код и дополнительное время загрузки, поэтому имейте в виду, что полное добавление темы может увеличить размер CSS на несколько строк кода.

Answer 3

Вы можете использовать это решение: https://stackoverflow.com/a/7349521/737023 - это не совсем то, что вы хотите, но допустим, что ваша тема 1 использует образец a, b, c, d, e - создайте свою вторую тему и используйтеобразцы f, g, h, i, j (может потребоваться объединить два CSS и сделать некоторые замены?) - затем использовать это решение, чтобы поменять местами все a к f, b к g и т. д. Конечно, это поддержит толькоЯ думаю, 5 наборов из 5 образцов?

ИЛИ

Просто не используйте загрузку AJAX, data-ajax = "false", если есть отдельные разделы вашего сайта, которыенужна новая тема, убедитесь, что все ссылки на нее не используют AJAX, и просто включите новый CSS в заголовок

ИЛИ

Если вы действительно хотите получить фантазиюи вам нужно было больше тем, из того, что я знаю, нет хорошего решения для этого, я думаю, для начала, если вы включите свой CSS в свои теги div [data-role = "page"], которые будут задействованы при загрузке AJAX иинициализирован для работы.

Если вы говорите о разных образцах themeroller для значений a, b, c ... и т. Д. На каждой странице, я не думаю, что это возможно, если вы не станете по-настоящему уродливым.jQM загружает <head> только один раз, последующие страницы загружаются через AJAX.

Даже если бы вы включили CSS в эти страницы, у вас не было бы способа избавиться от исходных классов CSS.Тогда вам нужно извлечь нужные стили, добавить их в уникальный класс для каждой страницы и использовать флаг! Important для перезаписи стилей jQM.

jQM также использует data-theme = "x" для выполнения DOM-манипуляций, оборачивания объектов в span и т. Д., Вам нужно проделать большую работу, проверяя все элементы, чтобы увидеть, какие классы / стили вам нужныперезаписать.Но я подозреваю, что это возможно - вам, возможно, придется обрабатывать некоторые вещи через JS, e.g. find a <ul data-role="listview" class="myCustomClass"> and add your custom classes to dynamically generated DOM