A brief analysis of the writing of inline buttons and group buttons in jQuery mobile development_jquery

Inline button data-inline=true
By default, all buttons within the body content are called block-level elements, so they fill the width of the screen.

However, if you want the button to look compact and the width only fits the text and icon inside, then add the data-inline="true" attribute to the button.

If you have multiple buttons that should sit side by side on the same line, set the data-inline="true" attribute for each button. This will style the button to be the width of its content and float the button so that they sit in the same line.

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

Add data-mini="true" to create a more compact version of the inline button:

<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</a>

Group button data-role=controlgroup
Sometimes, you want to put a group of buttons into a separate container so that they look like a separate navigation widget. You can wrap a group of buttons in a container, and then add the data-role="controlgroup" attribute to the container. Jquery Mobile will create a vertical button group, delete the margin and shadow between the buttons, and then only add the first The first and last buttons have rounded corners, making them appear to be a group of buttons.

<div data-role="controlgroup">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Arrange horizontally data-type="horizontal"

By default, the group buttons are displayed as a vertical list. If you add the data-type="horizontal" attribute to the container, it can be converted into a list of horizontal buttons. The buttons will be arranged horizontally one by one and set Only large enough to fit the width of the content. ((So be careful not to have too many buttons or too many words on the buttons in horizontal layout)

<div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Mini version data-mini="true"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Icon only data-iconpos="notext"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>