Как удалить jQuery Mobile styling?

Я выбрал jQuery Mobile поверх других фреймворков для поддержки анимационных возможностей и поддержки динамических страниц.

Однако у меня проблемы с стилем. Я бы хотел сохранить основной стиль страницы, чтобы выполнять переходы страниц. Но мне также нужно полностью настроить внешний вид заголовков, списков, кнопок, поисковых ящиков... Недостаточно работать с цветами. Мне нужно обрабатывать размеры, позиции, поля, paddings и т.д.

Поэтому я борюсь с дополнительными div и классами, добавленными jQuery Mobile, чтобы переопределить их с помощью CSS. Но это так много времени, и было бы быстрее переписать css с нуля...

Есть ли способ загрузить минимальный файл css jQuery Mobile css?

Или я должен смотреть на другую платформу для мобильных устройств? Мне нужно обрабатывать переходы страниц, ajax-вызовы, совместимость с Кордобой и, конечно, полностью настраиваемый html/css...

Ответ 1

Способы предотвращения повышения разметки:

Это можно сделать несколькими способами, иногда вам нужно объединить их для достижения желаемого результата.

Способ 1:

Он может сделать это, добавив этот атрибут:
```
data-enhance="false"
```
в заголовок, содержимое, контейнер нижнего колонтитула.

Это также необходимо включить в фазу загрузки приложения:
```
$(document).on("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});
```
Инициализировать его до инициализации jquery-mobile.js(посмотрите пример ниже).

Подробнее об этом можно найти здесь:

http://jquerymobile.com/test/docs/pages/page-scripting.html

Пример: http://jsfiddle.net/Gajotres/UZwpj/

Чтобы снова создать страницу, используйте это:
```
$('#index').live('pagebeforeshow', function (event) {
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
});
```
Способ 2:

Второй вариант - сделать это вручную с помощью этой строки:
```
data-role="none"
```
Пример: http://jsfiddle.net/Gajotres/LqDke/
Способ 3:

Некоторые элементы HTML можно предотвратить из улучшения разметки:
```
 $(document).bind('mobileinit',function(){
      $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
      //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
 });    
```
Пример: http://jsfiddle.net/Gajotres/gAGtS/

Снова инициализируйте его до инициализации jquery-mobile.js(смотрите пример ниже).

Подробнее об этом читайте в другом учебнике: jQuery Mobile: разметка Улучшение динамически добавленного контента

Ответ 2

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

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

Беспроигрышный.

edit: Также ответил здесь

Ответ 3

Честно говоря, я довольно разочарован тем, что jQuery mobile не предоставил нам относительно бесплатный набор для начала, чтобы работать просто с тем, что вы сказали: Ajax, переходы, кордо...

Переопределение сгенерированных классов CSS является абсолютным безумием, но я сделал некоторую работу в skunk, и мне удалось уменьшить размер несжатого размера файла css от котирования 233kb до всего 27 кб, сохраняя при этом важные аспекты css, такие как переходы, один -страничный просмотр и т.д. Таким образом, вы начинаете почти так же, как начинаете с пустого файла css.

Возможно, я загружу файл на Github, если у вас есть спрос на него. Я хочу сделать еще несколько тестов, чтобы увидеть, что я не оставил ничего значительного.

Ответ 4

по состоянию на jQuery Mobile 1.4.0, атрибут атрибута data-enhanced был добавлен к большинству компонентов. Установка этого атрибута как истинного приведет к тому, что jQuery mobile игнорирует улучшение стиля для компонента, поэтому вам придется стилизовать элемент самостоятельно.

дополнительную информацию об этом в примечаниях к выпуску jQuery Mobile 1.4.0 http://jquerymobile.com/upgrade-guide/1.4/

Ответ 5

Эксперт

i m nô, но я хотел бы поделиться с вами странным методом. На самом деле, это очень тяжелая задача: вам нужно отредактировать jqm css по строкам, удалив значения свойств, просто оставьте их пробелами; вы должны просто следить за желаемыми разделами файла CSS для настройки или удаления значения

Не забудьте добавить ссылку на свой собственный CSS во главе HTML-страницы

Я надеюсь, что это сработает для вас.