List Style
List style is commonly used in pages mobile platforms since it makes navigation task very convenient. And in jQuery Mobile, you just need to specify data-role as listview. See codes as following:
<ul data-role=“listview” data-inset=“true” data-theme=“f”>
<li><a href=“#”>Title name</a></li>
<li><a href=“#”>Title name</a></li>
<li><a href=“#”>Title name</a></li>
</ul>
Tool Bar Style
In jQuery Mobile, tool bar belongs to head and footer element category. In order to define tool bar in head or footer, we need to use data-role to make it. Please see the sample codes below, it shows how to define tool bars located in head and footer in one page at the same time.
<div data-role=“header”>
<h1>Page Title</h1>
</div>
<div data-role=“footer”>
<h4>Page Footer</h4>
</div>
Now the time of surfing internet through mobile phone is coming, developers are seeking for ways of developing new programs based on their known techniques and skills quickly, which are able to run on variable platforms, saying Android, iOS, Blackberry and etc. Among several great developing frames for mobile platforms, I believe jQuery Mobile should be the one which is more familiar to us. Now we will introduce how to use this tool to you in the following three tutorials.
Theme in jQuery Mobile
In jQuery Mobile, we suggest you to create a page template including head, content and footer, and then define them through data-role of HTML5. The following codes show us a main page frame.
Written by