Мобильная форма Jquery

Отзывчивый стол

Адаптивный дизайн, как правило, используется для адаптации пользователю различных мобильных устройств.

Нам нужно только использовать простое имя класса, JQuery Mobile будет автоматически регулировать содержание страницы в соответствии с размером экрана.

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

Отзывчивый таблицы есть два типа: оплавления (рефлюкс) и переключение колонок.

рефлюкс Форма

Рефлюкс форма модели достаточно большой размер экрана отображается горизонтально, в то время как размер экрана достаточно мал, все данные станут вертикально.

Создание таблицы в элементе <table> для добавления данных-роли = "таблица" и категории "Пользовательский интерфейс реагирующих":

примеров

<Таблица данных роли = "таблица " класс = "Пользовательский интерфейс реагирующих">

Попробуйте »

	Для гибкой форме, вы должны включить <THEAD> и <TBODY> элемент. Не используйте RowSpan или Colspan атрибут, отзывчивым таблица не поддерживается этими двумя свойствами.

Колонка переключения

модель переключения колонка будет скрыта, когда ширина данных недостаточно.

Создать переключатель режима столбец таблицы выглядит следующим образом:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

По умолчанию, JQuery Mobile сначала скрыть колонку справа от таблицы. Тем не менее, вы можете указать порядок столбцов путем добавления скрытых атрибутов данных приоритета в головке таблицы (<ю>), значение данных приоритета может быть от 1 (наивысший приоритет) до 6 (самый низкий приоритет):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>

	Если вы не указать приоритет нет в списке, то столбец будет всегда существовать и не будут скрыты.

Сочетание этих двух фрагментов кода вместе, чтобы создать таблицу коммутации колонки, так что пользователи могут настроить, какие столбцы вы хотите, чтобы скрыть таблицу:

примеров

<Таблица данных роли = "таблица " данных в режиме = "columntoggle" класс = "Пользовательский интерфейс реагирующих" ID = "MyTable">
<THEAD>
<Tr>
<Й данных приоритета = "6 "> CustomerID </ й>
<Th> CustomerName </ й>
<Й данных приоритета = "1 "> ContactName </ й>
<Й данных приоритета = "2 "> Адрес </ й>
<Й данных приоритета = "3 "> Город </ й>
<Й данных приоритета = "4 "> PostalCode </ й>
<Й данных приоритета = "5 "> Страна </ й>
</ TR>
</ THEAD>
<TBODY>
<Tr>
<Td> 1 </ TD>
<Td> Alfreds Futterkiste </ TD>
<Td> Мария Андерс </ TD>
<Td> Obere ул. 57 </ TD>
<Td> Берлин </ TD>
<Td> 12209 </ TD>
<Td> Германия </ TD>
</ TR>
</ TBODY>
</ Table>

Попробуйте »

Мы можем использовать атрибут данных столбца БТН-текста, чтобы изменить текст переключатель таблицы:

примеров

<Таблица данных роли = "таблица " данных в режиме = "columntoggle" класс = "Пользовательский интерфейс реагирующих" данных столбца БТН-текст = " Я указываю показать или скрыть столбцы!" ID = "MyTable">

Попробуйте »