JQuery Mobile: разметка. Улучшение динамически добавленного контента.

Ответ 1

Отказ от ответственности:

Эта статья также может быть найдена как часть моего блога ЗДЕСЬ.

Введение:

Существует несколько способов повышения динамически созданной разметки контента. Недостаточно динамически добавлять новый контент на страницу jQuery Mobile, новый контент должен быть расширен с помощью классического стиля jQuery Mobile. Поскольку это довольно сложная задача, необходимо иметь некоторые приоритеты, если возможно jQuery Mobile нужно делать как можно меньше, насколько это возможно. Не улучшайте всю страницу, если нужно создать только один компонент.

Что это значит? Когда плагин страницы отправляет событие pageInit, которое большинство виджетов используют для автоматической инициализации. он автоматически улучшит все экземпляры виджетов, которые он находит на странице.

Однако, если вы создаете новую клиентскую страницу разметки или загружаете контент через Ajax и вводите ее на страницу, вы можете инициировать событие create для обработки автоматической инициализации для всех плагинов, содержащихся в новой разметке. Это может быть активировано для любого элемента (даже самого раздела страницы), что позволяет вам вручную инициализировать каждый плагин (кнопка списка, выбрать и т.д.).

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

Улучшение отдельного компонента/виджета
Улучшение содержимого страницы
Улучшение содержимого полной страницы (заголовка, содержимого, нижнего колонтитула)

Улучшение отдельного компонента/виджета:

Важно:. Следующие методы улучшения должны использоваться только на текущей/активной странице. Для динамически вставленных страниц эти страницы и их содержимое будут расширены после вставки в DOM. Вызов любого метода на динамически создаваемых страницах/кроме активной страницы приведет к ошибке.

Каждый виджет jQuery Mobile может динамически расширяться:

Listview:

Улучшение разметки:
```
$('#mylist').listview('refresh');
```
Удаление элементов списка:
```
$('#mylist li').eq(0).addClass('ui-screen-hidden'); 
```
Пример улучшения: http://jsfiddle.net/Gajotres/LrAyE/

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

Одна из списков верхнего уровня - это функция фильтрации. К сожалению, по какой-то причине jQuery Mobile не сможет динамически добавлять параметр фильтра в существующий список. К счастью, есть обходной путь. Если возможно, удалите текущее listview и добавьте еще один вариант с включенной опцией фильтра.

Вот рабочий пример: fooobar.com/questions/82887/...
```
$(document).on('pagebeforeshow', '#index', function(){       
    $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
    $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
    $('#test-listview').listview().listview('refresh');
});
```
Кнопка

Улучшение разметки:
```
$('[type="button"]').button();
```
Пример улучшения: http://jsfiddle.net/Gajotres/m4rjZ/

Еще одна вещь, вам не нужно использовать элемент ввода для создания кнопки, ее можно даже сделать с помощью базового div, вот пример: http://jsfiddle.net/Gajotres/L9xcN/
Navbar

Улучшение разметки:
```
$('[data-role="navbar"]').navbar();
```
Пример улучшения: http://jsfiddle.net/Gajotres/w4m2B/

Здесь показано, как добавить динамическую вкладку navbar: http://jsfiddle.net/Gajotres/V6nHp/

И еще один элемент pagebeforecreate: http://jsfiddle.net/Gajotres/SJG8W/
Текстовые входы, входы поиска и текстовые области

Улучшение разметки:
```
$('[type="text"]').textinput();   
```
Пример улучшения: http://jsfiddle.net/Gajotres/9UQ9k/
Переключатели слайдеров и переключателей

Улучшение разметки:
```
$('[type="range"]').slider();  
```
Пример улучшения: http://jsfiddle.net/Gajotres/caCsf/

Пример улучшения во время события для создания страницы: http://jsfiddle.net/Gajotres/NwMLP/

Слайдеры немного искажены для динамического создания, подробнее об этом читайте здесь: fooobar.com/questions/82888/...
Флажок и Radiobox

Улучшение разметки:
```
$('[type="radio"]').checkboxradio();
```
или если вы хотите выбрать/отменить выбор другого элемента Radiobox/Checkbox:
```
$("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");
```
или
```
$("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh");
```
Пример улучшения: http://jsfiddle.net/Gajotres/VAG6F/
Выбрать меню

Улучшение разметки:
```
$('select').selectmenu();  
```
Пример улучшения: http://jsfiddle.net/Gajotres/dEXac/
Складной

К сожалению, разборный элемент не может быть усилен с помощью какого-либо определенного метода, поэтому вместо него следует использовать trigger ('create').

