В jQuery Mobile при динамическом добавлении элементов на страницу может возникнуть проблема с корректным отображением добавленных элементов. Любой виджет ('элемент) jQuery Mobile может быть динамически обновлен после добавления.
Динамически добавленный список до обновления
Динамически добавленный список после обновления
Динамически обновлены могут быть следующие категории элементов
1. Компонент/Виджет/Элемент
2. Содержимое страницы
3. Вся страница полностью (Заголовок, Содержимое, Футер)
Стандартная структура страницы jQuery Mobile состоит из трех элементов
1. Заголовок
2. Содержимое
3. Футер
Сюда будем в данной статье добавлять элементы
Если уже существует список и нам необходимо добавить к нему элементы
Если же список создается динамически
2. Button
Если добавляем кнопку динамически
3. Navbar
4. Text inputs, Search inputs & Textareas
Если динамически добавляем поле ввода
5. Sliders & Flip toggle switch
Если динамически добавляем слайдер
6. Checkbox & Radiobox
Если добавляем checkBox или RadioBox
То для нормального отображения после добавления необходимо сделать следующее
Для RadioBox
7. Select menu
Для селект-меню все очень просто
8. Collapsible
Если добавляем раскрывающийся список
То тут необходимо будет для правильно отображения обновить все содержимое
9. Table
10. Panels
Для панелей используем следующее
Динамически добавленный список до обновления
Динамически добавленный список после обновления
Динамически обновлены могут быть следующие категории элементов
1. Компонент/Виджет/Элемент
2. Содержимое страницы
3. Вся страница полностью (Заголовок, Содержимое, Футер)
Стандартная структура страницы jQuery Mobile состоит из трех элементов
1. Заголовок
2. Содержимое
3. Футер
Сюда будем в данной статье добавлять элементы
<body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"></div> <div data-role="content"></div> <div data-theme="a" data-role="footer" data-position="fixed"></div> </div> </body>
Обработка единичного компонента
1. ListviewЕсли уже существует список и нам необходимо добавить к нему элементы
<ul data-role="listview" data-theme="a" id="mylist"> <li><a href="item1.html">Item1</a></li> <li><a href="item2.html">item2</a></li> </ul>Добавляем элемент к списку
$('#mylist').append('<li><a href="item3.html">Item3</a></li>');Обновляем список
$('#mylist').listview('refresh');
Если же список создается динамически
$('<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');То для нормального отображения списка необходимо выполнить тоже самое
$('#mylist').listview('refresh');
2. Button
Если добавляем кнопку динамически
$('[data-role="content"]').append( '<a data-role="button" data-theme="b" data-icon="plus" data-iconpos="right">Save</a>');Необходимо выполнить, чтобы кнопка отображалась правильно
$('[data-role="button"]').button();
3. Navbar
$('[data-role="navbar"]').navbar();
4. Text inputs, Search inputs & Textareas
Если динамически добавляем поле ввода
$('[data-role="content"]').append('<input type="text" value="Some value"/>');Необходимо выполнить, чтобы поле ввода отображалось правильно
$('[type="text"]').textinput();
5. Sliders & Flip toggle switch
Если динамически добавляем слайдер
$('[data-role="content"]').append( '<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" />');То тут нас ждет небольшой сюрприз
// Метод slider() не работает корректно //$('[type="range"]').slider();Заместо него будем обновлять всю страницу
$('#index').trigger('create');
6. Checkbox & Radiobox
Если добавляем checkBox или RadioBox
$('[data-role="content"]').append( '<fieldset data-role="controlgroup"> <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">IOS</label> <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">Android</label> </fieldset>'); $('[data-role="content"]').append( '<fieldset data-role="controlgroup"> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">Submit</label> </fieldset>');
Для RadioBox
$('[type="radio"]').checkboxradio();Для CheckBox
$('[type="checkbox"]').checkboxradio();
7. Select menu
Для селект-меню все очень просто
$('select').selectmenu();
8. Collapsible
Если добавляем раскрывающийся список
$('[data-role="content"]').append( '<div data-role="collapsible" data-theme="b" data-content-theme="c" id="collapsible2"></div>'); $("#collapsible2").append('<h2>Choose a car model...</h2>'); $("#collapsible2").append('<ul data-role="listview" id="test-listview"></ul>'); $("#test-listview").append('<li><a href="index.html">Acura</a></li>'); $("#test-listview").append('<li><a href="index.html">Audi</a></li>'); $("#test-listview").append('<li><a href="index.html">BMW</a></li>');
То тут необходимо будет для правильно отображения обновить все содержимое
$('[data-role="content"]').trigger('create');
9. Table
<table id="students_table" data-role="table" data-mode="Reflow" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-popup-theme="a">
$("#students_table").trigger('create')
10. Panels
Для панелей используем следующее
$('.selector').trigger('pagecreate');
Обработка содержимого страницы
Применяется в том случае, если мы добавляем элемент динамически только в содержимое страницы
$('[data-role="content"]').append('<input type="button" value="Press me"/>');
$('[data-role="content"]').trigger('create');
Обработка всей страницы полностью
В том случае. если мы динамически добавляем элементы во все участки страницы: и в заголовок, и в содержимое, и в футер.
Еще раз структура страницы jQuery Mobile
<body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"></div> <div data-role="content"></div> <div data-theme="a" data-role="footer" data-position="fixed"></div> </div> </body>
Скрипт который добавляет элементы динамически
$('[data-role="content"]').append('<input type="button" value="Press me"/>');
$('[data-role="footer"]').append('<h1>Footer Title</h1>');
$('[data-role="header"]').append('<h1>Header Title</h1>');
Обновляем добавленное динамически содержимое для нормального отбражения
$('#index').trigger('pagecreate');
Комментариев нет:
Отправить комментарий