Written by 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>
It is also very simple to add styles for list, and you just need to specify value for data-theme property as the target style name. For example, to add a style f, you can customize as follows:
.ui-listview .ui-btn-up-f a,
.ui-listview .ui-btn-down-f a,
.ui-listview .ui-btn-hover-f a {
color: #fff;
}
Theme Style for List and Button
In jQuery Mobile, method of adding list and button is the same with add them into common pages, besides some relevant input tag and button tag elements are needed. Please see the following codes:
<div data-role=“collapsible” data-collapsed=“true” data-theme=“f”>
<h3>>Login</h3>
<form action=“” method=“post”>
<label for=“username”>Username</label>
<input type=“text” name=“username” id=“username” />
<label for=“username”>Password</label>
<input type=“password” name=“password” id=“password” />
<fieldset class=“ui-grid-a”>
<div class=“ui-block-a”>
<button type=“reset” data-inline=“true”>Reset</button>
</div>
<div class=“ui-block-b”>
<button type=“submit” data-inline=“true” data-theme=“f”>Submit</button>
</div>
</fieldset>
</form>
</div>
And we can define list style as:
.ui-body-f input[type="text"],
.ui-body-f input[type="password"] {
background-color: #ccc;
}
And we have mentioned in our previous tutorials that both text frame and password will be defined as f style, please be careful about this point.
As for tags, please note there two different styles have been specified to two buttons separately. For Reset button, it has been defined as default style of jQuery Mobile, and for Submit button, the relevant style is specified by data-theme=f. Please see the following details as follows:
.ui-btn-up-f {
background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#396b9e’,
endColorstr=’#a64e89c5′,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* W3C */
border: 1px solid #225377;
text-shadow: #225377 0px -1px 1px;
color: #fff;
}
.ui-btn-down-f,
.ui-btn-hover-f {
background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%);
/* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#72b0d4′,
endColorstr=’#a64b88b6′,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%);
/* W3C */
border: 1px solid #00516E;
text-shadow: #014D68 0px -1px 1px;
color: #fff;
}
All the sample codes mentioned in the three tutorials can be downloaded here.
Conclusion
From these three tutorials, we have mentioned how to customize different style themes in jQuery Mobile. And the key point is to use data-theme property to specify and name new CSS style, so you just have to name and compile them under jQuery Mobile standard to make it. For more detailed info about customized styles setting, please consult instructions of official manual from jQuery Mobile.
Please click to go to Tutorial One and Tutorial Two!
