I recently borrowed the book "Learning Cross-platform Web Design Second Edition" from the library of my alma mater. It is very well written. I read through it and I am familiar with it and I don’t need to borrow it again. However, some of the jQuery Mobile syntax tables have a quick reference value. Therefore, the functions tested in the notes before synthesis are organized as follows, for reference:
- Data-role attribute value list:
jQuery Mobile uses HTML5's data-* attribute function to customize a set of data-role custom attributes. All components and layout of jQuery Mobile are controlled and typeset by data-role:
For pages other than the first page, the header can be added with data-add-back-btn="true" attribute to add a back button, but the default is "Back", which can be modified with data-back-btn-text="return".
The div block set as controlgroup can use data-type=“horizontal” to control the horizontal arrangement of the components in the container.
The hyper-link button can be set with data-inline=“true” to set the width without occupying the screen width (can accommodate text/icons), so that the buttons are not arranged in separate rows (but more than 5 will still jump).
The list element can be set with data-inset=“true” to set the list indentation without occupying the full width of the screen. The list item (li element) can be added with data-role=“list-divider” attribute as a classification item, add data-filter = "True" you can add a search box above it.
- Button icons (data-icon and data-iconpost):
3. Theme scenery (data-theme and data-overlay-theme):
![data-[overlay-]theme attribute value Description a Default theme ab Alternative theme bc~z Custom theme c~z](https://img-blog.csdnimg.cn/20210308114232943.png)
- Data-transition:
- Hyperlink button action attribute data-rel:
This attribute is used in the action of the Hyperlink button:
jQuery Mobile uses Ajax by default when using the Hyperlink button to switch pages. When the page is moved out, it will be put into the temporary storage area to improve performance. However, for those who need to dynamically update from the database, it will cause the data to be out of time. You can use data-ajax. = "False" attribute to turn off Ajax.