Пример улучшения: http://jsfiddle.net/Gajotres/ck6uK/
Таблица

Улучшение разметки:
```
$(".selector").table("refresh");
```
Хотя это стандартный способ повышения таблиц, на данный момент я не могу заставить его работать. Поэтому вместо этого используйте trigger ('create').

Пример улучшения: http://jsfiddle.net/Gajotres/Zqy4n/
Panels - новый

Улучшение разметки панели:
```
$('.selector').trigger('pagecreate');
```
Повышение яркости контента, динамически добавленного в Panel:
```
$('.selector').trigger('pagecreate');
```
Пример: http://jsfiddle.net/Palestinian/PRC8W/

Улучшение содержимого страницы:

В случае, если мы генерируем/восстанавливаем весь контент страницы, лучше всего сделать все сразу, и это можно сделать с помощью этого:

$('#index').trigger('create');

Пример улучшения: http://jsfiddle.net/Gajotres/426NU/

Улучшение содержимого полной страницы (заголовок, содержимое, нижний колонтитул):

К сожалению, для нас триггер ('create') не может улучшить разметку заголовка и нижнего колонтитула. В этом случае нам нужны большие пушки:

$('#index').trigger('pagecreate');

Пример улучшения: http://jsfiddle.net/Gajotres/DGZcr/

Это почти мистический метод, потому что я не могу найти его в официальной документации jQuery Mobile. Тем не менее его легко найти в jQuery Mobile отслеживании ошибок с предупреждением не использовать его, если это действительно действительно необходимо.

Заметьте, .trigger('pagecreate'); можно использовать только один раз на обновление страницы, я обнаружил, что это неверно:

http://jsfiddle.net/Gajotres/5rzxJ/

Плагины расширения сторонних разработчиков

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

Изменение текста кнопки

К сожалению, не удалось найти разработчика этого плагина. Исходный источник SO: Изменить текст текста jquery mobile

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

Рабочий пример: http://jsfiddle.net/Gajotres/mwB22/

Получить правильную максимальную высоту контента

В случае, если заголовок и нижний колонтитул страницы имеет постоянную высоту, div может быть легко настроен на полное доступное пространство с помощью небольшого трюка css:

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

И вот рабочий пример с демонстрацией Google maps api3: http://jsfiddle.net/Gajotres/7kGdE/

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

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

И вот пример live jsFiddle: http://jsfiddle.net/Gajotres/nVs9J/

Есть одна вещь, которую нужно запомнить. Эта функция позволит вам получить максимальную доступную высоту контента и в то же время ее можно использовать для растягивания того же содержимого. К сожалению, он не может использоваться для растягивания img до полной высоты содержимого, img-тэг имеет накладные расходы 3px.

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

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

Способ 1:

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

Это также необходимо включить в фазу загрузки приложения:
```
$(document).one("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.page.prototype.options.keepNative = "select, input";
 });    
```
Пример: http://jsfiddle.net/Gajotres/gAGtS/

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

Проблемы с улучшением разметки:

Иногда при создании компонента с нуля (например, listview) эта ошибка возникает:

не может вызывать методы в представлении списка до инициализации

Это может быть предотвращено с инициализацией компонента до улучшения разметки, вот как вы можете это исправить:

$('#mylist').listview().listview('refresh');

Проблемы с переопределением разметки:

Если по какой-то причине необходимо изменить jQuery Mobile CSS по умолчанию, это должно быть выполнено с помощью !important. Без него стили css по умолчанию не могут быть изменены.

Пример:

#navbar li {
    background: red !important;
}

jsFiddle пример: http://jsfiddle.net/Gajotres/vTBGa/

Изменения:

01.02.2013 - Добавлена динамическая демонстрация навбро.
01.03.2013 - Добавлен комментарий о том, как динамически добавлять фильтрацию в список.
07.03.2013 - Добавлена новая глава: Получить правильную максимальную высоту контента
17.03.2013 - Добавлено несколько слов в главу: Получить правильную максимальную высоту контента
29.03.2013 - Добавлен новый контент о динамически созданных слайдерах и исправлен пример ошибки
03.04.2013 - Добавлен новый контент о динамически создаваемых складных элементах
04.04.2013 - Добавлена глава сторонних плагинов
20.05.2013 - Добавлены динамически добавленные панели и содержимое.
21.05.2013 - Добавлен другой способ установки полной высоты содержимого
20.06.2013 - Добавлена новая глава: Проблемы с отменой разметки
29.06.2013 - Добавлена важная записка WHEN для использования методов улучшения.