jQuery Mobile Form

Responsive table

Responsive design is generally used to adapt the user a variety of mobile devices.

We only need to use a simple class name, jQuery Mobile will automatically adjust the content of the page according to the size of the screen.

Responsive form to the page content on mobile and desktop devices to end a good adaptation.

Responsive table there are two types: reflow (reflux) and column switching.

Reflux Form

Reflux model form sufficiently large screen size is displayed horizontally, while the screen size is small enough, all the data will become vertically.

Create a table in the <table> element to add data-role = "table" and "ui-responsive" category:

	For the responsive form, you must include the <thead> and <tbody> element. Do not use rowspan or colspan attribute; responsive table is not supported by these two properties.

Column switching

Column switching model will be hidden when the data width is not enough.

Create a table column mode switch is as follows:

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

By default, jQuery Mobile will first hide the column to the right of the table. However, you can specify the order of columns hidden by adding data-priority attribute in the table head (<th>), data-priority value can be from 1 (highest priority) to 6 (lowest priority):

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

	If you do not specify the priority is not listed, then the column will always exist and will not be hidden.

The combination of the above two pieces of code together to create a column switching table, so that users can customize which columns you want to hide the table:

We can use the data-column-btn-text attribute to modify the switch table text:

Table Style

We use "ui-shadow" class to add a shadow to the table:

Use CSS to further set the table style: