Information Technology Reference
In-Depth Information
In the header, we'll specify the test we want to see in the black bar at the top of the
page. I could include more than just one line of text if I like, and the black bar will
continue to increase. However, this may be a bit distracting for the user.
Listing 7-4 Cont.
The content of the main page
</div>
<div data-role="content">
<ul data-role="list-view" class="ui-listview">
<li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">Pellentesque habitant morbi tristique senectud </div>
</div>
</li>
<li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">Morbi ultrices dignissim erat id blandit </div>
</div>
</li>
<li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">Etiam massa quam, tempus quis </div>
</div>
</li>
<li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">Nam laoreet congue aliquet </div>
</div>
</li>
<li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">Morbi et ligula vel ligula lobortis pharetra ut eu massa
</div>
</div>
</li>
<li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">Nam commodo erat orci. </div>
</div>
</li>
</ul>
</div>
If you're coding along at home, you'll notice that each of those items appears in a
button-like list. You might be wondering if we could make these lists a little more
interesting. Indeed we could—jQuery Mobile supports several types of lists
and examples). We're using a read-only list here, as we aren't linking the list items to any
particular page or action. However, other link options are available, such as:
A nested list (see Figure 7-2), where one list item, when tapped, slides
away to reveal several more list items.
