PhoneGap Build by Harwani Bintu
Author:Harwani, Bintu [Harwani, Bintu]
Language: eng
Format: epub
Published: 2013-10-22T12:30:49+00:00
134 ◾ PhoneGap Build
Upon running the application, a collapsible list with the heading Click to expand the
list will be displayed (see Figure 6.8a). Upon clicking the plus sign in the heading, the list will be expanded, revealing all the hidden list items, as shown in Figure 6.8b.
Creating Numbered Lists
A numbered list is created by using an ordered list <ol> element. That is, on replacing the <ul> element by <ol> in Listing 6.7, we will get a numbered list as shown in Figure 6.8c.
In the output, we can see that the framework adds the numerical index to the left of each list item.
Displaying Thumbnails and Icons in the List
We can display thumbnails to the left of the list items in a list by nesting an image, that is, <img> element, inside the list item, as shown below:
<ul id = "phoneList" data-role = "listview" >
<li data-role = "divider">Choose a phone number</li>
<li><a id = "1111111111" href = "#page2"> <img src = "images/cell.
png"/> 1111111111 </a></li>
</ul>
The code above will display a thumbnail image to the left of the list item 11111111111 in the list. The framework will scale the image to 80 square pixels. Similarly, we can associate images with other list items too.
Let us create an application that displays thumbnails and icons in the list. So, launch Eclipse and open our Android project called JQMIntroApp. Add an HTML file called listdemo2.
html to the assets/www folder. In this application, we will be displaying three different images in the list items, so add a folder called images to the /assets/www folder of our (a)
(b)
(c)
Figure 6.8 (a) A collapsible list with the heading Click to expand the list. (b) A collapsible list in expanded form. (c) A numbered list showing the phone numbers.
jQuery Mobile ◾ 135
application. Paste three image files called cell1.png, cell2.png, and cell3.png to the
/assets/www/images folder. To display thumbnails in the list, write the code as shown in Listing 6.8 in the listdemo2.html file.
Listing 6.8 Code Written in the listdemo2.html File
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap Application</title>
<script type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js">
</script>
<link href = "jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" rel =
"stylesheet" type = "text/css"/>
<script src = "jquery-1.8.3.min.js" type = "text/javascript"></script>
<script src = "jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type = "text/
javascript"></script>
<script type = "text/javascript">
function onBodyLoad(){
document.addEventListener("deviceready", PhonegapLoaded, false);
}
function PhonegapLoaded(){
$('#phoneList').children().each(function(){
var anchor = $(this).find('a');
if(anchor){
anchor.click(function(){
document.getElementById("selecteditem").innerHTML = "You have selected
"+anchor.attr('id');
});
}
});
}
</script>
</head>
<body onload = "onBodyLoad()">
<div data-role = "page" id = "home">
<div data-role = "header" data-theme = "b">
<h1>List Application</h1>
</div>
<div data-role = "content">
<ul id = "phoneList" data-role = "listview" data-inset = "true" data-theme = "e" >
<li data-role = "divider">Choose a phone number</li>
<li><a id = "1111111111" href = "#page2"> <img src = "images/cell1.
png"/> 1111111111 <span class = "ui-li-count"> H </span></a></li>
<li><a id = "2222222222" href = "#page2"> <img src = "images/cell2.
png"/> 2222222222 <span class = "ui-li-count"> H </span></a></li>
<li><a id = "3333333333" href = "#page2"> <img src = "images/cell3.
png"/> 3333333333 <span class = "ui-li-count"> O </span></a></li>
<li><a id = "4444444444" href = "#page2"> <img src = "images/cell1.
png"/> 4444444444 <span class = "ui-li-count"> O </span></a></li>
<li><a id = "5555555555" href = "#page2"> <img src = "images/cell2.
png"/> 5555555555 <span class = "ui-li-count"> O </span></a></li>
<li><a id = "6666666666" href = "#page2"> <img src = "images/cell3.
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Deep Learning with Python by François Chollet(12609)
Hello! Python by Anthony Briggs(9931)
OCA Java SE 8 Programmer I Certification Guide by Mala Gupta(9806)
The Mikado Method by Ola Ellnestam Daniel Brolund(9797)
Dependency Injection in .NET by Mark Seemann(9354)
Algorithms of the Intelligent Web by Haralambos Marmanis;Dmitry Babenko(8317)
Test-Driven iOS Development with Swift 4 by Dominik Hauser(7776)
Grails in Action by Glen Smith Peter Ledbrook(7710)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(7573)
Becoming a Dynamics 365 Finance and Supply Chain Solution Architect by Brent Dawson(7241)
Microservices with Go by Alexander Shuiskov(7004)
Practical Design Patterns for Java Developers by Miroslav Wengner(6914)
Test Automation Engineering Handbook by Manikandan Sambamurthy(6868)
Secrets of the JavaScript Ninja by John Resig Bear Bibeault(6431)
Angular Projects - Third Edition by Aristeidis Bampakos(6282)
The Art of Crafting User Stories by The Art of Crafting User Stories(5801)
NetSuite for Consultants - Second Edition by Peter Ries(5729)
Demystifying Cryptography with OpenSSL 3.0 by Alexei Khlebnikov(5549)
Kotlin in Action by Dmitry Jemerov(5078)
