jQuery Mobile Web Development Essentials 2nd

Edition Build mobile optimized websites using

the simple practical and powerful jQuery based
framework Raymond Camden pdf download
https://ebookgate.com/product/jquery-mobile-web-development-
essentials-2nd-edition-build-mobile-optimized-websites-using-the-
simple-practical-and-powerful-jquery-based-framework-raymond-
camden/

Get Instant Ebook Downloads – Browse at https://ebookgate.com

Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...

jQuery Mobile 1st Edition Jon Reid

https://ebookgate.com/product/jquery-mobile-1st-edition-jon-reid/

ebookgate.com

PHP jQuery Cookbook over 60 simple but highly effective

recipes to create interactive web applications using PHP
with jQuery 1st Edition Vijay Joshi
https://ebookgate.com/product/php-jquery-cookbook-over-60-simple-but-
highly-effective-recipes-to-create-interactive-web-applications-using-
php-with-jquery-1st-edition-vijay-joshi/
ebookgate.com

Working with jqTouch to Build Websites on Top of jQuery 1.

Aufl Edition David

https://ebookgate.com/product/working-with-jqtouch-to-build-websites-
on-top-of-jquery-1-aufl-edition-david/

ebookgate.com

Build Mobile Websites and Apps for Smart Devices 1st

Edition Earle Castledine

https://ebookgate.com/product/build-mobile-websites-and-apps-for-
smart-devices-1st-edition-earle-castledine/

ebookgate.com
jQuery 1 4 animation techniques beginner s guide quickly
master all of jquery s animation methods and build a
toolkit of ready to use animations using jQuery 1 4 1st
Edition Dan Wellman
https://ebookgate.com/product/jquery-1-4-animation-techniques-
beginner-s-guide-quickly-master-all-of-jquery-s-animation-methods-and-
build-a-toolkit-of-ready-to-use-animations-using-jquery-1-4-1st-
edition-dan-wellman/
ebookgate.com

Mobile Design and Development Practical Concepts and

Techniques for Creating Mobile Sites and Web Apps Animal
Guide 1st Edition Brian Fling
https://ebookgate.com/product/mobile-design-and-development-practical-
concepts-and-techniques-for-creating-mobile-sites-and-web-apps-animal-
guide-1st-edition-brian-fling/
ebookgate.com

jQuery Pocket Primer Oswald Campesato

https://ebookgate.com/product/jquery-pocket-primer-oswald-campesato/

ebookgate.com

Head First jQuery Ryan Benedetti

https://ebookgate.com/product/head-first-jquery-ryan-benedetti/

ebookgate.com

Service Oriented Architecture with Java Using SOA and web

services to build powerful Java applications First Edition
Christudas
https://ebookgate.com/product/service-oriented-architecture-with-java-
using-soa-and-web-services-to-build-powerful-java-applications-first-
edition-christudas/
ebookgate.com
www.it-ebooks.info
jQuery Mobile Web
Development Essentials

Second Edition

Build mobile-optimized websites using the simple,

practical, and powerful jQuery-based framework

Raymond Camden
Andy Matthews

BIRMINGHAM - MUMBAI

www.it-ebooks.info
jQuery Mobile Web Development Essentials
Second Edition

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the authors, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.

First published: May 2012

Second Edition: September 2013

Production Reference: 1190913

Published by Packt Publishing Ltd.

Livery Place
35 Livery Street
Birmingham B3 2PB, UK.

ISBN 978-1-78216-789-1

www.packtpub.com

Cover Image by Suresh Mogre ([email protected])

www.it-ebooks.info
 Credits

Authors Project Coordinator

Raymond Camden Apeksha Chitnis
Andy Matthews
Proofreader
Reviewers Faye Coulman
Matt Gifford
Eliecer Daza Parra Indexer
Mariammal Chettiyar
Olivier Pons

Production Coordinator
Acquisition Editor
Melwyn D'sa
Usha Iyer

Cover Work
Lead Technical Editor
Melwyn D'sa
Sweny M. Sukumaran

Technical Editors
Dennis John
Gaurav Thingalaya

www.it-ebooks.info
 About the Authors

Raymond Camden is a Senior Developer Evangelist for Adobe. His work focuses
on web standards, mobile development, and ColdFusion. He's a published author,
and presents at conferences and user groups on a variety of topics. Raymond can
be reached at his blog at www.raymondcamden.com, followed on Twitter
(@cfjedimaster), or contacted via e-mail at [email protected].

As always, I dedicate this book to the one person who made this all
possible, my wife Jeanne. Thank you for believing in me and being
strong when I am not. I will love you always.
I'd like to thank everyone on the jQuery and jQuery Mobile teams
for making tools that have changed my life. Without your hard work
and dedication, the Web would be less awesome. Thank you Andy
for coming on board and helping to make this book better.

Andy Matthews has been working as a web and application developer for over
16 years, with experience in a wide range of industries, and a skillset that includes
UI/UX, graphic design, and programming. He is the co-author of the book jQuery
Mobile Web Development Essentials, Packt Publishing, and writes for online publications
such as NetTuts and .NET Magazine. He is a frequent speaker at conferences
around the country, and he has developed software for the open source community
including several of the most popular jQuery Mobile projects on the Web. He blogs
at andyMatthews.net, tweets at @commadelimited, and lives in Nashville, TN, with
his wife and four children.

Thanks to my wife and children who tolerate my time spent learning

and writing.
Thanks to Packt Publishing for publishing this book. Thanks to the
jQuery Mobile team for creating such a great and easy-to-use open
source project.

www.it-ebooks.info
 About the Reviewers

Matt Gifford is an RIA developer from Cambridge, England, who specializes

in ColdFusion, web application, and mobile development. With over 10 years of
industry experience across various sectors. Matt is the owner of a development
consultancy firm monkehWorks Ltd (www.monkehworks.com).

He is a regular presenter at national and international conferences, and also

contributes articles and tutorials for leading international industry magazines
as well as publishes them on his blog at: http://www.mattgifford.co.uk.

As an Adobe Community Professional, Matt is an advocate of community resources

and industry-wide knowledge sharing, with a focus on encouraging the next
generation of industry professionals.

Matt is the author of Object-Oriented Programming in ColdFusion and PhoneGap Mobile

Application Development Cookbook (both by Packt Publishing) as well as numerous open
source applications, including the popular monkehTweets Twitter API wrapper.

You can reach Matt on Twitter via @coldfumonkeh or through his blog.

My eternal thanks always go to my constantly supportive family. Big

thanks also go to Ray and Andy for inviting me to review their work.
It has been a pleasure working with them, as always.

www.it-ebooks.info
Eliecer Daza Parra has been a web developer since 2005. He has got ample
experience in Java, Python, PHP, jQuery, and jQuery Mobile. Elicer has an experience
of more than 8 years as a Java developer. He has been a software developer for
Information Management and Customer Relationship Management (CMR) for health
promoting enterprises (EPS), public transportation, and education companies in the
private and public sectors. He has been working as a Python developer since more
than 2 years, working with responsive websites.

Among the main areas of his interest are the development of Linux, Python, Android,
and Google Services. He has a huge interest in nurturing blog spaces about Linux
administration and programming.

My heartfelt appreciation to God, my beloved mother and friend, my

family, and July.

Olivier Pons is a developer who's been building websites since 1997. He's a
teacher at Ingésup (École supérieure d'ingénierie informatique), the University of
Sciences (IUT) of Aix-en-Provence, France where he teaches Linux, Apache HTTP
server, PHP, jQuery/jQuery Mobile, advanced website optimization, and advanced
VIM techniques. He has already written some technical reviews, including the
Packlib book Ext JS 4 First Look. In 2011, he left a full-time job as a Delphi and PHP
developer to concentrate on his own company, HQF Development (http://hqf.
fr). He currently runs a number of websites, including http://www.livrepizzas.
fr, http://www.papdevis.fr, and http://olivierpons.fr—his own web
development blog. He currently works as a consultant, project manager, and
senior developer.

www.it-ebooks.info
 www.PacktPub.com

Support files, eBooks, discount offers

and more
You might want to visit www.PacktPub.com for support files and downloads related
to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and
ePub files available? You can upgrade to the eBook version at www.PacktPub.com and
as a print book customer, you are entitled to a discount on the eBook copy. Get in touch
with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up
for a range of free newsletters and receive exclusive discounts and offers on Packt books
and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital
book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials for
immediate access.

www.it-ebooks.info
www.it-ebooks.info
 Table of Contents
Preface 1
Chapter 1: Preparing Your First jQuery Mobile Project 11
Important preliminary points 11
Building an HTML page 11
Getting jQuery Mobile 13
Customized downloads 14
Implementing jQuery Mobile 14
Working with data attributes 16
Summary 18
Chapter 2: Working with jQuery Mobile Pages 19
Important preliminary points 19
Adding multiple pages to one file 20
jQuery Mobile, links, and you 22
Working with multiple files 23
jQuery Mobile and URLs 25
Additional customization 26
Page titles 26
Prefetching content 26
Changing page transitions 27
Summary 28
Chapter 3: Enhancing Pages with Headers, Footers, and Toolbars 29
Important preliminary points 29
Adding headers 29
Icon sneak peak 31
Working with back buttons 31
Working with footers 33

www.it-ebooks.info
Table of Contents

Creating fixed and full-screen headers and footers 35

Full-screen headers and footers 36
Working with navigation bars 37
Persisting navigation bar footers across multiple pages 38
Summary 40
Chapter 4: Working with Lists 41
Creating lists 41
Working with list features 44
Creating inset lists 44
Creating list dividers 45
Autodividers 46
Creating lists with count bubbles 46
Using thumbnails and icons 47
Creating split button lists 49
Using a search filter 51
Summary 53
Chapter 5: Getting Practical – Building a Simple
Hotel Mobile Site 55
Welcome to Hotel Camden 55
The home page 56
Finding the hotel 58
Listing the hotel rooms 60
Contacting the hotel 61
Summary 62
Chapter 6: Working with Forms and jQuery Mobile 63
Before you begin 63
What jQuery Mobile does with forms 64
Working with radio buttons and checkboxes 68
Working with select menus 71
Search, toggle, and slider fields 75
Search fields 75
Flip toggle fields 76
Slider fields 77
Using native form controls 78
Working with the mini fields 79
Summary 80
Chapter 7: Creating Modal Dialogs and Widgets 81
Creating dialogs 81
Laying out content with grids 84
Making responsive grids 88

[ ii ]

www.it-ebooks.info
 Table of Contents

Working with collapsible content 90

Popups 95
Responsive tables 98
Working with panels 102
Summary 104
Chapter 8: Moving Further with the Notekeeper
Mobile Application 105
What is a mobile application? 105
Designing your first mobile application 106
Listing out the requirements 106
Building your wireframes 107
Designing the add note wireframe 108
Display notes wireframe 108
View note/delete button wireframe 108
Writing the HTML 109
Adding functionalities with JavaScript 111
Storing Notekeeper data 114
Using localStorage 114
Effective use of boilerplates 116
Building the Add Note feature 116
Adding bindings 116
Collecting and storing the data 118
Building the Display Notes feature 119
Dynamically adding notes to our listview 121
Viewing a note 122
Using the .on() method 123
Dynamically creating a new page 123
Deleting a note 126
Summary 127
Chapter 9: jQuery Mobile Configuration, Utilities,
and JavaScript Methods 129
Configuring jQuery Mobile 129
Using jQuery Mobile utilities 137
Page methods and utilities 138
Path and URL-related utilities 139
jQuery Mobile widget and form utilities 142
Summary 145
Chapter 10: Working with Events 147
Working with physical events 147
Handling page events 153
What about $(document).ready? 156

[ iii ]

www.it-ebooks.info
Table of Contents

Creating a real example 156

Summary 158
Chapter 11: Enhancing jQuery Mobile 159
What's possible? 159
The visual building blocks of jQuery Mobile 160
Border-radius 160
Applying drop shadows 162
Using text-shadow 162
Using box-shadow 163
CSS gradients 164
The basics of jQuery Mobile theming 167
Bars (.ui-bar-?) 168
Content blocks (.ui-body-?) 168
Buttons and listviews (.ui-btn-?) 169
Mixing and matching swatches 169
Site-wide active state 170
Default icons 170
Creating and using a custom theme 171
What's ThemeRoller? 172
Using ThemeRoller 172
Preview 174
Colors 175
Inspector 175
Tools 176
Creating a theme for Notekeeper 177
Exporting your theme 180
Creating and using custom icons 182
CSS Sprites 182
Designing your first icon 183
High and low resolution 186
Resolution independence 186
Updating the Notekeeper app 187
Adding our custom theme 187
Adding our custom icon 188
Summary 189
Chapter 12: Creating Native Applications 191
HTML as a native application 191
Working with PhoneGap 192
Adding PhoneGap functionality 197
Summary 201

[ iv ]

www.it-ebooks.info
 Table of Contents

Chapter 13: Becoming an Expert – Building an RSS

Reader Application 203
RSS Reader – the application 203
Creating the RSS Reader application 206
The displayFeeds function 208
Storing our feeds 209
Adding an RSS feed 210
Viewing a feed 212
Creating the entry view 214
Going further 215
Summary 216
Index 217

[v]

www.it-ebooks.info
www.it-ebooks.info
 Preface
Welcome to jQuery Mobile Web Development Essentials, Second Edition. Both myself and
Andy Matthews have tried our best to create a book that introduces and prepares
you for building mobile-friendly websites with jQuery Mobile.

What is jQuery Mobile?

On August 11, 2010, John Resig (creator of jQuery) announced the jQuery Mobile
project. While focused on the UI framework, it was also a recognition of jQuery itself
as a tool for mobile sites, and that work would be done to the core framework itself
to make it work better on devices. Release after release, the jQuery Mobile project
evolved into a powerful framework encompassing more platforms, more features,
and better performance with every update.

But what do we mean when we refer to a "UI framework"? What does it mean for
developers and designers? jQuery Mobile provides a way to turn regular HTML
(and CSS) into mobile-friendly sites. As you will see in the book, you can take a
regular HTML page, add in the required bits for jQuery Mobile (essentially five lines
of HTML), and find your page transformed into a mobile-friendly version instantly.

Unlike other frameworks, jQuery Mobile is focused on HTML. In fact, for a

framework tied to jQuery, you can do a heck of a lot of work without writing a single
line of JavaScript. It's a powerful, practical way of creating mobile websites that
any existing HTML developer can pick up and adapt within a few hours. Compare
this to other frameworks, such as Sencha Touch; Sencha Touch is also a powerful
framework, but its approach is radically different, using JavaScript to help define
and lay out pages. jQuery Mobile is much friendlier to people who are more familiar
with HTML as opposed to JavaScript. jQuery Mobile is "touch-friendly", which will
make sense to anyone who has used a smart phone, and struggled to click the right
spot on a website with tiny text and hard-to-spot links.

www.it-ebooks.info
Preface

It will make sense to anyone who accidentally clicked a Reset button instead of
Submit. jQuery Mobile will enhance your content to help solve these issues. Regular
buttons become large, fat, and easy to hit. Links can be turned into list-based
navigation systems. Content can be split into virtual pages with smooth transitions.
You will be surprised just how much jQuery Mobile will do for you without writing
much code at all.

jQuery Mobile has some very big sponsors. They include Nokia, Blackberry, Adobe,
and other large companies. These companies have invested money, hardware, and
developer resources to help ensure the success of the project.

What's the cost?

Ah, the million dollar question! Luckily this one is easy to answer: nothing. jQuery
Mobile, like jQuery itself, is completely free to use for any purpose. Not only that, it's
completely open source. Don't like how something works? You can change it. Want
something not supported by the framework? You can add it. To be fair, digging deep
into the code base is probably something most folks will not be comfortable doing.
However, the fact that you can if you need to, and the fact that other people can,
leads to a product that will be open to development by the community at large.

[2]

www.it-ebooks.info
 Preface

What do you need to know?

Finally, along with not paying a dime to download and work with jQuery Mobile,
the best thing is that you probably already have all the skills necessary to work
with the framework. As you will see in the chapters of the book, jQuery Mobile is
a HTML-based framework. If you know HTML, even just simple HTML, you can
use jQuery Mobile framework. Knowledge of CSS and JavaScript is a plus, but not
entirely required (While jQuery Mobile uses a lot of CSS and JavaScript behind the
scenes, you don't actually have to write any of this yourself!).

What about native apps?

jQuery Mobile does not create native applications. You'll see later in the book
how you can combine jQuery Mobile with "wrapper" technologies such as PhoneGap
to create native apps, but in general, jQuery Mobile is for building websites.
The question on whether to develop a website or a mobile app is not something
this book can answer. You need to look at your own business needs and see what will
satisfy them. Because we are not building mobile apps themselves, we do not have to
worry about setting up any accounts with Google or Apple or paying any fees for the
marketplace. Any user with a mobile device that includes a browser will be able to
view your mobile-optimized sites.

Again, if you want to develop true mobile apps with jQuery Mobile, it's definitely
an option.

Help!
While we'd like to think that this book will cover every single possible topic you
would need for all your jQuery Mobile needs, there will most likely be things we
can't cover. If you need help, there are a couple of places you can try.

Firstly, the jQuery Mobile docs (http://jquerymobile.com/demos/) cover syntax,

features, and development in general, much like this book. While the material may
cover some of the same ground, if you find something confusing here, try the official
docs. Sometimes a second explanation can really help.

Secondly, the jQuery Mobile forum (http://forum.jquery.com/jquery-mobile)

is an open-ended discussion list for jQuery Mobile topics. This is the perfect place
to ask questions. Also, it's a good place to learn about problems other people are
having. You may even be able to help them. One of the best ways to learn a new
topic is by helping others.

[3]

www.it-ebooks.info
Preface

Examples
Do you want to see jQuery Mobile in action? There's a site for that. JQM Gallery
(http://www.jqmgallery.com/) is a collection of user-submitted sites built using
jQuery Mobile. Not surprisingly, it too uses jQuery Mobile that makes it yet another
way to sample jQuery Mobile.

What this book covers

Chapter 1, Preparing Your First jQuery Mobile Project, walks you through your first
jQuery Mobile project. It details what must be added to your project's directory
and source code.

Chapter 2, Working with jQuery Mobile Pages, continues the work in the previous
chapter and introduces the concept of jQuery Mobile pages.

Chapter 3, Enhancing Pages with Headers, Footers, and Toolbars, explains how to enhance
your pages with nicely formatted headers and footers.

Chapter 4, Working with Lists, describes how to create jQuery Mobile listviews.
These are mobile-optimized lists that are especially great for navigation.

[4]

www.it-ebooks.info
 Preface

Chapter 5, Getting Practical – Building a Simple Hotel Mobile Site, walks you through
creating your first "real" (albeit simple) jQuery Mobile application.

Chapter 6, Working with Forms and jQuery Mobile, walks you through the process of
using jQuery Mobile-optimized forms. Layout and special form features are covered
in detail.

Chapter 7, Creating Modal Dialogs and Widgets, walks you through special jQuery
Mobile user interface items for creating grid-based layouts, dialogs, and collapsible
content areas.

Chapter 8, Moving Further with the Notekeeper Mobile Application, walks you through the
process of creating another website, an HTML5-enhanced note taking application.

Chapter 9, jQuery Mobile Configuration, Utilities, and JavaScript Methods, describes the
various JavaScript-based utilities your code may require.

Chapter 10, Working with Events, details the events thrown by various jQuery
Mobile-related features, such as pages loading and unloading.

Chapter 11, Enhancing jQuery Mobile, demonstrates how to change the default
appearance of your jQuery Mobile sites by selecting and creating unique themes.

Chapter 12, Creating Native Applications, takes what you've learned previously and
shows how to use the open source PhoneGap project to create real native applications.

Chapter 13, Becoming an Expert – Building an RSS Reader Application, expands upon
the previous chapter by creating an application that lets you add and read RSS feeds
on mobile devices.

What you need for this book

Nothing! Technically, you need a computer and a browser, but jQuery Mobile is built
with HTML, CSS, and JavaScript. No IDE (Integrated Development Environment) or
special tool will be required to work with the framework. If you've got any editor on
your system (and all operating systems include a free editor of some sort), you can
develop with jQuery Mobile.

[5]

www.it-ebooks.info
Preface

There are good IDEs out there that can help you be more productive. Adobe
Dreamweaver CC, for example, includes native support for jQuery Mobile
with code assist and device previews.

At the end of the day, you can develop with jQuery Mobile for free. It's zero cost
for you to download, develop, and publish jQuery Mobile sites.

Who this book is for

This book is for anyone looking to embrace mobile development and expand
their skillsets beyond the desktop.

Conventions
In this book, you will find a number of styles of text that distinguish between
different kinds of information. Here are some examples of these styles, and an
explanation of their meaning.

Code words in text are shown as follows: "Notice the new data-title tag added
to the div tag."

[6]

www.it-ebooks.info
 Preface

A block of code is set as follows:

<html>
<head>
<title>First Mobile Example</title>
</head>
<body>

New terms and important words are shown in bold. Words that you see on
the screen, in menus or dialog boxes, for example, appear in the text like this:
"Imagine our Megacorp page. It's got three pages, but the Products page is
a separate HTML file."

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback
Feedback from our readers is always welcome. Let us know what you think about
this book—what you liked or may have disliked. Reader feedback is important for
us to develop titles that you can really get the most out of.

To send us general feedback, simply send an e-mail to [email protected],

and mention the book title in the subject line of your message.

If there is a topic that you have expertise in and you are interested in either writing
or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support
Now that you are the proud owner of a Packt book, we have a number of things
to help you to get the most from your purchase.

[7]

www.it-ebooks.info
Preface

Downloading the example code

This book contains many code samples. You are not expected to type them in.
You should not type them all in. Rather, you should download them from the
public GitHub repository set up for the book: https://github.com/cfjedimaster/
jQuery-Mobile-Book. The GitHub repository will be updated as typos and other
mistakes are found in the book. Therefore it is possible that the code may not exactly
match the text in the book.

If you are not familiar with Git, then simply click on the Downloads tab and then
either Download as zip or Download as tar.gz to quickly get an archived collection
of all the files.

You should extract these files onto a local web server. If you do not have one
installed, we recommend installing Apache (http://httpd.apache.org/). Apache
works on all platforms, is free, and is typically easy to install. Once extracted, you
can edit these files, view them in your browser, or copy them as a starting point for
your own projects.

You can download the example code files for all Packt books you have purchased
from your account at http://www.packtpub.com. If you purchased this book
elsewhere, you can visit http://www.packtpub.com/support and register to
have the files e-mailed directly to you.

Errata
Although we have taken every care to ensure the accuracy of our content, mistakes
do happen. If you find a mistake in one of our books—maybe a mistake in the text or
the code—we would be grateful if you would report this to us. By doing so, you can
save other readers from frustration and help us improve subsequent versions of this
book. If you find any errata, please report them by visiting http://www.packtpub.
com/support, selecting your book, clicking on the errata submission form link, and
entering the details of your errata. Once your errata are verified, your submission
will be accepted and the errata will be uploaded to our website, or added to any list
of existing errata, under the Errata section of that title.

[8]

www.it-ebooks.info
 Preface

Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media.
At Packt, we take the protection of our copyright and licenses very seriously. If you
come across any illegal copies of our works, in any form, on the Internet, please
provide us with the location address or website name immediately so that we can
pursue a remedy.

Please contact us at [email protected] with a link to the suspected

pirated material.

We appreciate your help in protecting our authors, and our ability to bring
you valuable content.

Questions
You can contact us at [email protected] if you are having a problem
with any aspect of the book, and we will do our best to address it.

[9]

www.it-ebooks.info
www.it-ebooks.info
 Preparing Your First jQuery
Mobile Project
You know what jQuery Mobile is, the history of it as well as its features and goals.
Now we're actually going to build our first jQuery Mobile website (well, web page)
and see how easy it is to use.

In this chapter we will perform the following steps:

• Create a simple HTML page

• Add jQuery Mobile to the page
• Make use of custom data attributes (data-*)
• Update the HTML to make use of the data attributes that jQuery
Mobile recognizes

Important preliminary points

You can find all the source code for this chapter in the c1 folder of the ZIP file
you downloaded from GitHub. If you wish to type everything out by hand,
we recommend you use similar filenames.

Building an HTML page

Let's begin with a simple web page that is not mobile optimized. To be clear, we
aren't saying it can't be viewed on a mobile device. Not at all! But it may not be
usable on a mobile device. It may be hard to read (text too small). It may be too
wide. It may use forms that don't work well on a touch screen. We don't know
what kinds of problems we will have at all until we start testing. (And we've all
tested our websites on mobile devices to see how well they work, right?)

www.it-ebooks.info
Preparing Your First jQuery Mobile Project

Let's have a look at the following code snippet:

<h1>Welcome</h1>
<p>
Welcome to our first mobile web site. It's going to be the
best site you've ever seen. Once we get some content. And a
business plan. But the hard part is done!
</p>
<p>
<i>Copyright Megacorp&copy; 2013</i>
</p>
</body>
</html>

As we said, there is nothing too complex, right? Let's take a quick look at this
in the browser:

Not so bad, right? But let's take a look at the same page in a mobile simulator:

[ 12 ]

www.it-ebooks.info
 Chapter 1

Wow, that's pretty tiny. You've probably seen web pages like this before on your
mobile device. You can, of course, typically use pinch and zoom or double-click
actions to increase the size of the text. But it would be preferable to have the page
render immediately in a mobile-friendly view. This is where jQuery Mobile comes in.

Getting jQuery Mobile

In the preface we talked about how jQuery Mobile is just a set of files. That isn't
said to minimize the amount of work done to create those files, or how powerful
they are, but to emphasize that using jQuery Mobile means you don't have to install
any special tools or server. You can download the files and simply include them in
your page. And if that's too much work, you have an even simpler solution. jQuery
Mobile's files are hosted on a Content Delivery Network (CDN). This is a resource
hosted by them and guaranteed (as much as anything like this can be) to be online
and available. Multiple sites are already using these CDN hosted files. That means
when your users hit your site they may already have the resources in their cache.
For this book, we will be making use of the CDN hosted files, but just for this first
example we'll download and extract the files we need. I recommend doing this
anyway for those times when you're on an airplane and wanting to whip up
a quick mobile site.

To grab the files, visit http://jquerymobile.com/download. There are a few

options here but you want the ZIP file option. Go ahead and download that
ZIP file and extract it. (The ZIP file you downloaded earlier from GitHub has a
copy already.) The following screenshot demonstrates what you should see after
extracting the files from the ZIP file:

[ 13 ]

www.it-ebooks.info
Preparing Your First jQuery Mobile Project

At the time this book was written, jQuery Mobile was preparing for
the release of Version 1.4. Obviously, by the time you read this book
a later version may have been released. The file names you see listed
in the previous screenshot are version specific, so keep in mind they
may look a bit different for you.

Notice the ZIP file contains a CSS and JavaScript file for jQuery Mobile, as well as a
minified version of both. You will typically want to use the minified version in your
production apps and the regular version while developing. The images folder has
five images used by the CSS when generating mobile optimized pages. You will also
see demos for the framework as well as theme and structure files (You won't need
to use those for this book). So, to be clear, the entire framework and all the features
we will be talking about over the rest of the book will consist of a framework of 6
files. Of course, you also need to include the jQuery library. You can download that
separately at www.jquery.com. At the time this book was written, the recommended
version was 1.9.1.

Customized downloads
As a final option for downloading jQuery Mobile, you can also use a customized
Download Builder tool at http://jquerymobile.com/download-builder. Currently
in Alpha (that is, not certified to be bug-free!), the web-based tool lets you download
a jQuery Mobile build minus features your website doesn't need. This creates smaller
files which reduces the total amount of time your application needs to display to the
end user.

Implementing jQuery Mobile

Ok, we've got the bits, but how do we use them? Adding jQuery Mobile support
to a site requires the following three steps at a minimum:

1. First, add the HTML5 DOCTYPE to the page: <!DOCTYPE html>. This is used
to help inform the browser about the type of content it will be dealing with.
2. Add a viewport metatag: <metaname="viewport"content="width=dev
ice-width,initial-scale="1">. This helps set better defaults for pages
when viewed on a mobile device.
3. Finally, the CSS, JavaScript library, and jQuery itself need to be included into
the file.

[ 14 ]

www.it-ebooks.info
 Chapter 1

Let's look at a modified version of our previous HTML file that adds all of the above:
code 1-2: test2.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"href="jquery.mobile-1.3.2.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript"src="jquery.mobile-
1.3.2.min.js"></script>
</head>
<body>
<h1>Welcome</h1>
<p>
Welcome to our first mobile web site. It's going to be the best
site you've ever seen. Once we get some content. And a
business
plan. But the hard part is done!
</p>
<p>
<i>Copyright Megacorp&copy; 2013</i>
</p>
</body>
</html>

For the most part, this version is the exact same as Code 1-1, except for the addition
of the DOCTYPE, the CSS link, and our two JavaScript libraries. Notice we point to the
hosted version of the jQuery library. It's perfectly fine to mix local JavaScript files
and remote ones. If you wanted to ensure you could work offline, you can simply
download the jQuery library as well.

[ 15 ]

www.it-ebooks.info
Preparing Your First jQuery Mobile Project

So while nothing changed in the code between the body tags, there is going to be a
radically different view now in the browser. The following screenshot shows how
the iOS mobile browser renders the page now:

Right away, you see a couple of differences. The biggest difference is the relative
size of the text. Notice how much bigger it is and easier to read. As we said, the user
could have zoomed in on the previous version, but many mobile users aren't aware
of this technique. This page loads up immediately in a manner that is much more
usable on a mobile device.

Working with data attributes

As we saw in the previous example, just adding in jQuery Mobile goes a long way
to updating our page for mobile support. But there's a lot more involved to really
prepare our pages for mobile devices. As we work with jQuery Mobile over the
course of the book, we're going to use various data attributes to mark up our pages
in a way that jQuery Mobile understands. But what are data attributes?

HTML5 introduced the concept of data attributes as a way to add ad-hoc values to
the DOM (Document Object Model). As an example, this is a perfectly valid HTML:
<div id="mainDiv" data-ray="moo">Some content</div>

In the previous HTML, the data-ray attribute is completely made-up. However,

because our attribute begins with data-, it is also completely legal. So what happens
when you view this in your browser? Nothing! The point of these data attributes is
to integrate with other code, like JavaScript, that does whatever it wants with them.
So for example, you could write JavaScript that finds every item in the DOM with the
data-ray attribute, and change the background color to whatever was specified in
the value.
[ 16 ]

www.it-ebooks.info
 Chapter 1

This is where jQuery Mobile comes in, making extensive use of data attributes,
both for markup (to create widgets) and behavior (to control what happens when
links are clicked). Let's look at one of the main uses of data attributes within jQuery
Mobile—defining pages, headers, content, and footers:
code 1-3: test3.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"href="jquery.mobile-1.3.2.min.css" />
<script type="text/javascript"src="http://code.jquery
.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript"src="jquery.
mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Welcome</h1></div>
<div data-role="content">
<p>
Welcome to our first mobile web site. It's going to be the
best site you've ever seen. Once we get some content. And
a business plan. But the hard part is done!
</p>
</div>
<div data-role="footer">
<h4>Copyright Megacorp&copy; 2013</h4>
</div>
</div>
</body>
</html>

Compare the previous code snippet to code 1-2, and you can see that the main
difference was the addition of the div blocks. One div block defines the page. Notice
it wraps all of the content inside the body tags. Inside the body tag, there are three
separate div blocks. One has a role of header, another a role of content, and the
final one is marked as footer.

[ 17 ]

www.it-ebooks.info
Preparing Your First jQuery Mobile Project

All the blocks use data-role, which should give you a clue that we're defining a role
for each of the blocks. As we stated previously, these data attributes mean nothing to
the browser itself. But let's look what at what jQuery Mobile does when it encounters
these tags:

Notice right away that both the header and footer now have a black background
applied to them. This makes them stand out even more from the rest of the content.
Speaking of the content, the page text now has a bit of space between it and the
sides. All of this was automatic once the div tags with the recognized data-roles
were applied. This is a theme you're going to see repeated again and again as we go
through this book. A vast majority of the work you'll be doing will involve the use of
data attributes.

Summary
In this chapter, we talked a bit about how web pages may not always render well in a
mobile browser. We talked about how the simple use of jQuery Mobile can go a long
way to improving the mobile experience for a website. Specifically, we discussed
how you can download jQuery Mobile and add it to an existing HTML page, what
data attributes mean in terms of HTML, and how jQuery Mobile makes use of data
attributes to enhance your pages. In the next chapter, we will build upon this usage
and start working with links and multiple pages of content.

[ 18 ]

www.it-ebooks.info
 Working with jQuery
Mobile Pages
In the previous chapter you saw how easy it was to add jQuery Mobile to a simple
HTML page. While it would be nice if every website consisted of one and only one
page, real websites consist of multiple pages connected via links. jQuery Mobile
makes it easy to work with multiple pages, and provides many different ways to
create and link the pages.

In this chapter, we will perform the following steps:

• Add multiple pages to one jQuery Mobile file

• Discuss how links are modified by jQuery Mobile (and how to disable it)
• Demonstrate how additional files can be linked to and added to a jQuery
Mobile site
• Discuss how jQuery Mobile automatically handles URLs to allow for easy
bookmarking

Important preliminary points

As mentioned in the previous chapter, all of the code from this chapter is available
via the ZIP file downloaded at GitHub.

Starting with this chapter, we will be presenting only the most relevant parts of each
code snippet. The first code snippet, typically, will include all the code, while later
code snippets will focus on the important sections. Be sure to reference the complete
code snippets available via the downloaded ZIP file.

www.it-ebooks.info
Working with jQuery Mobile Pages

Adding multiple pages to one file

In the previous chapter, we worked on a file that had a simple page of text. For our
first modification, we're going to add another page to the file and create a link to
it. If you remember, jQuery Mobile looks for a particular <div> wrapper to help it
know where your page is: <div data-role="page">. What makes jQuery Mobile so
simple to use is that we can add another page by simply adding another div using
the same format. The following code snippet code 2-1 shows a simple example of
this feature:
code 2-1: test1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Multi Page Example</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-
1.9.1.min.js"></script>
<script.src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header"><h1>Welcome</h1></div>
<div data-role="content">
<p>
Welcome to our first mobile web site. It's going to be the
best site you've ever seen. Once we get some content. And
a business plan. But the hard part is done!
</p>
<p>
You can also <a href="#aboutPage">learn more</a> about
Megacorp.
</p>
</div>
<div data-role="footer">

[ 20 ]

www.it-ebooks.info
 Chapter 2

<h4>Copyright Megacorp &copy; 2013</h4>

</div>
</div>
<div data-role="page" id="aboutPage">
<div data-role="header"><h1>About Megacorp</h1></div>
<div data-role="content">
<p>
This text talks about Megacorp and how interesting it is.
Most likely though you want to
<a href="#homePage">return</a> to the home page.
</p>
</div>
<div data-role="footer">
<h4>Copyright Megacorp &copy; 2013/h4>
</div>
</div>
</body>
</html>

Ok, so as always, we begin our template with a few required bits: the HTML5
DOCTYPE, the meta tag, one CSS include, and two JavaScript files. This was covered
in the previous chapter and we will not be mentioning it again. Note that this
template switches over to the CDN version of the CSS and JavaScript libraries:
<link rel="stylesheet" href="http://code.jquery.com/
mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/
jquery.mobile-1.3.2.min.js"></script>

These versions are hosted by the jQuery team. Most likely, your visitors will have
loaded these libraries already so they exist in their cache before arriving at your
mobile site. While this is the route we will take going further with our examples,
remember that you can always use the version you downloaded instead.

Notice now we have two <div> blocks. The first hasn't much changed from the
previous example. We've added a unique ID (homepage), as well as a second
paragraph. Notice the link in the second paragraph. It's using a standard internal
link (#aboutPage) to tell the browser that we want to simply scroll the browser
down to that part of the page. The target specified, aboutPage, is defined right
below in another div block.

[ 21 ]

www.it-ebooks.info
Working with jQuery Mobile Pages

In a traditional web page, this would display as two main blocks of text on a
page. Clicking any of the two links would simply scroll the browser up and down
accordingly. However, jQuery Mobile is going to do something significantly different
here. The following figure shows how the page is rendered in the mobile browser:

Notice something? Even though our HTML included two blocks of text (the two
<div> blocks), it only rendered one. jQuery Mobile will always display the first page
it finds, and only that page. Here comes the best part. If you click on the link, the
second page automatically loads. Using your device's back button or simply clicking
on the link will return you back to the first page. (Obviously this only works on
devices that have a back button, for example Android devices.) You will also notice
a smooth transition. This is something you can configure later on. But all of the
interactions here, the showing and hiding of pages, and the transitions, were all done
automatically by jQuery Mobile. Now is a good time to talk about links and what
jQuery Mobile does when you click on them.

jQuery Mobile, links, and you

When jQuery Mobile encounters a simple link (<a href="something.html">Foo</
a>), it will automatically capture any clicks on that link and change it to an AJAX-
based load. This means that if it detects that the target is something on the same
page, that is, the hash-mark style (href="#foo") links we used previously, it will
handle transitioning the user to a new page. If it detects a page to another file on the
same server, it will use AJAX to load the page and replace the currently visible one.

[ 22 ]

www.it-ebooks.info
 Chapter 2

If you link to an external site, then jQuery Mobile will leave the link as it is, and
the normal link behavior will occur. There may be times when you want to disable
jQuery Mobile from doing anything with your links at all. In that case, you can make
use of a data attribute that lets the framework know it shouldn't do anything at all.
An example:
<a href="foo.html" data-ajax="false">Normal, non-special link</a>

As we saw in Chapter 1, Preparing Your First jQuery Mobile Project, jQuery Mobile
makes heavy use of data attributes. It is also very good at letting you disable
behaviors you don't like. As we continue in the book you will see example after
example of something jQuery Mobile does to enhance your site for mobile devices.
In all of these cases though, the framework recognizes there may be times when you
want to disable that.

Working with multiple files

In an ideal world, we could build an entire website with one file, never have to
perform revisions, and be done with every project by 2 P.M. on Friday. But in the
real world we have to deal with lots of files, lots of revisions, and, unfortunately,
lots of work. In the earlier code snippet, you saw how we could include two pages
within one file. jQuery Mobile handles this easily enough. But you can imagine that
this would get unwieldy after a while. While we could include ten, twenty, even
thirty pages, this is going to make the file difficult to work with and make the initial
download for the user that much slower.

To work with multiple pages, and files, all we need to do is make a simple link
to other files in the same domain as our first file. We can even combine the first
technique (two pages in one file) with links to other files. In code 2-2, we've
modified the first example to add a link to a new page. (As mentioned previously,
we are only listing the relevant portion of the page!)
code 2-2:test2.html
<div data-role="page" id="homePage">
<div data-role="header"><h1>Welcome</h1></div>
<div data-role="content">
<p>
Welcome to our first mobile web site. It's going to be the
best site you've ever seen. Once we get some content. And
a business plan. But the hard part is done!
</p>
<p>
Find out about our wonderful
<a href="products.html">products</a>.

[ 23 ]

www.it-ebooks.info
Working with jQuery Mobile Pages

</p>
<p>
You can also <a href="#aboutPage">learn more</a> about
Megacorp.
</p>
</div>
<div data-role="footer">
<h4>Copyright Megacorp &copy; 2013</h4>
</div>
</div>

Now, let's look at code 2-3, our products page:

code 2-3: products.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Products</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-
1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.js"></script>
</head>

<body>
<div data-role="page" id="productsPage">
<div data-role="header"><h1>Products</h1></div>
<div data-role="content">
<p>
Our products include:
</p>
<ul>
<li>Alpha Series</li>
<li>Beta Series</li>
<li>Gamma Series</li>
</ul>
</div>
</div>
</body>
</html>

[ 24 ]

www.it-ebooks.info
 Chapter 2

Our products page is rather simple, but notice that we included the jQuery and
jQuery Mobile resources on top. Why? I mentioned earlier that jQuery Mobile is
going to use AJAX to load in your additional pages. If you open up test2.html in
any modern browser you can see for yourself using developer tools. Clicking on the
link for products will fire an XHR (XHR means XML HTTP Request, but generally
just means an AJAX call) request, as shown in the following screenshot from
Chrome's DevTools:

That's neat! But what happens when someone bookmarks the application? Let's now
take a look at how jQuery Mobile handles URLs and navigation.

What are browser developer tools?

All modern browsers have built-in tools to help you build web pages.
These tools allow you to inspect and manipulate the DOM, pause and
debug JavaScript execution, and view network activity and errors.

jQuery Mobile and URLs

If you've opened up test2.html in your browser and played with it, you may have
noticed something interesting about the URLs as you navigate. Following is the
initial URL (the address and folder will, of course, differ on your computer):
http://localhost/mobile/c2/test2.html.

After clicking on products, the URL changes to http://localhost/mobile/

c2/products.html. If I click on back, and click on learn more, I get http://
localhost/mobile/c2/test2.html#aboutPage.

In both subpages (the Products page and the About page) the URL was changed
by the framework itself. The framework uses history.pushState and history.
replaceState in browsers that support it. For older browsers, or browsers that don't
support JavaScript manipulation of the URL, hash-based navigation is used instead.
The products link, when viewed in an older Internet Explorer, looks like the following:
http://localhost/mobile/c2/test2.html#/mobile/c2/products.html

[ 25 ]

www.it-ebooks.info
Working with jQuery Mobile Pages

What's interesting is that in this bookmark style, test2.html is always loaded

first. You could actually build your products.html to only include the div and be
assured that if the request was made for products first, it would still render correctly.
It's the newer, fancier browsers that have an issue. If you didn't include the proper
jQuery and jQuery Mobile additions, when they go directly to products.html you
would end up with a page that has no styles. It's best to simply always include
your proper header files (the CSS, the JavaScript, and so on). Any decent editor
will provide simple ways to create templates.

Additional customization
Working with multiple pages in jQuery Mobile is pretty simple. You could take
what's been discussed in the first two chapters and build a pretty simple, but mobile
compliant website right now. The following are a few more interesting tricks you
may want to consider.

Page titles
You may have noticed when you clicked on the Products page in the previous
example, the title of the browser correctly updated to Products. This is because
jQuery Mobile noticed, and parsed in, the title tag from the products.html file.
If you click the learn more link, you will notice the title also updates. How did
that work? When the About page was loaded, jQuery Mobile used the header
tag's content (About Megacorp) for a title. You can override this by providing
an additional argument to your div tag defining your page: data-title.
The following code snippet demonstrates this feature:
<div data-role="page" id="aboutPage" data-title="All About
Megacorp">
<div data-role="header"><h1>About Megacorp</h1></div>

You can find this version in test3.html.

Prefetching content
The benefit of including all your content within one HTML file is that all of your
pages are available immediately. But the negatives (too difficult to update, too
slow for an initial download) far outweigh that. Most jQuery Mobile applications
will include multiple files, and typically just use one or two pages per file. You
can, however, ensure speedier loading of some pages to help improve the user
experience. Imagine our Megacorp site. It's got three pages, but the Products page is
a separate HTML file. Since it's the only real content on the site, most likely all of our
users will end up clicking that link. We can tell jQuery Mobile to prefetch the content
[ 26 ]

www.it-ebooks.info
 Chapter 2

immediately upon the main page loading. That way, when the user does click the
link, the page will load much quicker. Once again, this comes down to one simple
data attribute.
<p>
Find out about our wonderful <a href="products.html" data-
prefetch="true">products</a>.
</p>

In the previous link, all we've done is added data-prefetch="true" to the link.
When jQuery Mobile finds this in a link, it will automatically fetch the content right
away. Now, when the user clicks the Products link, they will see the content even
quicker. This modification was saved in test4.html.

Obviously, this technique should be used with care. Given a page with four main links,
you may want to consider only prefetching the two most popular pages, not all four.

Changing page transitions

Earlier, we mentioned that you could configure the transitions jQuery Mobile
uses between pages. Later in the book, we'll discuss how to do that globally,
but if you want to switch to a different transition for a particular link, just include
a data-transition attribute in your link:
<p>
Find out about our wonderful <a href="products.html" data-
transition="pop">products</a>.
</p>

Valid values for transition include: fade (the default), flip, flow, pop, slide,
slidedown, slidefade, turn, and none.

Many transitions also support a reverse action. Normally jQuery Mobile figures out
if you need this, but if you want to force a direction, use the data-direction attribute:
<p>
Find out about our wonderful <a href="products.html" data-
transition="pop" data-direction="reverse">products</a>.
</p>

[ 27 ]

www.it-ebooks.info
Working with jQuery Mobile Pages

Downloading the example code

This book contains many code samples. You are not expected to type
them in. You should not type them all in. Rather, you should download
them from the public GitHub repository setup for the book: https://
github.com/cfjedimaster/jQuery-Mobile-Book. The GitHub
repository will be updated as typos and other mistakes are found in the
book. Therefore it is possible that the code may not exactly match the text
in the book.
If you are not familiar with Git, then simply click on the Downloads tab
and then either Download as zip or Download as tar.gz to quickly get an
archived collection of all the files.
You should extract these files onto a local web server. If you do not
have one installed, we recommend installing Apache (http://httpd.
apache.org/). Apache works on all platforms, is free, and is typically
easy to install. Once extracted, you can edit these files, view them in your
browser, or copy them as a starting point for your own projects.
You can download the example code files for all Packt books you have
purchased from your account at http://www.packtpub.com. If you
purchased this book elsewhere, you can visit http://www.packtpub.
com/supportand register to have the files e-mailed directly to you.

Summary
This chapter further fleshed out the concept of jQuery Mobile pages, and how to
work with multiple pages. Specifically, we saw how one physical file can contain
many different pages. jQuery Mobile will handle hiding all but the first page. We
also saw how you can link to other pages, and how jQuery Mobile uses AJAX to
dynamically load the content into the browser. Next, we discussed how jQuery
Mobile handles updating the URL of the browser in order to enable bookmarking.
Finally, we discussed two utilities that will help to improve your page. The first way
was to provide a title for embedded pages. The second technique demonstrated how
to prefetch content to further improve the experience of the users visiting your site.

In the next chapter, we'll take a look at headers, footers, and navigation bars.
These will greatly enhance our pages and make them easier to navigate.

[ 28 ]

www.it-ebooks.info
 Enhancing Pages with
Headers, Footers,
and Toolbars
Toolbars provide a simple way to add navigation elements to a mobile website.
They can be especially useful for consistent or site-wide navigation controls that
users can always refer to when navigating through your application.

In this chapter, we will perform the following steps:

• Talk about how to create both headers and footers

• Discuss how to turn these headers and footers into useful toolbars
• Demonstrate how to create fixed positioned toolbars that always show up,
no matter how large the content of a particular page is
• Show an example of navigation bars

Important preliminary points

As mentioned in the previous chapter, all of the code from this chapter is available
via the ZIP file downloaded at GitHub. As before, the chapter will only consider the
important parts of each file. Consult the downloaded files for the complete source.

Adding headers
You've already worked with headers in the previous chapter, so the code will be
familiar. In this chapter, we will study them deeper and demonstrate how to add
additional functionality, such as buttons, to your site headers.

www.it-ebooks.info
Enhancing Pages with Headers, Footers, and Toolbars

If you remember, a header can be defined by simply using a div with the
appropriate role:
<div data-role="header"><h1>My Header</h1></div>

We can further add functionality to headers by adding buttons. Buttons could be

used for navigation (for example, to return to the home screen), or to provide links
to related pages. Because the center of the header is used for text, there are only two
spaces available for buttons—one to the left and one to the right. Buttons can be
added simply by creating links in your header. The first link will be to the left of
the text and the second link to the right. The following file is an example:
code 3-1: header_test.html
<div data-role="header">
<a href="index.html">Home</a>
<h1>My Header</h1>
<a href="contact.html">Contact</a>
</div>

When viewed in the mobile browser, you can see that the links were automatically
turned into buttons:

Notice how the simpler links were automatically turned into big buttons, making
them easier to use and more "control-like" for the header. You may be wondering,
what if you only want one button, and want it on the right-hand side? Removing the
first button and keeping the second in place will not work, as shown in the following
code snippet:
<div data-role="header">
<h1>My Header</h1>
<a href="contact.html">Contact</a>
</div>

The previous code snippet creates a button in the header but on the left-hand side.
In order to position the button to the right, simply add the class ui-btn-right.
code 3-2: header_test2.html
<div data-role="header">
<h1>My Header</h1>
<a href="contact.html" class="ui-btn-right">Contact</a>
</div>

[ 30 ]

www.it-ebooks.info
Other documents randomly have
different content
 plunder was abandoned in their retreat. The
conquerors would have exposed themselves by a rash
pursuit, but Palafox exhorted them not to be
impatient, telling them, that the enemy would give
them frequent opportunities to display their courage.
While he thus restrained their impetuosity, he
continued to excite their zeal. This victory, he said,
was but the commencement of the triumphs which
they were to expect under the powerful assistance of
their divine patrons. The precious blood of their
brethren had been shed in the field of glory, ... on
their own soil. Those blessed martyrs required new
victims; let us, he added, prepare for the sacrifice!
Palafox goes The Zaragozans had obtained only a respite;
out to collect defeated as he was, Lefebvre had only removed
reinforcements. beyond the reach of their guns; his troops were far
superior to any which they could bring against him;
and it was not to be doubted that he would soon
return in greater force, to take vengeance for the
repulse and the disgrace which he had suffered. A
regular siege was to be expected; how were the
citizens to sustain it with their brick walls, without
heavy artillery, and without troops who could sally to
interrupt the besiegers in their works? In spite of all
these discouraging circumstances, confiding in God
and their own courage, they determined to defend the
streets to the last extremity. Palafox, immediately
after the repulse of the enemy, set out to muster
reinforcements, to provide such resources for the
siege as he could, and to place the rest of Aragon in a
state of defence, if the capital should fall. He was
accompanied by Colonel Butron, his friend and aide-
de-camp; Lieut.-Colonel Beillan, of the engineers;
Padre Basilio, and Tio Jorge. With these companions
and a small escort he left the city by the suburbs,
 crossed the Ebro at Pina, and collecting on the way
about 1400 soldiers who had escaped from Madrid,
formed a junction at Belchite with Baron Versage and
some newly raised troops from Calatayud. Their
united numbers amounted to some 7000 men, with
100 horse and four pieces of artillery. Small as this
force was, and still more inefficient for want of
discipline than of numerical strength, Palafox resolved
upon making an attempt with it to succour the city.
The prudence of this determination was justly
questioned by some; others proposed the strange
measure of marching to Valencia: this probably
originated with some of the stray soldiers who were at
liberty to seek their fortune where they pleased, and
the proposal was so well received that a considerable
party prepared to set off in that direction, without
orders. But Palafox called them together, exhorted
them to do their duty, and offered passports to as
many as chose to leave him in the moment of danger.
The consequence of this offer was that not a man
departed. From Almunia, where he had rested a day,
he then marched towards Epila, thinking to advance
to the village of La Muela, and thus place the invaders
between his little army and the city, in the hope of
cutting them off from their reinforcements. Lefebvre
prevented this, by suddenly attacking him at Epila, on
the night of the 23d: after a most obstinate
resistance, the superior arms and discipline of the
French were successful. The wreck of this gallant
band retreated to Calatayud, and afterwards, with
great difficulty, threw themselves into Zaragoza.
G. Verdier joins The besiegers’ army was soon reinforced by
Lefebvre with General Verdier, with 2500 men, besides some
reinforcement. battalions of Portugueze, who, according to the
devilish system of Buonaparte’s tyranny, had been
 forced out of their own country, to be pushed on in
the foremost ranks, wherever the first fire of a battery
was to be received, a line of bayonets clogged, or a
ditch filled, with bodies. They occupied the best
positions in the surrounding plain, and, on the 27th,
attacked the city and the Torrero; but they were
repulsed with the loss of 800 men, six pieces of
artillery, and five carts of ammunition. By this time,
they had invested nearly half the town. The next
morning they renewed the attack at both places; from
the city they were again repulsed, losing almost all
The Torrero the cavalry who were engaged. But the Torrero was
taken. lost through the alleged misconduct of an artillery
officer, who was charged with having made his men
abandon the batteries at the most critical moment.
For this he was condemned to run the gauntlet six
times, the soldiers beating him with their ramrods,
and after this cruelty he was shot.
The French The French, having now received a train of
bombard the mortars, howitzers, and twelve-pounders, which were
city. of sufficient calibre against mud walls, kept up a
constant fire, and showered down shells and grenades
from the Torrero. About twelve hundred were thrown
into the town, and there was not one building that
was bomb proof within the walls. After a time, the
inhabitants placed beams of timber together,
endways, against the houses, in a sloping direction,
behind which those who were near when a shell fell,
might shelter themselves. The enemy continued also
to invest the city more closely, while the Aragonese
made every effort to strengthen their means of
defence. They tore down the awnings from their
windows, and formed them into sacks, which they
filled with sand, and piled up before the gates, in the
form of a battery, digging round it a deep trench.
 They broke holes for musketry in the walls and
intermediate buildings, and stationed cannon where
the position was favourable for it. The houses in the
environs were destroyed. “Gardens and olive
grounds,” says an eye-witness, “that in better times
had been the recreation and support of their owners,
were cheerfully rooted up by the proprietors
themselves, wherever they impeded the defence of
Exertions of the the city, or covered the approach of the enemy.”
women. Women of all ranks assisted; they formed themselves
into companies, some to relieve the wounded, some
to carry water, wine, and provisions, to those who
Countess defended the gates. The Countess Burita instituted a
Burita. corps for this service; she was young, delicate, and
beautiful. In the midst of the most tremendous fire of
shot and shells, she was seen coolly attending to
those occupations which were now become her duty;
nor throughout the whole of a two months’ siege did
the imminent danger, to which she incessantly
exposed herself, produce the slightest apparent effect
upon her, or in the slightest degree bend her from her
heroic purpose. Some of the monks bore arms; others
exercised their spiritual offices to the dying: others,
with the nuns, were busied in making cartridges
which the children distributed.
Among threescore thousand persons there will
always be found some wicked enough for any
employment, and the art of corrupting has constituted
great part of the French system of war. During the
night of the 28th the powder magazine, in the area
where the bull-fights were performed, which was in
the very heart of the city, was blown up, by which
fourteen houses were destroyed, and about 200
persons killed. This was the signal for the enemy to
appear before three gates which had been sold to
 them. And while the inhabitants were digging out
their fellow-citizens from the ruins, a fire was opened
upon them with mortars, howitzers, and cannons,
which had now been received for battering the town.
Their attack seemed chiefly to be directed against the
gate called Portillo, and a large square building near
it, without the walls, and surrounded by a deep ditch;
though called a castle, it served only for a prison. The
sand-bag battery before this gate was frequently
destroyed, and as often reconstructed under the fire
Augustina of the enemy. The carnage here throughout the day
Zaragoza. was dreadful. Augustina Zaragoza, a handsome
woman of the lower class, about twenty-two years of
age, arrived at this battery with refreshments, at the
time when not a man who defended it was left alive,
so tremendous was the fire which the French kept up
against it. For a moment the citizens hesitated to re-
man the guns. Augustina sprung forward over the
dead and dying, snatched a match from the hand of a
dead artilleryman, and fired off a six-and-twenty
pounder; then, jumping upon the gun, made a solemn
vow never to quit it alive during the siege. Such a
sight could not but animate with fresh courage all
who beheld it. The Zaragozans rushed into the
battery, and renewed their fire with greater vigour
than ever, and the French were repulsed here, and at
all other points, with great slaughter. On the morning
of this day a fellow was detected going out of the city
with letters to Murat. It was not till after these
repeated proofs of treasonable practices, that the
French residents in Zaragoza, with other suspected
persons, were taken into custody.
The French Lefebvre now supposing that his destructive
again repulsed bombardment must have dismayed the people, and
in an attempt convinced them how impossible it was for so
to take the city defenceless a city to persist in withstanding him,
by storm. again attempted to force his way into the town,
thinking that, as soon as his troops could effect a
lodgement within the gates, the Zaragozans would
submit. On the 2d of July, a column of his army
marched out of their battery, which was almost within
musket-shot of the Portillo, and advanced towards it
with fixed bayonets, and without firing a shot. But
when they reached the castle, such a discharge of
grape and musketry was opened upon their flank,
that, notwithstanding the most spirited exertions of
their officers, the column immediately dispersed. The
remainder of their force had been drawn up to
support their attack, and follow them into the city; but
it was impossible to bring them a second time to the
charge. The general, however, ordered another
column instantly to advance against the gate of the
Carmen, on the left of the Portillo. This entrance was
defended by a sand-bag battery, and by musketeers,
who lined the walls on each side, and commanded
two out of three approaches to it; and here also the
French suffered great loss, and were repulsed.
They invest the The military men in Zaragoza considered these
city. attacks as extremely injudicious. Lefebvre probably
was so indignant at meeting with any opposition from
a people whom he despised, and a place which,
according to the rules and pedantry of war, was not
tenable, that he lost his temper, and thought to
subdue them the shortest way, by mere violence and
superior force. Having found his mistake, he
proceeded to invest the city still more closely. In the
beginning of the siege, the besieged received some
scanty succours; yet, however scanty, they were of
importance. Four hundred soldiers from the regiment
of Estremadura, small parties from other corps, and a
 few artillerymen got in. Two hundred of the militia of
Logrono were added to these artillerymen, and soon
learnt their new service, being in the presence of an
enemy whom they had such righteous reason to
abhor. Two four-and-twenty-pounders and a few
shells, which were much wanted, were procured from
Lerida. The enemy, meantime, were amply supplied
with stores from the magazine in the citadel of
Pamplona, which they had so perfidiously seized on
their first entrance, as allies, into Spain. Hitherto they
6
had remained on the right bank of the Ebro. On the
11th of July they forced the passage of the ford, and
posted troops enough on the opposite side to protect
their workmen while forming a floating bridge. In
spite of all the efforts of the Aragonese, this bridge
1808. was completed on the 14th; a way was thus made for
July. their cavalry, to their superiority in which the French
They form a were mostly indebted for all their victories in Spain.
bridge over the This gave them the command of the surrounding
Ebro. country; they destroyed the mills, levied contributions
on the villages, and cut off every communication by
which the besieged had hitherto received supplies.
These new difficulties called out new resources in this
admirable people and their general, ... a man worthy
of commanding such a people in such times. Corn
mills, worked by horses, were erected in various parts
of the city; the monks were employed in
manufacturing gunpowder, materials for which were
obtained by immediately collecting all the sulphur in
the place, by washing the soil of the streets to extract
its nitre, and making charcoal from the stalks of
hemp, which in that part of Spain grows to a
magnitude that would elsewhere be thought very
7
unusual .
Distress of the By the end of July the city was completely
inhabitants. invested, the supply of food was scanty, and the
inhabitants had no reason to expect succour. Their
exertions had now been unremitted for forty-six days,
and nothing but the sense of duty could have
supported their bodily strength and their spirit under
such trials. They were in hourly expectation of
another general attack, or another bombardment.
They had not a single place of security for the sick
and the children, and the number of wounded was
daily increased by repeated skirmishes, in which they
engaged for the purpose of opening a communication
with the country. At this juncture they made one
desperate effort to recover the Torrero. It was in vain;
and convinced by repeated losses, and especially by
this last repulse, that it was hopeless to make any
effectual sally, they resolved to abide the issue of the
contest within the walls, and conquer or perish there.
Foundling On the night of the second of August, and on the
Hospital burnt. following day, the French bombarded the city from
1808. their batteries opposite the gate of the Carmen. A
August. foundling hospital, which was now filled with the sick
and wounded, took fire, and was rapidly consumed.
During this scene of horror, the most intrepid
exertions were made to rescue these helpless
sufferers from the flames. No person thought of his
own property or individual concerns, ... every one
hastened thither. The women were eminently
conspicuous in their exertions, regardless of the shot
and shells which fell about them, and braving the
flames of the building. It has often been remarked,
that the wickedness of women exceeds that of the
other sex; ... for the same reason, when
circumstances, forcing them out of the sphere of their
ordinary nature, compel them to exercise manly
 virtues, they display them in the highest degree, and,
when they are once awakened to a sense of
patriotism, they carry the principle to its most heroic
pitch. The loss of women and boys, during this siege,
was very great, fully proportionate to that of men;
they were always the most forward, and the difficulty
was to teach them a prudent and proper sense of
their danger.
Convent of St. On the following day, the French completed their
Engracia. batteries upon the right bank of the Guerva, within
August 3. pistol-shot of the gate of St. Engracia, so called from
a splendid church and convent of Jeronimites, situated
on one side of it. This convent was, on many
accounts, a remarkable place. Men of letters beheld it
with reverence, because the excellent historian Zurita
spent the last years of his life there, observing the
rules of the community, though he had not entered
into the order; and because he was buried there, and
his countryman and fellow-labourer, Geronymo de
Blancas, after him. Devotees revered it, even in the
neighbourhood of our Lady of the Pillar, for its relics
and the saint to whom it was dedicated. According to
the legend, she was the daughter of Ont Comerus, a
barbarian chief, in the pay of the Romans, by whom
the city of Norba Cæsarea, (situated near the Tagus,
between the present towns of Portalegre and
Alcantara) was given him, together with its district, for
his service in recovering it from Cathelius, a chief of
the Alemanni. His daughter, Encratis, or Encratide,
(for from one of these names Engracia has been
formed) was brought up a Christian, and espoused to
a governor on the Gallic side of the Pyrenees, to
whom she was sent with a suitable escort. Their way
lay through Cæsarea-Augusta, where the Præses, or
Governor of Spain, Publius Dacianus, the bloodiest
minister of the tenth persecution, was at that time
endeavouring to extirpate Christianity. Engracia, either
preferring martyrdom to her unknown spouse, or
imagining that her rank would be her safeguard,
visited the governor for the purpose of interceding in
behalf of the Christians, and remonstrating against his
cruelty. Thus much of the legend is probably fabulous;
but certain it is, that a virgin of that name was
tortured under that persecution; and, though she
8
survived, was venerated as a martyr in that city,
before the close of the century in which she suffered.
Just, however, as her claim is to pious remembrance,
her church, and the divine honours which have been
paid to her, were procured by fraud. Angels are said
to have descended at her death, and to have
officiated at her funeral, bearing tapers and
thuribules, and singing hymns of triumph. During the
Moorish captivity, her relics disappeared; they were
discovered towards the close of the fourteenth
century, which was the great age for inventions of this
kind. There stood at that time, upon the site of this
memorable convent, an old church, dedicated to the
Zaragozan martyrs, of the tenth persecution, and
called the Iglesia de las Masas, in memory of an early
specimen of Catholic ingenuity. Dacianus, holding
relic-worship in as much contempt as the Christians
did his idolatry, in order to prevent them from
indulging in it, burnt the bodies of the martyrs,
together with those of some malefactors, thinking that
their ashes would be undistinguishable; nevertheless,
the Christians found their own, which had collected
together in white balls or masses, separate from the
rest. In 1389, the regular canons, to whom the church
belonged, resolved to rebuild a part of it: in digging
the foundation, two marble chests were discovered.
The lid of the smaller was fastened down very firmly
with a sort of pitch; when this was taken off, two sets
of human bones were found in different
compartments; over the one were the words Lupercii
Martyris, sculptured in the marble; over the other,
Engratiæ Virginis: these latter were of rose-colour,
which was admitted as proof of their authenticity. The
larger chest contained a great assortment of
anonymous bones, ashes, and the white masses,
which had disappeared for so many centuries. The
mine was very rich; the workmen went on till they
had invented thirteen chests, and at last, a whole pit
full of relics, not the less efficacious because it could
not be ascertained to whom they had belonged.
Seventy years afterwards, Juan II. of Aragon, one of
the wickedest and most perfidious of men, fancied or
feigned, that by St. Engracia’s intercession, he was
cured of a complaint in his eyes; in consequence of
which, he resolved to enlarge this church, and build a
monastery adjoining it for the Jeronimites, ... an order
which, during that and the succeeding age, was in
great favour at the three courts of the Peninsula. He
began his work, but died without completing it,
leaving that charge by will to his son, Ferdinand, the
Catholic king. He continued the building, but it was
not finished till the reign of Charles the Fifth.
Both the church and convent were splendidly
adorned, but the most remarkable part of the whole
edifice was a subterranean church, formed in the
place where the relics were discovered, and having
the pit, or well, as it was called, in the middle. It was
divided by a beautiful iron grating, which excluded
laymen from the interior of the sanctuary. There were
three descents; the widest flight of steps was that
which was for public use, the two others were for the
 religioners, and met in one behind the three chief
altars, within the grating. Over the midst of these
altars were two tombs, placed one upon the other in a
niche; the under one containing the relics of
Engracia’s companions and fellows in martyrdom; the
upper, those of the saint herself, her head excepted,
which was kept in a silver shrine, having a collar of
precious stones, and enclosed in crystal. The altars on
either side had their respective relics; and several
others, equally rich in such treasures, were ranged
along the walls, without the grating. The roof was of
an azure colour, studded with stars to represent the
sky. The breadth of the vault considerably exceeded
its length; it was sixty feet wide, and only forty long.
Thirty little columns, of different marbles, supported
the roof. On the stone brink of the well, the history of
the Zaragozan martyrs was represented in bas-relief;
and an iron grating, reaching to the roof, secured it
from being profaned by idle curiosity, and from the
pious larcenies which it might otherwise have
tempted. Within this cage-work, a silver lamp was
suspended. Thirty such lamps were burning there day
and night; and, though the roof was little more than
twelve feet high, it was never in the slightest degree
9
sullied with smoke. The fact is certain ; but the useful
and important secret, by which oil was made to burn
without producing smoke, was carefully concealed;
and the Jeronimites continued till this time to exhibit a
miracle, which puzzled all who did not believe it to be
miraculous.
The hospital On the 4th of August, the French opened batteries
set on fire. within pistol-shot of this church and convent. The
mud walls were levelled at the first discharge; and the
besiegers rushing through the opening, took the
batteries before the adjacent gates in reverse. Here
 General Mori, who had distinguished himself on many
former occasions, was made prisoner. The street of
St. Engracia, which they had thus entered, leads into
the Cozo, and the corner buildings where it thus
terminated, were on the one hand the convent of St.
Francisco, and on the other the General Hospital. Both
were stormed and set on fire; the sick and the
wounded threw themselves from the windows to
escape the flames, and the horror of the scene was
aggravated by the maniacs, whose voices raving or
singing in paroxysms of wilder madness, or crying in
vain to be set free, were heard amid the confusion of
dreadful sounds. Many fell victims to the fire, and
some to the indiscriminating fury of the assailants.
Those who escaped were conducted as prisoners to
the Torrero; but when their condition had been
discovered, they were sent back on the morrow, to
take their chance in the siege. After a severe contest
and dreadful carnage, the French forced their way
into the Cozo, in the very centre of the city, and,
before the day closed, were in possession of one half
of Zaragoza. Lefebvre now believed that he had
effected his purpose, and required Palafox to
surrender, in a note containing only these words:
10
“Head-quarters, St. Engracia. Capitulation !” The
heroic Spaniard immediately returned this reply:
11
“Head-quarters, Zaragoza. War at the knife’s point !”
War in the The contest which was now carried on is
streets. unexampled in history. One side of the Cozo, a street
about as wide as Pall-mall, was possessed by the
French; and, in the centre of it, their general, Verdier,
gave his orders from the Franciscan convent. The
opposite side was maintained by the Aragonese, who
threw up batteries at the openings of the cross
streets, within a few paces of those which the French
 erected against them. The intervening space was
presently heaped with dead, either slain upon the
spot, or thrown out from the windows. Next day the
August 5. ammunition of the citizens began to fail; ... the French
were expected every moment to renew their efforts
for completing the conquest, and even this
circumstance occasioned no dismay, nor did any one
think of capitulation. One cry was heard from the
people, wherever Palafox rode among them, that, if
powder failed, they were ready to attack the enemy
with their knives, ... formidable weapons in the hands
The city of desperate men. Just before the day closed, Don
receives a Francisco Palafox, the general’s brother, entered the
reinforcement. city with a convoy of arms, and ammunition, and a
reinforcement of three thousand men, composed of
Spanish guards, Swiss, and volunteers of Aragon, ... a
succour as little expected by the Zaragozans, as it had
been provided against by the enemy.
P. Santiago The war was now continued from street to street,
Sass. from house to house, and from room to room; pride
and indignation having wrought up the French to a
pitch of obstinate fury, little inferior to the devoted
courage of the patriots. During the whole siege, no
man distinguished himself more remarkably than the
curate of one of the parishes, within the walls, by
name P. Santiago Sass. He was always to be seen in
the streets, sometimes fighting with the most
determined bravery against the enemies, not of his
country alone, but of freedom, and of all virtuous
principles, wherever they were to be found; at other
times, administering the sacrament to the dying, and
confirming, with the authority of faith, that hope,
which gives to death, under such circumstances, the
joy, the exultation, the triumph, and the spirit of
martyrdom. Palafox reposed the utmost confidence in
 this brave priest, and selected him whenever any
thing peculiarly difficult or hazardous was to be done.
At the head of forty chosen men, he succeeded in
introducing a supply of powder into the town, so
essentially necessary for its defence.
This most obstinate and murderous contest was
continued for eleven successive days and nights, more
indeed by night than by day; for it was almost certain
death to appear by daylight within reach of those
houses which were occupied by the other party. But
under cover of the darkness, the combatants
frequently dashed across the street to attack each
other’s batteries; and the battles which began there,
were often carried on into the houses beyond, where
they fought from room to room, and floor to floor. The
hostile batteries were so near each other, that a
Spaniard in one place made way under cover of the
dead bodies, which completely filled the space
between them, and fastened a rope to one of the
French cannons; in the struggle which ensued, the
rope broke, and the Zaragozans lost their prize at the
very moment when they thought themselves sure of
12
it .
Number of the A new horror was added to the dreadful
dead. circumstances of war in this ever memorable siege. In
general engagements the dead are left upon the field
of battle, and the survivors remove to clear ground
and an untainted atmosphere; but here ... in Spain,
and in the month of August, there where the dead lay
the struggle was still carried on, and pestilence was
dreaded from the enormous accumulation of
putrifying bodies. Nothing in the whole course of the
siege so much embarrassed Palafox as this evil. The
only remedy was to tie ropes to the French prisoners,
 and push them forward amid the dead and dying, to
remove the bodies, and bring them away for
interment. Even for this necessary office there was no
truce, and it would have been certain death to the
Aragonese who should have attempted to perform it;
but the prisoners were in general secured by the pity
of their own soldiers, and in this manner the evil was,
in some degree, diminished.
Retreat of the A council of war was held by the Spaniards on the
enemy. 8th, not for the purpose which is too usual in such
councils, but that their heroic resolution might be
communicated with authority to the people. It was,
that in those quarters of the city where the Aragonese
still maintained their ground, they should continue to
defend themselves with the same firmness: should
the enemy at last prevail, they were then to retire
over the Ebro into the suburbs, break down the
bridge, and defend the suburbs till they perished.
When this resolution was made public, it was received
with the loudest acclamations. But in every conflict
the citizens now gained ground upon the soldiers,
winning it inch by inch, till the space occupied by the
enemy, which on the day of their entrance was nearly
half the city, was gradually reduced to about an eighth
part. Meantime, intelligence of the events in other
parts of Spain was received by the French, ... all
tending to dishearten them; the surrender of Dupont,
the failure of Moncey before Valencia, and the news
that the Junta of that province had dispatched six
thousand men to join the levies in Aragon, which were
destined to relieve Zaragoza. During the night of the
13th, their fire was particularly fierce and destructive;
after their batteries had ceased, flames burst out in
many parts of the buildings which they had won; their
last act was to blow up the church of St. Engracia; the
powder was placed in the subterranean church, ...
and this remarkable place, ... this monument of fraud
and of credulity, ... the splendid theatre wherein so
many feelings of deep devotion had been excited, ...
which so many thousands had visited in faith, and
from which unquestionably many had departed with
their imaginations elevated, their principles ennobled,
and their hearts strengthened, was laid in ruins. In
the morning the French columns, to the great surprise
of the Spaniards, were seen at a distance, retreating
over the plain, on the road to Pamplona.
The history of a battle, however skilfully narrated,
is necessarily uninteresting to all except military men;
but in the detail of a siege, when time has destroyed
those considerations, which prejudice or pervert our
natural sense of right and wrong, every reader
sympathizes with the besieged, and nothing, even in
fictitious narratives, excites so deep and animating an
interest. There is not, either in the annals of ancient
or of modern times, a single event recorded more
worthy to be held in admiration, now and for
evermore, than the siege of Zaragoza. Will it be said
that this devoted people obtained for themselves, by
all this heroism and all these sacrifices, nothing more
than a short respite from their fate? Woe be to the
slavish heart that conceives the thought, and shame
to the base tongue that gives it utterance! They
purchased for themselves an everlasting
remembrance upon earth, ... a place in the memory
and love of all good men in all ages that are yet to
come. They performed their duty; they redeemed
their souls from the yoke; they left an example to
their country, never to be forgotten, never to be out
of mind, and sure to contribute to and hasten its
deliverance.
 One of the first cares of Palafox, after the delivery
of the city, was, to establish a board of health to
provide against the effects of putrefaction, ... such
was the number of French who were left dead in the
houses and in the streets. Pamplona, whither the
wreck of their army retreated, was for many days
filled with carts full and horse-loads of wounded, who
arrived faster and in greater number than they could
be lodged in the hospitals and convents. It was
equally shocking to humanity to behold their
sufferings, and the cruel regardlessness of their
comrades, who, while these wretches were fainting
for want of assistance and of food, and literally dying
in the streets, were exposing their booty to sale, and
courting purchasers for church plate, watches, jewels,
linen, and apparel, the plunder which they had
collected in Navarre and Aragon; and which, in their
eagerness to convert into money, they were offering
at a small part of their value. There were, however,
scarcely any purchasers except for the church plate,
which was bought for the purpose of restoring it, at
the same cost, to the churches and monasteries from
whence it had been stolen.
The temper of the Zaragozans after their victory
was not less heroic than their conduct during the
struggle. It might have been expected that some
degree of exhaustion would have succeeded the state
of excitement to which they had been wrought; and
that the widowed, the childless, and they who were
left destitute, would now have lamented what they
had lost, or, at least, that they themselves had not
perished also. This, however, was not so. Mr. Vaughan
visited Zaragoza a little while after the siege, and
remained there during several weeks: he saw (they
are his own impressive words) “many a parent who
had lost his children, and many a man reduced from
competence to poverty, but he literally did not meet
with one human being who uttered the slightest
complaint: every feeling seemed to be swallowed up
in the memory of what they had recently done, and in
a just hatred of the French.” These are the effects of
patriotism, aided and strengthened by religion: its
influence, thus elevated and confirmed, made women
and boys efficient in the time of action, and the
streets of a city not less formidable to an invader than
the best constructed works of defence. Let not the
faith which animated the Aragonese be called
superstition, because our Lady of the Pillar, Santiago,
and St. Engracia, were its symbols. It was virtually
and essentially religion in its inward life and spirit; it
was the sense of what they owed equally to their
forefathers and their children; the knowledge that
their cause was as righteous as any for which an
injured and insulted people ever rose in arms; the
hope that by the blessing of God upon that cause they
might succeed; the certain faith that if they fell, it was
with the feeling, the motive, and the merit of
martyrdom. Life or death therefore became to the
Zaragozans only not indifferent, because life was
useful to the cause for which they held it in trust, and
were ready to lay it down: they who fell expired in
triumph, and the survivors rather envied than
regretted them. The living had no fears for
themselves, and for the same reason they could have
no sorrows for the dead. The whole greatness of our
nature was called forth, ... a power which had lain
dormant, and of which the possessors themselves had
not suspected the existence, till it manifested itself in
the hour of trial.
 When the dead were removed, and the ruins
sufficiently cleared, Ferdinand was proclaimed with all
August 20. the usual solemnities; a ceremony, at other times
attended with no other feeling than such as sports
and festivity occasion, now made affecting by the
situation of Ferdinand himself, and the scene which
surrounded the spectators; walls blackened with fire,
shattered with artillery, and stained with blood. The
August 25. obsequies of the Spaniards who had fallen were next
performed with military honours, and their funeral
oration pronounced from the pulpit. The brave priest
Santiago Sass was made chaplain to the commander
in chief, and Palafox gave him a captain’s commission.
These were times when the religion of Mattathias and
the Maccabees was required; and the priest of the
altar was in the exercise of his duty, when defending
it, sword in hand, in the field. A pension was settled
upon Augustina, and the daily pay of an artilleryman.
She was also to wear a small shield of honour
embroidered upon the sleeve of her gown, with
Zaragoza inscribed upon it. Tio Jorge was killed during
the siege. Other persons, who had distinguished
themselves, were rewarded; and the general reward
which Palafox conferred upon the Zaragozan people,
is strongly characteristic of Spanish feeling. By his
Sept. 20. own authority, and in the name of Ferdinand, he
conferred upon all the inhabitants of the city and its
districts, of both sexes and of all ranks, the perpetual
and irrevocable privilege of never being adjudged to
any disgraceful punishment by any tribunal for any
offence, except for treason or blasphemy.
 CHAPTER X.
INSURRECTION IN PORTUGAL.

1808. While these events were passing in Spain, Portugal

May. also was convulsed by this political earthquake. The
first insurrection in Madrid had been no sooner known
An agent sent at Badajoz, than an anonymous proclamation from
from Badajoz
to the that city was circulated on the Portugueze border; and
Spaniards at a lieutenant of the Walloon Guards, by name Moretti,
Lisbon. was sent to consult at Lisbon with General Carraffa
upon the means of withdrawing the Spanish troops.
Neves, t. iii. 7. Carraffa thought it too hazardous to declare himself at
that time; but though in other respect acting
altogether in subservience to Junot, he did not make
him acquainted with the transaction, and Moretti
returned in safety.
Difficulties of Junot was now disturbed from his dreams of
Junot’s royalty; yet his head lay as uneasily as if it had worn a
situation. crown. Like the other French commanders, when the
insurrectionary movement became general throughout
Spain, he thought it impossible that any continued or
formidable resistance could be opposed to the power
of France: but his own situation was exposed to
peculiar danger; he was farther removed from
assistance than any of the other commanders in the
Peninsula; there was an English squadron in sight,
watching the course of events, and in defiance of all
his vigilance, well informed of whatever was going on;
 and it was not to be doubted, that if a favourable
opportunity offered, Great Britain would make an
effort for the deliverance of Portugal. Pursuant to his
instructions from Madrid, he had sent into Galicia the
remains of Taranco’s division, so that Carraffa’s was
now the only one which remained; some 4000 of
these were at Porto, the rest were in detachments at
Lisbon, Mafra, Santarem, and on the other side the
Neves, iii. 66. Tagus at Setubal, Cezimbra, and other places. In the
hope of exciting a national feeling against them, and
thereby counteracting that sympathy which their
common language, manners, and religion, and now a
sense of their common interest, were producing
between them and the Portugueze, rumours were
spread, that by an arrangement made with
Buonaparte, Portugal was to be governed by Spain till
its fate should be determined at a general peace. But
this artifice failed. The Spaniards were not to be
deceived; from the time when they knew that
Ferdinand had been inveigled to Bayonne, there was
an end of all good understanding between them and
the French; and they were so ready to engage in
personal quarrels, from the national indignation which
possessed them, that it was found necessary to
confine them to their quarters at an early hour in the
evening. Care was taken to divide them into small
detachments, and station every where with them a
superior number of French. Many deserted, especially
of those who were quartered beyond the Tagus. Some
made their way to the Spanish frontiers in strong
parties. The regiment of Murcia marched for Spain in
a body, in defiance of its colonel; a detachment of 600
French was sent from Lisbon to intercept them; they
Neves, iii. 67. met at Os Pegoens; this was a case in which
individual strength and determination were of more
avail than military discipline; the Spaniards were
Observador victorious, and proceeded on their way, receiving the
Portuguez, utmost kindness from the people, and nearly two
287. hundred wounded French were landed at Lisbon.
Kellermann Badajoz was the point to which the Spaniards
takes the repaired from Alem-Tejo and the south of Portugal,
command in and the numbers who were collected there made such
Alem-Tejo.
an addition to the strength of the garrison, that
General Kellermann, who was then at Elvas, felt
himself ill at ease in the neighbourhood. That general
had taken the command in Alem-Tejo upon Solano’s
departure, and so different was the spirit of his
administration, that one of his first measures was by
his own authority to impose an extraordinary
contribution upon the exhausted province. Evora was
to pay 10,000 cruzados novos, Elvas and Portalegre
8000 each, Villa-Viçosa 6000, and other places in
proportion. The sum was exacted within six hours
Observador after the demand: but it was restored without delay,
Portuguez, p. in consequence of peremptory orders from Junot,
277. when complaint was made to him of this unauthorized
exaction. He was displeased with Kellermann for
presuming to levy money at his own pleasure, and
this was no time for exasperating the people by
farther acts of oppression. Already they were in so
perturbed a state, that it was deemed expedient to
May 22. order all absent bishops and beneficed priests to
return to their dioceses and cures, and there exert
themselves in preserving order, and exhorting the
people to submission. Buonaparte had reckoned upon
the good services of the clergy; experience, he said,
had shown him that countries where there were many
friars were easily conquered; ... he was undeceived of
both errors in the Peninsula.
He attempts to In the hope of reviving old animosities, and
conciliate the exciting the Portugueze to act against the Spaniards,
Spaniards at Kellermann called out the Ordenanças, and required
Badajoz. the people of Elvas to take arms for the defence of
their city, which, he said, the Spaniards, eternal
enemies to the name and independence of Portugal,
were preparing to attack from Badajoz. At the same
June 1. time he sent a letter to the Spaniards of that place,
exhorting them to return to their duty, and promising
intercession, and pardon and protection. No answer
was returned; he then put forth an argumentative
address to the Commandant and the Representatives
of Extremadura, asking them what end they could
propose to themselves from the revolt in which they
had blindly engaged? The House of Bourbon had
renounced all its rights to Spain; Ferdinand was in
France, and the right of appointing a king for the
Spaniards had been transferred to the Emperor. Did
1808. they wish to draw upon themselves the evils by which
June. France had been ravaged during so many years? If
that country had come with glory out of a struggle
which would for ever be celebrated, it was owing to
her internal strength, her valour, and above all the
talents of that extraordinary man whom Heaven had
sent to reign over her, for her happiness, and for the
happiness of the Spaniards also, if they chose it.
Could they expect a like issue? Would valour alone
suffice to effect it? What was their position? Half
Spain had declared for the new order of things. Their
own countrymen would take the field against them.
The French armies were in the midst of the land,
under the greatest generals, without enemies, and
abundantly supplied with all the means of war. On
their part they had only some soldiers who had
murdered their chiefs; a populace vain of their own
strength, because they had met with no resistance;
and a few miserable English, the eternal artists of
discord, active in stirring up enemies to the French,
 and always ready, like cowards, to abandon the
victims of their infernal policy. Nor was there any
thing in the change which had taken place to provoke
their opposition. At the commencement of the
preceding century Spain had called Philip V. to the
throne, for the purpose of establishing an invariable
Observador union with France. The establishment upon that
Portuguez, throne of a prince of the new French dynasty was
288. nothing more than a consequence of the system
which Spain had then adopted, and which was now
confirmed. There was yet time to choose. The sword
was not yet drawn, the door was still open for
reconciliation, ... and he requested that they would
not close the gate of their city against his
communications. To this also no answer was
vouchsafed. He made a third effort, telling them that
he would suspend hostilities till they should be better
informed, and desiring the Junta to meet him at the
Caya, the little stream which there divides the
kingdoms. No persons were there to meet him; and
he then began to store the forts of Elvas, and to
devise plans for attacking Badajoz, expecting, no
doubt, that some of the troops in Spain would be
ordered upon that service. Believing too that fêtes
and rejoicings would have as much effect in Portugal
as in France, he appointed a day of public
thanksgiving for the benefits which Napoleon had
promised to confer upon the Portugueze. They were
not a people to be thus deceived. Their hearts were
with the Spaniards, and so many repaired to Badajoz,
where D. Joseph Galluzo, with great activity, was
forming a camp, that they were incorporated in a
legion of foreign volunteers, the command of which
was given to Moretti. Many artillerymen escaped
thither from Elvas; some hundred of the Portugueze
troops whom the French had ordered away for foreign
Neves, iii. 75. consumption, had been collected there; promotion
was offered to all officers of that nation who should
join them, and Kellermann’s vigilance could not
prevent the emigration which took place in
consequence.
Distribution of A considerable garrison was required in Elvas, as
the French being the strongest fortress in the kingdom, and now
troops in of more importance because of the hostile attitude
Portugal.
which the Spaniards at Badajoz had assumed. Strong
garrisons were placed at Peniche and Setubal, for fear
of the English. Almeida also had been occupied by the
Neves, iii. 77. French. Except the troops in that place there were no
other French in the whole north of Portugal than the
small parties stationed upon the military road, a weak
detachment at Figueira, and some fifty men at
Coimbra. The great body of the French was collected
at Lisbon, and in the adjacent country, where, in case
of sudden danger, they might be brought to act
The Spaniards promptly and with effect. Porto was in possession of
at Porto declare the Spaniards, who had occupied it by virtue of the
against the secret treaty of Fontainebleau. General Bellesta,
Intruder, and however, upon whom the command had devolved,
march into
had been placed under the orders of the French
Spain.
General Quesnel, when the abortive kingdom of
Northern Lusitania was no longer held out as a lure to
the court of Spain. Quesnel had with him about
seventy dragoons, and a few other French, holding
military or civil situations. When news arrived of the
movements in Gallicia, Bellesta, obeying without
hesitation the voice of his country, arrested the
June 6. French and their general, and convoking the military,
judicial, and civil authorities, explained to them briefly
the situation of affairs, expressed a hope that Junot
would by that time have been seized in Lisbon, as
Quesnel was in Porto, and asked of them what course
 they would pursue, ... whether they would restore the
national government, choose a Spanish one, or
remain in submission to the French? The Vereador,
Thomas da Silva Ferras, replied, that he, and the
chamber, and the city, desired nothing more than to
be under the government of their lawful sovereign,
and required that the royal arms might immediately
be re-established. A Desembargador ventured to
observe, that they had no authority to determine such
things, not being representatives of the people; that
they were without arms, ... that they had no means of
resisting so terrible an enemy as the French; and that
it was better to wait till they knew what had
happened at Lisbon. Reasonable as the fear was
which this speaker expressed, a more generous
feeling prevailed, and by Bellesta’s orders the
Sargento Mor, Raymundo José Pinheiro, went from
Neves, iii. c. the meeting to take the command of the fortress of S.
6. Joam da Foz, at the mouth of the Douro.
The lawful It was late at night when the meeting broke up.
government Raymundo called together his officers; they bound
restored at themselves by a formal deed and solemn oath to act
Porto.
for the service of their lawful Prince against the
French, and invoking the aid of Our Lady of the
Rosary, to whom that castle was dedicated, vowed in
the Prince’s name to solemnize the anniversary of that
day by a festival to her honour. At daybreak the
Quinas were once more seen flying upon the fortress,
a royal salute was fired, and returned from the castles
of Queijo and Matozinhos, the bells were rung,
rockets were discharged, and the people gave
themselves up to joy. The Spaniards without delay
marched for Coruña, taking with them their prisoners.
An English brig of war, which was cruising off the
river, hearing an unusual stir in the city, drew near in
 hopes of ascertaining the cause; Raymundo went on
board, he was received with due honours, and an
Neves, iii. 85– officer returned to shore with him, and was sent to
91. Luiz de Oliveira da Costa, who commanded at Porto
during the absence of General Bernardim Freire de
Andrada.
The governor Luiz de Oliveira had been present at the meeting
adheres to the which Bellesta convened, and assented to the
French, and resolution which had there been taken. Whether his
suppresses the
heart was with his voice on that occasion, or whether
insurrection.
he had submitted to the prevailing opinion only while
it was dangerous to oppose it, the fear of the French
returned upon him, now that the Spaniards had left
Porto to its own means of defence; and instead of
receiving the English officer with open arms, he wrote
to Raymundo, calling him to account for having
opened a communication with the English brig, and
saying that he knew nothing of the business.
Raymundo replied with great spirit, that if the
governor had forgotten what passed when the
government of the Prince Regent was re-established,
he had not; he and his officers had proclaimed their
beloved Sovereign, he had invited the English
commander, in the Prince’s name, to assist him; and if
any person disputed the propriety of what he had
done, he would make that person know what the
power of the royal name was, and that that port was
open for the English. Raymundo’s means, however,
were not commensurate with his will; the people of
Porto were disheartened by the departure of the
Spaniards, and the city remained to all appearance in
perfect submission to the French government, while
the Portugueze flag was flying at S. Joam da Foz. A
lieutenant-colonel, by name Manoel Ribeiro de Araujo,
now presented himself in that fortress with an order
 from Oliveira to take the command. Raymundo told
him, that if it were taken for the service of the Prince,
he was ready to resign it into his hands; but if it were
his intention to follow the French part, he might
return to the place from whence he came, for within
those walls no other name should be acknowledged
than that of the lawful sovereign, and not a shot
should be fired from them against the English. Araujo
returned in the evening with fair words, and invited
Raymundo to the governor’s house, there to confer
with him upon the best mode of proceeding in the
present critical circumstances. The treacherous
invitation was accepted, and he had no sooner set
foot within Oliveira’s apartment than he was arrested
as a disturber of the people. The next step would
have been to deliver him up to the French, and to
certain death; but though he had with strange want of
circumspection walked into the snare, neither his
courage nor his presence of mind forsook him.
Oliveira, with Araujo and another officer, went out into
Neves, iii. 91– the varanda to give directions concerning him;
97. Raymundo, who was left alone in the apartment,
quietly locked the varanda door, and lost no time in
gaining a place of concealment.
Junot disarms Bellesta had left a letter for Junot, which the
and seizes the Chamber of Porto, as soon as his departure left them
Spaniards at to the sense of their own weakness, dispatched to
Lisbon.
Lisbon, with assurance of their continued submission
to the French. The news reached him at the close of
an entertainment given by the French officers at the
theatre, where, though the Russian admiral and his
officers were present, the portrait of Buonaparte was
displayed, with the Russian flag lying among other
Observador trophies at his feet. A sense of insecurity was
Portuguez, manifested amid their festivities; the avenues to the
292. theatre were occupied by armed troops, fire engines
were made ready, and all the watermen were ordered
to be at hand with their barrels full. The
entertainment continued till four in the morning, and
immediately afterward movements were observed
which indicated that some important intelligence had
arrived; couriers were sent off, troops crossed the
Tagus, and detachments marched to Mafra, Santarem,
and other places. A body of Spaniards who were
stationed in the Campo de Ourique were ordered to
the Convent of S. Francisco da Cidade, an unfinished
pile of enormous magnitude, which the French
occupied as barracks, and where a thousand men
were waiting to disarm them as soon as they should
Observador enter. The Spaniards, when they drew nigh, suspected
Portuguez, some ill design, and fixing their bayonets, declared
295. they would not be quartered there. They were
allowed to return without interruption; and in the
evening they and their countrymen at Val de Pereiro,
being in all 1200, were ordered to assemble at two in
the morning, in the Terreiro do Paço, there to embark
and cross the river on their way to Spain. Thither they
repaired joyfully, and found 3000 troops awaiting
them, with cannon placed under the arcades of that
great square, and at the mouths of the streets which
open into it; and they were summoned to lay down
their arms and baggage, and surrender. In the course
of that and the succeeding day, the Spaniards from
Mafra and other parts were brought in as prisoners, in
a condition which excited the compassion of the
people, their women exhausted with the fatigue of
marching in the burning heat of summer, some
carrying children at the breast, and some, who were
unable to walk, tied upon the baggage carts, lest they
should be thrown off. The whole number of Spaniards
thus arrested was somewhat above 4500; they were
 confined in hulks upon the Tagus. The officers were
left at liberty upon their parole; but after a few days,
when several had broken an engagement, which,
considering the manner in which they had been
seized, they did not think themselves bound in honour
to observe, they were placed under the same
confinement as the men. Junot then informed his
army, in public orders, that the infamous conduct of
the Spanish General Bellesta, the revolt of two
regiments, the arrest of some of his officers at
Badajoz and at Ciudad Rodrigo, and the inability of
the Spanish commanders to control their men, had
compelled him to this severe measure. Happily it had
been executed without shedding blood. These
Spaniards were not enemies; they should receive pay
and provisions as heretofore, and their actual
situation in no degree altered his good disposition
Neves, iii. 99- toward them. He expressed his satisfaction at the
109. conduct of his soldiers; and said, that if the English
Observador thought proper to make an attack, they were now
Portuguez, fully at leisure to receive them.
300.
He addressed a proclamation also to the
Junot’s
proclamation to Portugueze, wherein with incautious effrontery he
the Portugueze. avowed the double treachery which had been
practised upon them and upon the Spaniards. After
June 11. six months of tranquillity, he said, the peace of the
kingdom had been in danger of being disturbed by
the Spanish troops, who entered the country
apparently as allies, but in reality with the intention of
dismembering it. No sooner had he in the Emperor’s
name taken possession of the whole government,
than they had begun to show their dissent: and at
length their conduct at Porto, and in other places, had
compelled him to disarm all who were within his
reach. “Portugueze,” he continued, “I have hitherto
Welcome to Our Bookstore - The Ultimate Destination for Book Lovers
Are you passionate about books and eager to explore new worlds of
knowledge? At our website, we offer a vast collection of books that
cater to every interest and age group. From classic literature to
specialized publications, self-help books, and children’s stories, we
have it all! Each book is a gateway to new adventures, helping you
expand your knowledge and nourish your soul
Experience Convenient and Enjoyable Book Shopping Our website is more
than just an online bookstore—it’s a bridge connecting readers to the
timeless values of culture and wisdom. With a sleek and user-friendly
interface and a smart search system, you can find your favorite books
quickly and easily. Enjoy special promotions, fast home delivery, and
a seamless shopping experience that saves you time and enhances your
love for reading.
Let us accompany you on the journey of exploring knowledge and
personal growth!

ebookgate.com