IntroductionWelcome| 00:03 | Hi I'm Joe Marini and I would like
to welcome you to jQuery Mobile
| | 00:07 | Essential Training.
| | 00:08 | In this title we will see how to use
jQuery Mobile to build visually rich,
| | 00:12 | engaging, and highly optimized mobile
webpages that work well across a wide
| | 00:17 | variety of today's modern
smartphones and tablet devices.
| | 00:20 | We will start off by examining how
jQuery Mobile webpages are constructed and
| | 00:24 | how the framework provides powerful
enhancements such a smooth page transitions
| | 00:28 | and pop-up dialogs that look
almost like native applications.
| | 00:32 | Next, we'll see how to use jQuery
Mobile's built-in set of mobile-optimized
| | 00:36 | user interface widgets and CSS3-based
themeing architecture to build content,
| | 00:42 | web forms, and list views that are
optimized for mobile screen sizes and form factors.
| | 00:47 | Then we will take a look at how
jQuery Mobile provides support for handling
| | 00:51 | common mobile events such as touch
gestures and changes in device orientation
| | 00:56 | just like native apps.
| | 00:58 | If you're ready to build mobile web
applications that work across a large number
| | 01:02 | of popular devices without having to
learn or write a single line of native
| | 01:06 | application code then let's get started
with jQuery Mobile Essential Training.
| | Collapse this transcript |
| What you should already know| 00:00 | Before we get started building jQuery
Mobile applications let's cover some of
| | 00:04 | the things that you should already know.
| | 00:06 | JQuery Mobile is a development
framework for building mobile web applications,
| | 00:11 | now that implies several things.
| | 00:13 | First, since we are working with the web,
you're going to need to know HTML and CSS.
| | 00:18 | You are also going to need to know
JavaScript, because applications implies
| | 00:22 | logic and JavaScript is how you
add logic to your web applications.
| | 00:27 | So HTML, CSS, and JavaScript are some
pretty fundamental technologies you're
| | 00:32 | going to need to have a good
understanding of in order to use this course.
| | 00:36 | You should also be familiar with the
fundamentals of mobile web development.
| | 00:41 | You should be familiar with things
like what viewports are and small screen
| | 00:45 | size design and so on.
| | 00:47 | The last thing you're going to need to
know is jQuery itself, because JQuery
| | 00:51 | Mobile is not a standalone library.
| | 00:54 | It's actually built on top of the
jQuery library and it requires the JQuery
| | 00:59 | library in order to run.
| | 01:00 | So you're going to need to be familiar with
all the things you see here in the gray boxes.
| | 01:05 | Now the good news is, if you aren't yet
already familiar with the things in the
| | 01:09 | gray boxes than there are plenty of
great titles here on lynda.com where you
| | 01:14 | can learn about this stuff and we'll
take a look at those in a moment, but the
| | 01:17 | idea here is that JQuery Mobile is the
pinnacle here of some other technologies
| | 01:21 | that you're going to need to have a good
working knowledge of in order to use this course.
| | 01:26 | So let's take a look at what you're
going to need in order to build the
| | 01:29 | applications we will be
looking at here in this course.
| | 01:32 | First, you're going to need the
current version of the JQuery library itself.
| | 01:37 | Now you can get the current
version by going to jquery.com.
| | 01:40 | I'm going to be using the 1.6.4 version
in this course, but whatever the current
| | 01:45 | version is by the time you
get there it should be fine.
| | 01:47 | You're also going to need the current
version of the jQuery Mobile library,
| | 01:51 | because as I mentioned before jQuery
Mobile is built on top of jQuery and you're
| | 01:55 | going to need both of them.
| | 01:57 | Now you're also going to need a
development tool like a text editor or an IDE.
| | 02:00 | It doesn't matter which one you use.
| | 02:02 | You can use your favorite for
whatever platform you're using.
| | 02:04 | You can use TextWrangler on the Mac or
TextPad on Windows or commercial tool
| | 02:09 | like Dreamweaver or free
software tool like Aptana Studio.
| | 02:12 | It doesn't really matter.
| | 02:13 | All you're going to need is something that
can edit HTML, CSS, and JavaScript files.
| | 02:18 | Now I'm going to be using Aptana
Studio in this course, because it's free and
| | 02:22 | it's cross-platform, but it
doesn't matter which one you use.
| | 02:25 | Just use whatever is your favorite.
| | 02:27 | You're also going to need a web server
and you can use either a local one or a
| | 02:32 | remote one to test your pages on, and
the reason why you're going to need a web
| | 02:36 | server is because jQuery Mobile makes
heavy use of AJAX to load and dynamically
| | 02:43 | display information to the user on
their mobile device. And in order to do that
| | 02:48 | you're going to need a web server.
| | 02:49 | You can't just simply double-click the
HTML file in the desktop or the folder
| | 02:54 | that you're looking at and
just run it in the Browser
| | 02:57 | Now for some pages you will be able to
do that just to test layout, but to see
| | 03:01 | the true interactivity and to take
advantage of all of jQuery Mobile's features,
| | 03:05 | you will need a web server.
| | 03:07 | So let's jump over to the Browser
really quick and review some of the things
| | 03:11 | that you're going to be using in this course.
| | 03:13 | So here is the website for jQuery
Mobile and this is where you will get jQuery
| | 03:17 | Mobile from and we will cover that a little bit.
| | 03:20 | This is the jquery.com website
where you will get jQuery from.
| | 03:23 | I am going to be using Aptana
Studio 3 which is a free IDE that you can
| | 03:29 | download from aptana.com, but again
you can use whatever IDE or text editing
| | 03:35 | tool that you like.
| | 03:37 | Now let's take a look at some of the
other courses that are related to this
| | 03:40 | one here on lynda.com.
| | 03:42 | If you need a refresher course on HTML
and XHTML and so on, you can take a look
| | 03:46 | at XHTML and HTML Essential Training.
| | 03:49 | This is a course that
covers the fundamentals of HTML.
| | 03:52 | If you need a refresher course or if
you're new to JavaScript, you're going to
| | 03:55 | want to watch JavaScript Essential
Training and this is a really great course
| | 03:58 | for getting up and running with
JavaScript, because JavaScript is an essential
| | 04:03 | logic provider on the web.
| | 04:05 | This is where you will build
all your application logic.
| | 04:07 | For mobile-related web design
you can watch Mobile Web Design and
| | 04:12 | Development Fundamentals, which I
recorded, and if I do say so myself it's a
| | 04:15 | pretty great course.
| | 04:16 | And if you scroll down here you'll
see that there are places where in the
| | 04:20 | setting up a development environment it
shows you how to set up a local web server.
| | 04:24 | So if you are not familiar with
setting up a local web server you can watch
| | 04:27 | this course to learn how to do that
and you can also watch Installing Apache,
| | 04:31 | MySQL, and PHP, because this also shows
you how to set up a local web server if
| | 04:36 | you're not using IIS.
| | 04:37 | It will show you how to set up
Apache on Windows, on Macintosh and so on.
| | 04:41 | You don't have to watch the whole
thing, because it covers MySQL and PHP as
| | 04:45 | well, but you're going to want to watch
the parts on installing the web server part.
| | 04:49 | That's going to be the most important part.
| | 04:50 | So these are the things that you will
need to be familiar with in order to
| | 04:53 | complete the exercises in this course
and to learn about using jQuery Mobile.
| | 04:58 | So once we've got all that squared away
we can get started with the rest of the
| | 05:01 | course and building our applications.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Just a quick word on using the exercise files.
| | 00:02 | Now if you are a premium member of the
lynda.com Online Training Library or if
| | 00:08 | you're watching this tutorial on a DVD-
ROM, then you have access to the Exercise
| | 00:12 | Files used throughout this course.
| | 00:15 | The way that I've laid it out is
inside the Exercise Files you will find
| | 00:18 | folders that correspond to each of
the chapters that are in this title.
| | 00:23 | So let's take a look inside one of them.
| | 00:24 | So here inside Ch_2 for example you
can see that I've laid out several of the
| | 00:29 | exercise files for each particular
example and there are two versions of each
| | 00:34 | file, there is the start version of the
file, which is the version that does not
| | 00:39 | have any of the exercise completed and
then there is the finished version of the
| | 00:44 | file, which is the complete finished
version that you can run locally in your
| | 00:48 | browser to see how it works.
| | 00:51 | Now if you want to follow along with
me as we go through the course in one of
| | 00:55 | the exercises, you can start by
opening up the start version of the file and
| | 00:59 | then follow along with me as I add the
code to the start version to arrive at
| | 01:04 | the finished version.
| | 01:05 | If you would rather not wait just go
ahead and open up the finished version and
| | 01:08 | see the code and see how it works.
| | 01:10 | Let's go back to the root
level of ExerciseFiles folder.
| | 01:13 | You'll also notice that I've included
a file here called ExampleSnippets.txt.
| | 01:17 | This is all of the code snippets that
I'm going to be using to complete each one
| | 01:21 | of the exercises, because it's
probably not very fun watching me type code.
| | 01:26 | What I am going to be doing is
copying and pasting the code from these
| | 01:30 | examples into the start version of
each of the example files in order to
| | 01:35 | arrive at the finished version.
| | 01:37 | Now even if you are not a premium
member of the Online Training Library or you
| | 01:41 | don't have a DVD-ROM, this file will
still be available to you to download.
| | 01:46 | So even if you don't have the Exercise
Files you'll still be able to get this content.
| | 01:50 | If you're a monthly member or an annual
member of lynda.com then you don't have
| | 01:55 | the Exercise Files, but you can follow
along from scratch with your own assets
| | 01:59 | and you can use the code that I'm using in the
ExampleSnippets.txt to build your own examples.
| | 02:04 | So having said all that, let's get started.
| | Collapse this transcript |
|
|
1. Introduction to jQuery MobileWhat is jQuery Mobile?| 00:00 | So what is jQuery Mobile?
| | 00:02 | jQuery Mobile is a JavaScript library
that provides a cross-platform way for
| | 00:07 | creating mobile web applications.
| | 00:10 | Now this is not in native
applications, these are for mobile web apps.
| | 00:14 | It's built on top of the jQuery
library which is extremely popular.
| | 00:18 | It's the most popular JavaScript Library
out there today and it's built on top of it.
| | 00:23 | So if you already know jQuery itself,
then you should be very comfortable using
| | 00:28 | the jQuery Mobile library.
| | 00:30 | Now it relies heavily on a lot of
existing web technologies like HTML5 and CSS3,
| | 00:36 | JavaScript, and AJAX.
| | 00:37 | So pretty much that's a lot of
buzzword lingo right there, but these are the
| | 00:42 | things that jQuery Mobile uses
in order to accomplish its work.
| | 00:46 | JQuery Mobile when it loads it
automatically enhances your webpages with a
| | 00:51 | consistent look across a variety of
mobile web platforms, everything from iOS to
| | 00:57 | Android to Windows Phone to Blackberry,
it provides you mobile webpages with a
| | 01:03 | consistent look and feel, a consistent
way of behaving, a consistent set of user
| | 01:09 | interface widgets and so on to build
web applications that work the same way
| | 01:14 | across a variety of mobile devices.
| | 01:17 | So why would you use jQuery Mobile?
| | 01:19 | Well, let's imagine that you wanted
to build applications that work across
| | 01:23 | today's most popular mobile platforms
like iOS, Android, Blackberry, Windows
| | 01:28 | Phones, Symbian, and there are others,
but these are the most popular ones.
| | 01:31 | Well, you've basically got two choices
available to you, you can either build a
| | 01:35 | native application or you
can build a web application.
| | 01:39 | Now if you want to build a native
application then you're going to have to learn
| | 01:41 | a whole bunch of technologies that are
different across the different platforms.
| | 01:46 | So for example, on iOS you will
have to learn Objective-C and Cocoa.
| | 01:50 | For Android and Blackberry
you will have to learn Java.
| | 01:52 | For Windows Phone you have to know C# and .NET.
| | 01:55 | For Symbian you will have to learn
either Qt or C++ or Java and even in the
| | 02:01 | cases where the underlying technology
is the same like Java for Android and
| | 02:05 | Blackberry, the APIs are actually different.
| | 02:08 | So the functions that you called to
do things on those platforms are not
| | 02:13 | going to be the same.
| | 02:14 | The way that an Android device stores
data for example is probably going to be a
| | 02:18 | different function call than it is on
Blackberry even though it uses the same
| | 02:22 | underlying programming language.
| | 02:24 | Now Web applications help to solve a
lot of this problem, because you only have
| | 02:28 | to learn HTML, CSS, and JavaScript.
| | 02:31 | The main drawback to web applications
is that you don't have access to a lot of
| | 02:35 | the underlying native
capabilities that a device might provide.
| | 02:40 | So for example, a web application may
or may not be able to use the device's
| | 02:45 | microphone for example or the
camera or access the contact list.
| | 02:50 | Now those problems are being addressed
by the device makers, but there's always
| | 02:54 | going to be some
inconsistencies among the various platforms.
| | 02:58 | So by building a web application
using jQuery Mobile you can in many cases
| | 03:03 | achieve a lot of the same
functionality and features across a variety of
| | 03:06 | platforms by only learning the
underlying technologies of the web rather than
| | 03:11 | having to focus on the
proprietary APIs for each of the devices.
| | 03:15 | Okay, so let's jump over to the jQuery
Mobile Gallery so you can get an idea of
| | 03:20 | what you can actually do with jQuery Mobile.
| | 03:21 | So here in the browser I've gone to
jqmgallery.com and this is a pretty good
| | 03:26 | gallery of the existing mobile sites
and applications that are available that
| | 03:30 | are using jQuery Mobile today, and you
can see if you scroll down a little bit
| | 03:34 | there is a whole bunch of categories
over here on the right side, there is
| | 03:36 | Business, Education so on and so forth.
| | 03:39 | And if we scroll down you can see that
there are some screenshots of various
| | 03:43 | websites that are using jQuery Mobile today.
| | 03:46 | Here is one, this is a company called
Box.net, they provide a file-sharing
| | 03:50 | service that lets people
share files across platforms.
| | 03:53 | There's another one down here.
| | 03:54 | This one is one of my personal favorites.
| | 03:55 | It's Chukar Cherries.
| | 03:57 | These guys are a cherry farm
located up in Seattle near where I live.
| | 04:01 | But you can see that basically each
one of these sites looks pretty good when
| | 04:05 | laid out on a mobile device and
it's using a common set of UI widgets.
| | 04:09 | So for example, here you can see this
list with these right-facing arrows, over
| | 04:14 | here the same idea, list
with the right-facing arrows.
| | 04:18 | All of these are achieved by using
the jQuery Mobile built-in UI widgets.
| | 04:23 | Here is the same thing.
| | 04:24 | So you're going to have a pretty
consistent look and feel across a variety of
| | 04:27 | websites by using jQuery Mobile. All right.
| | 04:31 | So that's what jQuery Mobile is,
let's take a look at jQuery Mobile's
| | 04:34 | features next.
| | Collapse this transcript |
| Overview of features| 00:00 | Let's look at the features or at
least some of the features that jQuery
| | 00:04 | Mobile provides when you build your web
applications based on the jQuery Mobile framework.
| | 00:10 | So here I am on jquerymobile.com and
what I am going to do first is just scroll
| | 00:15 | down and you can see that jQuery
Mobile provides support for a lot of the
| | 00:19 | platforms that are popular in marketplace today.
| | 00:21 | Of course, iOS and Android and
this BlackBerry, Windows Phone, WebOS,
| | 00:26 | Symbian, MeeGo, Bada.
| | 00:28 | So I'll get a little bit more into that in
a moment, but take a look at the UI widgets.
| | 00:32 | These are the kinds of things that
you'll be able to take advantage of in your
| | 00:35 | jQuery Mobile based applications
just by using standard HTML5 markup.
| | 00:40 | In order to get these kinds of look
and feel in your applications, you won't
| | 00:44 | need to do anything special.
| | 00:45 | No social programming, no
special CSS, it's all provided for you.
| | 00:49 | Now unlike jQuery, where you have to
download a separate UI library like
| | 00:54 | jQueryUI, or one of the other publicly
available ones, the jQuery Mobile Library
| | 01:00 | provides the mobile widgets built-in for you.
| | 01:03 | So it's all provided in one library.
| | 01:04 | There is nothing separate to
download, other than jQuery itself.
| | 01:06 | So let's go back up until the top here.
| | 01:09 | Now I am going to click on the Docs
link, and this will take me to the
| | 01:14 | documentation for jQuery Mobile, and
the first thing you notice is that the
| | 01:18 | layout and the UI widgets that are
being used here in the documentation are
| | 01:23 | pretty much some of the same ones
that we saw in the jQuery Mobile gallery
| | 01:28 | that were being used by the applications
that are built on top of jQuery Mobile.
| | 01:32 | You may probably have also noticed
that I am using the Safari browser and the
| | 01:35 | reason I'm using Safari browser is
because the Safari browser is the most
| | 01:39 | popular mobile browser that's
available in the market today.
| | 01:44 | It's available on the iPhone, the iPad.
| | 01:46 | So I want to use the same rendering
engine that my jQuery Mobile applications
| | 01:51 | are going to be running
into out in the marketplace.
| | 01:55 | So the next thing I want to quickly
show you is if I zoom out from the browser
| | 01:58 | window, let's take a look at what
happens when I change the size of the window.
| | 02:03 | So here I've got a wide window which
is pretty similar to the width of a say
| | 02:08 | a tablet device in landscape mode, but when
I size the window down, watch what happens.
| | 02:13 | Notice how the layout goes from being
optimized for a landscape orientation,
| | 02:17 | down to a vertical one, like
you might find on most phones.
| | 02:21 | So jQuery mobile is detecting this for
me, and relaying the page out to look
| | 02:27 | good on a vertical screen like a phone,
or on a tablet device, like say an iPad
| | 02:34 | or a Samsung Galaxy or anyone of
the other popular tablets out there.
| | 02:38 | So just by using the jQuery Mobile
Library, I am getting a layout that's
| | 02:42 | optimized for the screen width.
| | 02:44 | Let's go back and take a
look at the supported platforms.
| | 02:48 | The supported platforms in 1.0, and
right now I'm using the Release Candidate
| | 02:53 | 2 version, (RC2), but by the time
you get here this will probably be a
| | 02:55 | released version of library.
| | 02:57 | They're currently at Feature Complete,
so the features wouldn't have changed by
| | 03:00 | the time you get here, but just for
sake of completeness, I am using RC2.
| | 03:05 | So if we scroll down, one of the
things you will notice that they've graded
| | 03:08 | their browser support into A grade
browsers and B, and C grade and so on.
| | 03:13 | The A grade browsers are
the most important ones.
| | 03:16 | These are the browsers that get the
full mobile enhanced experience with Ajax
| | 03:20 | based page loading, and
animated page transitions, and so on.
| | 03:24 | You can see the list is pretty long,
and of course, Apple iOS and Android is
| | 03:27 | on there along with Honeycomb, Windows Phone,
and bunch of other modern mobile phones.
| | 03:31 | The next level down is the B grade
browsers, and these are the browsers that get
| | 03:35 | the enhanced mobile appearance, but they
don't get the Ajax navigation features,
| | 03:40 | and I will get to that in a little bit,
but that that's the main difference.
| | 03:42 | But the important thing to notice is
that under the A grade browsers, these are
| | 03:46 | the most common devices that your
web applications will be run on.
| | 03:50 | So they will get a really great
experience if they are using jQuery Mobile.
| | 03:53 | Let's go back up here.
| | 03:56 | I also want to quickly point out the
accessibility features. Because jQuery
| | 03:59 | Mobile is being built on standard
HTML5 and CSS3, it's going to get a couple
| | 04:05 | features accessibility wise that are
based on the W3C's WAI-ARIA specification.
| | 04:12 | Things like focus management
and keyboard navigation and so on.
| | 04:16 | Your mobile web applications will
be able to take advantage of these
| | 04:19 | features without having to do any special
work and as jQuery Mobile improves in this area
| | 04:24 | your web applications will just
simply get those improvements.
| | 04:27 | Let's go back to the home page and
take a look at some of the basic features
| | 04:31 | that jQuery Mobile provides.
| | 04:33 | Let's just go to the Pages & dialog
section, and I am going to click on the
| | 04:37 | Single page template.
| | 04:39 | You can see here in the Single page
template that I've got a header, and some
| | 04:42 | content, and a footer and all of this
is achieved and styled, using jQuery
| | 04:47 | Mobile standard markup.
| | 04:48 | There is no special markup here.
| | 04:50 | You can just get this appearance by
using the basic semantic markup in HTML and
| | 04:54 | jQuery Mobile just progressively
enhances the page to look really good in a
| | 04:59 | mobile context, and we will take a look at
how to do that in a little bit. Let's go back.
| | 05:03 | Let's take a look at something else.
| | 05:04 | Let's take a look at Page transitions.
| | 05:07 | In the Page transitions section,
let's take a look at some of these various
| | 05:11 | transitions you can get.
| | 05:12 | So I am going to click on the slide,
and you can see that as I click on slide,
| | 05:17 | the next page kind of slides in from
the left, whereas, if I click on pop, you
| | 05:22 | can see it kind of pops out from the center.
| | 05:24 | Well, let's see, there is Fade,
One more, let's click on Flip.
| | 05:30 | So these are all of the different page
transitions, and again, these are just
| | 05:35 | provided for you as part of jQuery
Mobile. And they give a very native
| | 05:39 | appearance to the way that your
pages will behave in a mobile browser.
| | 05:43 | Let's go back and take a
look at some of other stuff.
| | 05:45 | Let's take a look at some of the Form
support that jQuery Mobile provides, let's
| | 05:49 | click on the Form element gallery.
| | 05:51 | Now these are all the Form elements
that are provided in jQuery Mobile.
| | 05:54 | Now just to be clear these are
standard form based elements that have been
| | 05:59 | progressively enhanced by jQuery
mobile to look good in mobile browsers.
| | 06:05 | So just by using standard form markup, you're
going to get the features that you see here.
| | 06:09 | So for example, there is basic
Textinput, here is a Textarea.
| | 06:14 | Watch what happens in the Textarea.
| | 06:16 | As I type in the Textarea, see how it's
automatically growing to avoid scrollbars.
| | 06:20 | That is a basic feature of jQuery
Mobile that your applications will just get.
| | 06:24 | Here's a Search bar, and you can see
that I'm getting my little Delete button.
| | 06:30 | All of this is provided free of charge to you.
| | 06:32 | Here is a slider control, all of this
stuff is just built into jQuery Mobile.
| | 06:40 | Some enhanced checkboxes, radio
buttons, here is a Customize select list.
| | 06:48 | This is all stuff that your Forms in
jQuery Mobile will just get free of charge.
| | 06:55 | Last thing I want to take a look at,
let's take a look at List views.
| | 06:59 | Now List views are the things that you see here.
| | 07:01 | This is a List view.
| | 07:02 | Each one of these items,
there's a little arrow over here.
| | 07:04 | This is a pretty common mobile UI
paradigm that's being used on the mobile web
| | 07:09 | today and jQuery Mobile devotes an
entire section to supporting List views.
| | 07:13 | So let's take a look some
things you can do with List views.
| | 07:16 | You can have Numbered List views, you
can have various Dividers, here's a list
| | 07:23 | that's been divided into alphabetic sections.
| | 07:25 | Here is a List views that
have count bubbles in them.
| | 07:29 | You've probably seen these on
various mobile applications used in past.
| | 07:33 | They can have Icons in them.
| | 07:35 | They can have Thumbnails in them.
| | 07:38 | You can have Content formatting.
| | 07:40 | There is a whole bunch of stuff
that you can use in your List views.
| | 07:44 | Again, we will have a bunch of
examples that go over this stuff.
| | 07:49 | So hopefully that gives you a pretty
good overview of the kinds of things that
| | 07:52 | you can do with jQuery
Mobile in your applications.
| | 07:55 | So if you're as excited as I am to
start using some of the stuff, it's time to
| | 07:59 | start building our first
jQuery Mobile application.
| | Collapse this transcript |
| Building your first jQuery Mobile app| 00:00 | Now to build our first jQuery Mobile
application we'll get into a few things.
| | 00:03 | First, we're going to need to include
the three jQuery Mobile resources that all
| | 00:08 | the applications need.
| | 00:09 | There's one CSS file and there's two
JavaScript files, the jQuery Mobile file
| | 00:14 | and the jQuery file itself.
| | 00:16 | We're going to mark up our content as usual.
| | 00:18 | We're not going to do any special
programming or any special tags.
| | 00:21 | We're going to use standard HTML,
standard CSS, and jQuery Mobile will just
| | 00:25 | simply progressively enhance the file for us.
| | 00:27 | We are going to use an HTML5
feature called the Data Attribute.
| | 00:32 | HTML5 defines the ability to create
these attributes called Data Attributes,
| | 00:38 | which are used to attach
data to tags inside a file.
| | 00:42 | Now jQuery Mobile uses these to define
attributes for example like data-role
| | 00:47 | which identifies the role a
particular piece of markup plays in a jQuery
| | 00:52 | Mobile application.
| | 00:54 | It's used to identify things like pages
and headers and footers and content and
| | 00:57 | so on, and we'll see how
that works in just a moment.
| | 01:00 | Now, the cool thing about jQuery Mobile
is, you can include more than one page
| | 01:05 | in a single HTML file.
| | 01:08 | So only one file needs to be
downloaded from the server but it can have more
| | 01:11 | than one "jQuery page" in it that can be
transitioned to and from and it gives a
| | 01:18 | really smooth appearance to your
application and it makes it look like it has
| | 01:21 | more than one page in it, when in reality,
it's just one HTML file, so we'll see
| | 01:26 | how that works in just a moment.
| | 01:27 | All right, let's jump over to the code.
| | 01:29 | Okay, so I am here in my Aptana Studio
Editor and I have got my ExampleSnippets
| | 01:33 | file open and I've got my first_jqmobile
_start file open and you'll notice also
| | 01:40 | that in my Snippets I have got some
paths to my jQuery Mobile related resources.
| | 01:46 | Now one of the things I want to point
out is that if you've downloaded the
| | 01:49 | exercise files to use and follow
along with, everything should be okay
| | 01:53 | because we've included jQuery and
jQuery Mobile in the distribution and all
| | 01:57 | the paths should line up.
| | 01:59 | But, if you downloaded a different
version of jQuery or jQuery Mobile, then
| | 02:03 | you may need to edit these paths right here
to point to the right version of the library.
| | 02:09 | But, that's only if you've downloaded
the jQuery Mobile and jQuery library
| | 02:14 | yourself, if you're using the exercise
files, everything should just be fine.
| | 02:18 | Let's jump over to the start file and
you can see that this is just an empty
| | 02:22 | HTML file right now, there's nothing
special about it, it's just regular HTML
| | 02:25 | code and what we're going to do
is copy some of the Snippets over.
| | 02:28 | So the first thing I am going to do is
copy the things that jQuery Mobile needs,
| | 02:34 | copy these and paste them in the head.
| | 02:39 | So this is the style sheet right here
that points to the jQuery Mobile styles
| | 02:43 | that enhance all the page elements.
Here's the jQuery library itself, and that
| | 02:47 | has to come before the jQuery Mobile
library because the jQuery Mobile library
| | 02:51 | depends on things that are defined in
the jQuery library, so it has to come
| | 02:55 | after jQuery has been included. All right.
| | 02:58 | So once we've done that,
let's go back to the Snippets.
| | 03:01 | Now, I am going to start here on line
13, I am going to copy these lines here
| | 03:07 | and paste them in to the body section.
And these are standard HTML5 constructs;
| | 03:14 | the section, the header, the footer
down here, this is not special markup, this
| | 03:18 | is all HTML5, and you can see here
that I am using these data-role attributes
| | 03:23 | to identify different parts of this
construct that jQuery Mobile is going to
| | 03:28 | need to know about.
| | 03:29 | So on the top here, this section I have
defined a data-role attribute that has
| | 03:35 | the value of page, and what that
means is this entire section right here
| | 03:39 | constitutes one complete jQuery Mobile page.
| | 03:44 | So this will be shown as
one page inside the Browser.
| | 03:47 | Now, inside that page, I've got a header,
and I've got a data-role on there that
| | 03:52 | identifies the fact that it is a header,
and jQuery Mobile will use that to mark
| | 03:56 | up and style the header section.
| | 03:58 | Here, I've got a div which is
wrapping the content and there's a data-role
| | 04:02 | attribute that says this is content,
and then I've got a footer down here which
| | 04:05 | is identified as a footer and
jQuery Mobile will style that as well.
| | 04:10 | Okay, so let's go ahead and save
this and let's just run it in Safari.
| | 04:13 | I've got Aptana Studio set up to do
that, so I am just going to run it in my
| | 04:17 | Safari Browser, you can run it
in your Browser locally as well.
| | 04:21 | And when I run it, you'll see that when
it comes up in the Browser, I've got a
| | 04:25 | header, a footer and a content
section, and all of this is being styled
| | 04:30 | automatically by jQuery Mobile.
| | 04:31 | I didn't have to do anything special,
it all just gets progressively enhanced.
| | 04:35 | So let's go back to the code.
So that's one complete page.
| | 04:40 | So let's go back to the Snippets.
| | 04:41 | I am going to scroll down, and this
time, I am going to copy the second page
| | 04:49 | right here, go back to the code, paste this in.
| | 04:55 | So now I have got two jQuery Mobile pages.
| | 04:59 | This one is defined by a section,
this one is defined by a div.
| | 05:02 | It's not really important, you can
choose to use a div, you can choose to use a
| | 05:05 | section, it doesn't really matter as
long as it's a container element that can
| | 05:10 | be identified as a page
using the data-role attribute.
| | 05:13 | Now inside, I have another set of
content that looks pretty similar to the
| | 05:18 | first one, I've got a header, I've got a
content area, I've got a footer, all the same stuff.
| | 05:24 | Notice also I've got links in here.
| | 05:26 | Now, here I have got a link that says,
Go to the second page, here I have a link
| | 05:30 | that says, Go to the first page.
| | 05:32 | The other thing you notice is that
inside the href for this link, I've got a
| | 05:36 | named anchor that's referring to
the ID of this second page right here.
| | 05:42 | Now, I don't have to do anything special,
jQuery Mobile is going to look through
| | 05:46 | all the links on the page and identify
the ones that have hrefs that refer to
| | 05:52 | internal structures like this div
that have an ID that match their href.
| | 05:57 | So when I click on this link, jQuery
Mobile is going to intercept that click and
| | 06:01 | say, oh, this page is actually defined
inside this HTML file, load this content
| | 06:07 | here and then animate it into place
as if it were a separate external page.
| | 06:12 | And then similarly down here in second
page, I have an href that goes back to
| | 06:16 | the first page and this says, go back
to the first page, so the same thing.
| | 06:18 | So these two links I am going to
refer to these two different pages.
| | 06:22 | I am going to save, I am
going to run this in the Browser.
| | 06:25 | So now when I click on the Go to
the second page, watch what happens.
| | 06:30 | See how the second page has got
animated into place, even though it's in the
| | 06:34 | same HTML file, it's being
treated as a separate page.
| | 06:37 | If I click Go to first page,
you'll see we go back to the first page.
| | 06:41 | This is one of the really cool
features about jQuery Mobile.
| | 06:43 | I have got more than one
content page defined in one HTML file.
| | 06:48 | So this should give you an idea of
some of the power that jQuery Mobile is
| | 06:52 | going to provide for your mobile web
applications and we'll get much deeper
| | 06:56 | into this as we go throughout the
course but this should give you a pretty good
| | 06:59 | taste of what's to come.
| | Collapse this transcript |
|
|
2. Building jQuery Mobile PagesUnderstanding page architecture| 00:00 | Let's take a more detailed look at
the jQuery Mobile Page Architecture.
| | 00:04 | So as we saw previously when we built
our first jQuery Mobile application,
| | 00:09 | there is a way to define more than one
application page in an HTML file. And jQuery
| | 00:15 | Mobile treats pages in two basic
categories, there's what's called internal
| | 00:19 | pages and external pages.
| | 00:22 | So let's quickly review the internal
pages like we saw in the previous example.
| | 00:27 | Now, if you take a look at the HTML code
and you scroll down and you look at the
| | 00:31 | different section and div that I had in
there, there were these attributes named
| | 00:35 | data-roles and I've highlighted them
here so you can see them, and each one of
| | 00:39 | that data-role attributes identified an
individual page that jQuery Mobile would
| | 00:46 | parse and then display inside the
browser viewport at a given time.
| | 00:51 | So even though it's one HTML file,
there's two pages in this file, and inside
| | 00:57 | the first page you can see here I've
got a regular link that uses a named
| | 01:01 | anchor to refer to the second page.
| | 01:04 | So if you take a look at this in block
form, you have the HTML file which is
| | 01:08 | this big rectangle right here and then
inside you've got these two different
| | 01:11 | pages, you've got Page 1 and you've
got Page 2, and in this case, the named
| | 01:15 | anchor is referring to the second page,
and for this reason you can't use
| | 01:20 | regular named anchors inside your HTML
pages, inside jQuery Mobile because it
| | 01:26 | uses this mechanism to refer to
individual pages inside the given HTML file.
| | 01:33 | So if you're using named anchors to
refer to destinations inside of page, then
| | 01:39 | you'll need to find some other mechanism
to make that work because jQuery Mobile
| | 01:42 | will interfere with that.
| | 01:44 | Now, along with internal pages, there
is a concept known as External Pages.
| | 01:49 | Now external pages are pages that are
linked to normally, so in this case you
| | 01:52 | have a link that refers to an external
page, and this could be a link to any
| | 01:57 | other page anywhere on the Internet, in
this case I've got a relative URL here
| | 02:02 | that refers to a page in the same
directory as the page this is linking from.
| | 02:07 | Now, jQuery Mobile will attempt to treat
this the same way as it would an internal page.
| | 02:14 | The only difference is that jQuery
Mobile will attempt to load this page's
| | 02:17 | content via an AJAX
request for a smooth transition.
| | 02:22 | So the content will be loaded and then
parsed and then added to the DOM of the
| | 02:27 | current HTML file that's in
the Browser window currently.
| | 02:31 | When that happens, all the widgets that
are in the page are auto-initialized by
| | 02:36 | the jQuery Mobile framework.
| | 02:38 | So anything like headers and footers
and content sections and forms or list
| | 02:44 | views or whatever else you've got in
the page is going to be initialized by the
| | 02:47 | framework, and then it's
animated into place via a transition.
| | 02:52 | So the appearance to the end user
will be the same as if the page had
| | 02:57 | been defined internally.
| | 02:59 | Now, there's going to be times when you
don't want this behavior, maybe you're
| | 03:02 | linking to a page that's outside of
your particular app or site or for some
| | 03:06 | reason you just don't want the page to
be loaded using this AJAX mechanism, and
| | 03:11 | you can turn it off.
| | 03:13 | So if you want to link without the AJAX
behavior, all you need to do is specify
| | 03:17 | one of these three things on your link.
| | 03:20 | You can say rel="external", you
can use the data attribute called
| | 03:24 | data-ajax="false" or you can give it a
target like blank or some other target name.
| | 03:31 | And jQuery Mobile will realize, oh, I
don't need to load this via AJAX, I am
| | 03:36 | going to load this as a regular external
page and just let the Browser do its thing.
| | 03:42 | So let's jump over to the
code and see this in action.
| | 03:45 | So here in Aptana Studio I've got my
Snippets open and I am scrolled down to
| | 03:49 | Chapter 2 and I have also got my
pagenav_start file open and you can see I've
| | 03:55 | already gone ahead and included the
libraries for you and I've defined a section
| | 03:59 | here that identifies a page.
| | 04:01 | So let's go back to the Snippets, and
let's copy and paste these lines right here.
| | 04:05 | So I am going to copy these, I am going to
paste them inside the section below the header.
| | 04:12 | So inside my content section I now have a
couple of links that refer to external pages.
| | 04:17 | Now, on the first one here, I am
referring to the external page without any
| | 04:21 | particular declaration, there's no
attribute saying what to do about AJAX.
| | 04:25 | So this is a link to an external page and
here I have a link to another external page.
| | 04:29 | Only in this case I have got rel="
external" and we'll see how these two
| | 04:33 | behave differently.
| | 04:35 | So I am going to save this and I am
going to run this in the Browser, and you
| | 04:39 | can see that when Safari loads,
so here's my page content.
| | 04:42 | Now, when I click on link to an
external page, you can see that the external
| | 04:47 | page is loaded, and then animated into
place, just like you would expect for an
| | 04:52 | internal page, and in fact, let's go
ahead and look at what that external page
| | 04:56 | is made up of, that's this guy right here.
| | 04:58 | So externalpage1 is just some content.
| | 05:01 | Now, you notice also that when I
animated the page into place, the only
| | 05:05 | content that became visible was,
what's inside this data-role="page" section
| | 05:11 | inside the external file.
| | 05:13 | So we'll come back to that in a
second but I just wanted to point that out
| | 05:15 | just for the moment.
| | 05:16 | All right, so let's go back to the Browser.
| | 05:18 | So now I am going to click on
Link to another external page.
| | 05:23 | In this case though, I am using the
rel="external" link right here and you
| | 05:28 | notice how that page was just simply
directly linked to, it was not loaded
| | 05:32 | via AJAX, it was not animated into
place for the transition, whereas this one
| | 05:36 | is, right, this one is not.
| | 05:40 | So just to show you the code for the
second external page, that's this guy right
| | 05:45 | here and you can see that this
content is being loaded from outside the
| | 05:49 | framework, it's just being
loaded as a regular page.
| | 05:52 | Now, let's go back to the first external page.
| | 05:55 | What's going to happen is when jQuery
Mobile loads this content, it's going to
| | 05:58 | look for a container tag like a div
or a section or something that has a
| | 06:03 | data-role="page" attribute.
| | 06:05 | Now, if that's not there, just take
this off, now I am going to save that and I
| | 06:12 | am going to go back to my
example and run it again.
| | 06:14 | I am just going to refresh to make
sure we're getting to the new page.
| | 06:17 | Now, when I click link to an external page,
notice how all the content got loaded.
| | 06:22 | So if that data-role="page" is not
present, then what happens is jQuery Mobile
| | 06:27 | just takes all the content that's in
the body section and creates a new page
| | 06:32 | out of it, inserts it into the DOM of the
current file and then animates it into place.
| | 06:36 | so if you don't want that behavior,
then what you need to do is surround the
| | 06:42 | content that you want to constitute the
new page inside a container tag with a
| | 06:48 | data-role attribute that's equal to page.
| | 06:50 | So in a nutshell, that's basically
how jQuery Mobile specifies its page
| | 06:56 | architecture into internal and
external pages and how it loads the content.
| | 07:00 | And you have full control over how
you want the content to be loaded.
| | 07:03 | If you don't do anything special,
jQuery Mobile will just simply handle all the
| | 07:07 | links of the page for you, load the
content via AJAX and animate it into place
| | 07:11 | regardless of whether it's
an internal or external page.
| | 07:14 | However, in cases where you don't
want that behavior, it's enough to turn
| | 07:17 | it off.
| | Collapse this transcript |
| Using page transitions| 00:00 | jQuery Mobile gives you control over how
you want to transition from one page to
| | 00:05 | the next and you probably recall from
earlier I mentioned that there are a bunch
| | 00:10 | of different transitions you can use
and you can specify which ones you want to
| | 00:14 | use on a per link basis when
transitioning from one page to another.
| | 00:19 | Now jQuery Mobile provides some
built-in ones, they rely on CSS3.
| | 00:24 | They're not available on browsers
that do not provide support for CSS3
| | 00:29 | transitions and at the time of this
recording that's IE 9 and I believe
| | 00:35 | Firefox does not currently provide CSS3
transitions, but the good news is that
| | 00:39 | most mobile WebKit based browsers do,
and so on most devices the transitions
| | 00:44 | will work just fine.
| | 00:46 | Now what I mean by that is the page
will still be transition to, the link will
| | 00:49 | still happen, but the smooth animation
will not occur on browsers that don't
| | 00:55 | provide CSS3 based animations.
| | 00:58 | So there are six such transitions that you
can use and I've listed those in a table here.
| | 01:03 | There is fade and flip, pop,
slide, slideDown, slideUp.
| | 01:08 | You have control over this on a
per link basis as I mentioned.
| | 01:12 | Now each one of these pretty much
does exactly what its name implies and
| | 01:16 | perhaps the best way to see how each
one behaves is to actually go into the
| | 01:21 | code and try it out.
| | 01:22 | So let's just jump over to the Editor.
| | 01:24 | All right, so I'm in here in my
pagetransitions_start file and I've got my
| | 01:29 | Snippets file open right here and I
scroll down to the Page Transitions section.
| | 01:34 | Now in the start version of this file I
have a pre-built second page and this is
| | 01:39 | the page that we're going to be
transitioning to and inside that page I've got a
| | 01:44 | header and a content section and inside
the content section I have a link right
| | 01:49 | here which is going to take
us back to the first page.
| | 01:51 | So let's go to the Snippets and what
I'm going to do is copy in the code that
| | 01:57 | represents the first page.
| | 01:58 | This is the page that we're going to
be transitioning from, so I'll copy that
| | 02:04 | and we'll paste it in here right
where the first page goes and Save.
| | 02:08 | Now the way transition works is you
specify the transition using a data
| | 02:12 | attribute named data-transition
and the value for that particular
| | 02:17 | data-transition attribute is the
name of the transition you want to use.
| | 02:21 | So for example, you can use
fade, flip, pop, slide and so on.
| | 02:25 | So let's try some of these out, so I
have copied the code in and save it and now
| | 02:28 | I'm going to run it and I'm going to
run it in Safari, so make sure we're using
| | 02:32 | a browser that supports transitions.
| | 02:35 | So here we are in the browser and you
can see that we got a whole bunch of links
| | 02:38 | to try out some different transitions.
| | 02:40 | So let's see what Fade looks like and
you can see that when we click the Fade
| | 02:44 | link, you get a fade to the second page,
and if we could do a Flip, right, there
| | 02:48 | is the Flip animation.
| | 02:49 | Let's see what Pop looks like, see
the second page pops into place from the
| | 02:54 | center of the screen.
| | 02:55 | There is a slide, that's the default,
and by the way you can change the default
| | 02:59 | animation and we'll take a look at that
later on when we get to the section on
| | 03:03 | customizing jQuery Mobile's configuration.
| | 03:05 | In addition to sliding in from the side
we can slide down and we can slide up.
| | 03:12 | So these are all the transitions that
are available to you built into jQuery
| | 03:16 | Mobile and if you are feeling
adventurous you can build your own.
| | 03:19 | There is a plug-in library just like
you can use in regular jQuery, you can go
| | 03:24 | build your own transitions.
| | 03:25 | The jQuery Mobile source code is open
for you to look at, so you can see how the
| | 03:28 | current transitions are built, but in
a nutshell that's how jQuery handles
| | 03:32 | transitions from one page to
another, it's as simple as specifying a
| | 03:36 | data-transition attribute on the link
that causes the second page to be loaded.
| | Collapse this transcript |
| Creating and using dialogs| 00:00 | We're going to wrap up our section
on examining jQuery Mobile's page
| | 00:03 | architecture by looking at pages as dialogs.
| | 00:07 | In jQuery Mobile you can show any
valid page as a mobile dialog, and the way
| | 00:13 | that you do this is simply adding a
data attribute named data-rel with the
| | 00:17 | value of dialog to the link that opens the
page that you want to be opened as a dialog.
| | 00:23 | So in the code it would look like this.
| | 00:25 | You would have a link and in this case
we have an href to a internal page named
| | 00:29 | secondpage and that code in the red there,
that data-rel=dialog, that's going to
| | 00:33 | open the link when it's clicked on or
tapped on by the user as a dialog on top
| | 00:39 | of the opening page.
| | 00:40 | So let's see this in action.
| | 00:42 | We are going to jump over to the code.
| | 00:44 | Here in my Editor I've got the using_
dialogs_start version opened and I've also
| | 00:50 | got my Snippets opened and I've
scroll down to the Dialogs section here.
| | 00:54 | So let's take a look at how this works
without the data-rel=dialog attribute.
| | 01:00 | So I'm going to Save this and I'm just
going to run it as it is and you can see
| | 01:04 | that when the page loads we have a page 1 here.
| | 01:07 | I'm going to click on Display Dialog
and without the data-rel attribute the
| | 01:12 | second page just animates in as if it
were a normal internal jQuery page. So
| | 01:18 | let's go back to the first page.
| | 01:19 | All right, now let's copy the code here.
| | 01:23 | So what we're going to do is copy this
line and back in our start version, we're
| | 01:26 | going to replace this link right here
with this new one and you can see that the
| | 01:31 | only difference is that here I
have a data-rel=dialog on my link.
| | 01:37 | So let's get rid of this one and save.
| | 01:39 | Now let's run this again.
| | 01:41 | Now when I click on the Display Dialog
link, you can see that what happens is a
| | 01:45 | dialog comes up with the content
displayed in the page and you can see with this
| | 01:51 | little pop animation that comes up
from the center of the page as a close box
| | 01:55 | and it behaves as if it were a dialog.
| | 01:57 | And you can do this with any page that
is a valid jQuery Mobile page, you simply
| | 02:02 | add that attribute data-rel=dialog and
you can display the page as a Dialog.
| | Collapse this transcript |
|
|
3. Working with Buttons and ToolbarsUsing headers and footers| 00:00 | So now that we've seen how to build
jQuery Mobile pages, and we've taken a look
| | 00:03 | at the jQuery Mobile page architecture,
we're going to spend some time now
| | 00:07 | looking at the content of those pages
and we're going to start off by looking at
| | 00:12 | toolbars specifically.
| | 00:13 | Now, in jQuery Mobile, there are
two types of toolbars, and in fact,
| | 00:16 | you've already seen them;
| | 00:17 | they're headers and they're footers.
| | 00:19 | So if you take a regular jQuery Mobile
page, the header usually goes at the top,
| | 00:23 | and the footer usually goes at the bottom,
and they typically serve as the first
| | 00:27 | and last elements in a
jQuery Mobile page definition.
| | 00:31 | I mean page definition as in data-role
="page", I don't mean HTML file, I mean
| | 00:36 | a jQuery Mobile page.
| | 00:38 | Now, toolbars can be positioned in a few
different ways and we'll take a look at
| | 00:41 | that a little bit later.
| | 00:42 | They can also contain buttons and
navigation elements in addition to the text
| | 00:48 | which is what we've seen up until now.
| | 00:50 | So let's take a look at how to add
buttons to our headers and our footers.
| | 00:54 | So in a header, I can add buttons on
both the left-hand and the right-hand side
| | 00:58 | and the way that you do that is if
you take a look at the way a header is
| | 01:03 | typically defined, and here I have a div
with the data-role="header", all I need
| | 01:08 | to do is add a couple of links.
| | 01:10 | In this case, I've got two links;
| | 01:11 | I've got a link on the top and a
link on the bottom, and they both have a
| | 01:15 | data-role attribute which is equal to
button and you can see Btn 1 is on the
| | 01:20 | top, and Btn 2 is on the bottom, and
the way this works is jQuery Mobile will
| | 01:24 | parse the header and the order it comes
across the buttons is the order in which
| | 01:29 | it will assign them in the
header. So Btn 1 is first.
| | 01:32 | So it will go on the left-hand side
and Btn 2 will go on the right-hand side.
| | 01:37 | Now, that's all fine and good, but
there are going to be times where you only
| | 01:41 | want one button, and you
want it on the right-hand side.
| | 01:44 | So how do you do that?
| | 01:44 | Well, the way you do it is you've
got your header, and you want a button
| | 01:48 | like this on the right.
| | 01:49 | All you need to do is define one
link like this, and add a class of
| | 01:55 | ui-btn-right and so in this case,
jQuery Mobile will parse this and realize
| | 02:01 | there's only one button.
| | 02:03 | But, instead of putting it on the left,
it'll put it on the right, because it
| | 02:06 | has that class definition.
| | 02:08 | Now, like headers, footers can also
have button content, but footers are less
| | 02:13 | structured and designed to be a bit
more flexible than headers are, and the
| | 02:16 | reason for that is because headers are
typically used for text and titles and
| | 02:21 | maybe one or two buttons and footers
in many web and native app paradigms are
| | 02:28 | where you put the functional
buttons for the application.
| | 02:31 | So the way that, that works is, if I
have a page here with a footer, normally I
| | 02:35 | would define the footer like this,
this is something you've already seen.
| | 02:38 | Now, to add buttons to the footer,
what we can do is just define some links.
| | 02:43 | Now, in this case, I've got three links;
| | 02:45 | Btn 1, Btn 2, and Btn 3 and they've all
got a data-role with a value of button
| | 02:51 | and that will cause three
buttons to appear in the footer.
| | 02:55 | Now, I mentioned earlier that footer
toolbars are more flexible, there is no
| | 02:59 | concept here of source order, or
using a class to define, left, or right or
| | 03:05 | anything like that, you can just define
the buttons and they'll show up in the
| | 03:09 | footer as you define them.
| | 03:11 | So let's jump over to the code
and actually see this working.
| | 03:14 | So here I am in my editor and I've got
my snippets file open, scroll down to
| | 03:18 | Chapter 3, and here's my headers
and my footers, and I've also got my
| | 03:21 | headersfooters_start file.
| | 03:24 | You can follow along with me if
you've got the Exercise Files.
| | 03:27 | So what I'm going to do is go to the
Snippets, and the first thing I am going
| | 03:30 | to do is copy this header right here, I am
going to paste it into the top of my page here.
| | 03:36 | Okay, so now I've got my header
defined, and I've got two buttons, Home and
| | 03:41 | Options, and you can see that I've
just assigned a couple of hrefs here that
| | 03:45 | don't really do anything.
| | 03:46 | Ordinarily, I would use script code
to assign some function to be executed
| | 03:51 | when they're clicked or
something like that, but this is just for
| | 03:53 | demonstration purposes.
| | 03:55 | So I'm going to save this and run it in
Safari, and you can see that when we do
| | 03:59 | that, we've got two buttons, we've got
Home, and we've got Options, and we've
| | 04:02 | got two buttons because here in source order,
we've got the Home and the Options links.
| | 04:06 | So let's go back to the code, and
let's modify this is a little bit.
| | 04:10 | We're going to take the definition for
the Options link, I am going to copy that
| | 04:15 | and I'm going to get rid of
the first button for Home.
| | 04:18 | I am going to replace the link for
options with this one and you can see here
| | 04:21 | I've got a class of ui-btn-right.
| | 04:24 | So since there's only one button now,
it will go on the right-hand side instead
| | 04:28 | of the left-hand side.
| | 04:29 | I'll run this and you can see the
Home button goes away and now I have my
| | 04:33 | Options button which is exactly what
you expect, and if I took out this class,
| | 04:38 | and save it, and then run this, you'll
see it moves over to the left which is
| | 04:42 | what you would expect.
| | 04:44 | But, I'm going to undo that, put it back
in, and you can see that, that cause it
| | 04:48 | to jump to the right.
| | 04:50 | Okay, let's move on to the footer.
| | 04:53 | So here in the footer, I am going to copy
that, and paste it down here below the content.
| | 04:59 | Now, in this case, I've got three
buttons, and I'm going to save this, I am
| | 05:03 | going to run it again.
| | 05:04 | Here in Safari, you can see
I've got Button 1, 2, and 3.
| | 05:07 | Now, the other thing you notice is
that up here in the header, I've got some
| | 05:10 | nice padding around the button,
there is some spacing here.
| | 05:14 | Down here in the footer, I don't have that.
| | 05:16 | The buttons are pretty much flush with the
edge of the footer content and I want to fix that.
| | 05:21 | Now, the way that you do that in
jQuery Mobile is there's a special class you
| | 05:25 | can use and back over here in the
Snippets, I'm going to copy this
| | 05:28 | class="ui-bar", and I am going to put
that on my footer definition right here.
| | 05:34 | This tells jQuery Mobile to add some
additional padding and spacing into the
| | 05:39 | footer bar that it's applied to, to give the
buttons, and content a little bit more room.
| | 05:43 | So when I save and I run, you can see
that now we've got some more padding and
| | 05:48 | spacing, and it just looks a lot nicer.
| | 05:50 | So that's just a brief introduction
to using header and footer toolbars and
| | 05:54 | adding content like buttons
in addition to regular text.
| | Collapse this transcript |
| Creating navigation bars| 00:00 | Now let's look at creating navigation bars.
| | 00:02 | To create a navigation bar, you use
the data-role attribute with a value of
| | 00:08 | navbar and that will define a navigation bar.
| | 00:11 | And any links that are inside the
element, that has this data-role applied to
| | 00:16 | it, will be styled as a navigation bar.
| | 00:19 | So let's take a look at what that looks like.
| | 00:20 | So here we have a definition for a header,
and that will create a header just as
| | 00:25 | we've always seen up until now.
| | 00:27 | Now if I use a navigation element and
you can use navigation elements because
| | 00:31 | we're working with HTML5 here, but you
don't have to use a nav, you can use a
| | 00:34 | div if you want to, but in this case I
am using a nav element and I am giving it
| | 00:38 | a data-role of navbar and that will
define the navigation bar area below the
| | 00:44 | header, and then inside I
am going to put three links.
| | 00:47 | And in this case, I've got three
buttons, One, Two and Three and that will
| | 00:51 | define navigation bar that looks like this.
| | 00:55 | Now, if you want, you can make the
navigation buttons look a little bit
| | 00:58 | different because by default, the
navigation buttons are as wide as
| | 01:03 | whatever their contents are.
| | 01:05 | But if you want to create equal-width
buttons then all you need to do is wrap
| | 01:09 | them in an unordered list.
| | 01:11 | So we will take the same definition we
had before which is the header and then
| | 01:14 | we have the nav which creates the nav area.
| | 01:16 | And now I am going to create an
unordered list with list items, with each one of
| | 01:20 | the list items content
being a link that is a button.
| | 01:23 | In that case, I will get buttons that
look like this, that span the entire width
| | 01:28 | of the page, all of them set
to be the same equal-width.
| | 01:32 | So let's take a look at this
in action over in the code.
| | 01:35 | So here in the code I have got my
Snippets and I'm down in the navigation bar
| | 01:39 | section and I am going to open my navbar_start.
| | 01:43 | And so you can see here I have got two pages,
this is the first page, this is the second page.
| | 01:47 | And I've got a header here
and I have got some content.
| | 01:51 | So what I am going to do is go over
my Snippets and I am going to copy this
| | 01:54 | section right here which is a
nav that has a navbar on it.
| | 01:57 | And I am going to copy that and
want to paste it in right where it says
| | 02:02 | navbar goes here, so in this case, we are
putting the navbar inside the header definition.
| | 02:08 | You can also put the navbar inside the
content if you want to as well, but in
| | 02:12 | this case, we want it to be
part of the header controls.
| | 02:15 | You might also notice that I've
got a couple of other things that you
| | 02:17 | haven't seen before.
| | 02:19 | So for example, I've got a data-icon
attribute and the icon attribute applied to
| | 02:26 | a button, specifies an icon that you
can associate with the button content.
| | 02:31 | And we will get to this later on
when we talk about defining buttons.
| | 02:34 | But I just want to show this to you
now to just give you an idea of what's
| | 02:37 | possible when you create navigation bars.
| | 02:39 | Okay, let's go back over to the
Snippets and I am going to copy the other
| | 02:43 | navigation bar, and I am going to copy
that and I am going to paste it into my
| | 02:50 | second page here, so I am going to
save and now we are going to run.
| | 02:56 | But before I run, notice how in the
navigation bar here, I've got a link to the
| | 03:01 | second page, on the two buttons, so this
button will lead to the second page and
| | 03:06 | down here my link leads back to the first page.
| | 03:09 | So I've got the toolbar navigating to
and from a couple of different pages.
| | 03:14 | So let's save, and let's run this.
| | 03:17 | So you see here is my Header Bar up
here and here's my Navigation Bar.
| | 03:21 | And you can see that all of
the buttons are of equal-width.
| | 03:24 | And the reason they are of equal-width
is because back here in the code, you
| | 03:27 | can see that I've wrapped them in an
unordered list, with list items containing
| | 03:32 | each one of the links.
| | 03:33 | If I didn't have this unordered list, then the
buttons would be all whatever the size they are.
| | 03:38 | So let's go back to the Browser.
| | 03:40 | Okay, so back here in the Browser, you'll
notice that if I click on a button it becomes active.
| | 03:45 | So now it's highlighting.
| | 03:46 | If I click on the number Two button,
it transitions to the next page.
| | 03:50 | So if I click back on One, you can see
I'm transitioning between pages One and Two.
| | 03:54 | Now the Three and Four
buttons don't do anything.
| | 03:56 | I've only got links hooked up to the
first two, so I will leave those guys alone.
| | 03:59 | But you notice that there is a couple
of things missing here, first the button
| | 04:03 | gets highlighted, it doesn't
stay highlighted on the second page.
| | 04:06 | We need to fix that.
| | 04:08 | So let's go back to the code
and go back into the Snippets.
| | 04:12 | Now what I am going to do is take
this link right here and this is my link
| | 04:19 | for my number one button on my first
page so I will copy that, and I'll paste
| | 04:24 | that into my first page.
| | 04:26 | I'll save and will do the same thing
on the second page, that's this Snippet
| | 04:31 | right here, and that on my second page,
goes in here and that's for my number
| | 04:41 | two button, so I will
take out the two button here.
| | 04:45 | So what have I done here?
| | 04:46 | Well, I've replaced the links for
those two buttons, with a link that has a
| | 04:53 | couple of classes on it.
| | 04:54 | The first one is ui-btn-active, and
the second one is ui-state-persist.
| | 05:00 | Now the first class says, hey when
you're on this page, have this button start
| | 05:05 | out as the one that's being
shown as the active buttons.
| | 05:08 | So it's highlighted with
that active button color.
| | 05:10 | This class here means persist the state
of that button between pages, don't get
| | 05:16 | rid of the fact that that button was clicked on.
| | 05:19 | So let's save and let's see what the effect is.
| | 05:23 | So you notice that when page one loads
for the first time, you'll notice that
| | 05:26 | this button here the One button
is shown as the active button.
| | 05:30 | And that's because, it has
the ui-btn-active state on it.
| | 05:34 | So it shows up to begin
with as the active button.
| | 05:37 | And when I click on the number
Two button watch what happens.
| | 05:40 | So first, you will notice that the Two
button is now active on the second page,
| | 05:44 | again because it has
that btn-active class on it.
| | 05:48 | But now, watch what happens
when I go back to the first page.
| | 05:51 | When I go back to the first page, the
state of that button is now persisted.
| | 05:54 | It's not shown in the off value.
| | 05:57 | If I click on Two and click on One, you
can see that the active button state is
| | 06:01 | now being persisted between those two
pages and it also works, if I go back
| | 06:05 | using the Back button.
| | 06:07 | So if I go back and forward, you'll
notice that those states are now being
| | 06:10 | maintained, between those two pages.
| | 06:13 | So using jQuery Mobile, you can define
some pretty good looking navigation bars
| | 06:18 | using standard markup and just a couple of
CSS classes that the library provides for you.
| | 06:23 | Along with some additional information that
can do things like add icons to your buttons.
| | 06:28 | You can see that by using jQuery Mobile,
we are starting to approach some native
| | 06:31 | look and feel for a web application.
| | Collapse this transcript |
| Understanding how positioned toolbars work| 00:00 | I mentioned earlier that toolbars in
jQuery Mobile could be positioned a
| | 00:04 | few different ways.
| | 00:05 | And there are three kinds of
positioning toolbars that jQuery Mobile supports,
| | 00:08 | there is Inline, there is
Fixed, and there is Fullscreen.
| | 00:12 | So let's take a look at each one of these.
| | 00:14 | The Inline case is the default setting.
| | 00:17 | In this case the toolbars namely the
headers and footers will scroll inline with
| | 00:22 | the page content, so if the content of
the page is long and requires scrolling
| | 00:27 | then the header and the footer whatever
you defined will scroll off and onto the
| | 00:31 | page along with the rest of the
content and that's what you get by default.
| | 00:35 | Now the Fixed option allows you to
specify that the toolbars are always at the
| | 00:40 | top and the bottom of the page, and
the way this works is the toolbars will
| | 00:44 | disappear momentarily when scrolling
starts, but when scrolling stops they will
| | 00:49 | reappear at the top and the bottom of
the page, and if you tap the screen the
| | 00:54 | toolbars will hide and show on each tap.
| | 00:58 | Now the Fullscreen option is a little
bit different, it's a little more subtle.
| | 01:01 | It works the same way as the Fixed
positioning does but the difference is that
| | 01:05 | the content of the page takes up the
entire screen and the toolbars sit over the
| | 01:10 | the content and like in the Fixed case
tapping the screen will show and hide the
| | 01:15 | toolbars and when you scroll
they'll go away and come back.
| | 01:18 | But the only difference here, and it's
a little bit subtle is that the content
| | 01:22 | of the page will not start out below
the header and appear above the footer.
| | 01:27 | It's intended for those kind of
scenarios where you have something like a photo
| | 01:30 | viewer, or some other scenario where
you want the entire content of the page to
| | 01:35 | be visible in the viewport and allow
the user to show and hide the toolbar so
| | 01:40 | that the content takes up the entire screen.
| | 01:43 | So let's actually see this in action,
I am going to jump over to the code, so
| | 01:46 | here we're in my editor and I've got my
navposition_start file opened and in the
| | 01:50 | Snippets I'm here in toolbar
Positioning under Chapter 3.
| | 01:54 | So let's just run the
code the way it currently is.
| | 01:57 | You'll see I have my header here and my
footer down here with nothing special,
| | 02:02 | so let's just run this.
| | 02:06 | And you'll see that as I scroll the
header and the footer are just kind of
| | 02:10 | scroll into and out of view.
| | 02:12 | There is the header there,
| | 02:13 | there is the footer there,
pretty much what you'd expect.
| | 02:18 | Okay, let's try some Fixed positioning,
so I'm going to go into my Snippets, I'm
| | 02:22 | going to copy that line and replace
my header definition here, and I'm just
| | 02:26 | going to replace it with this one.
| | 02:28 | You can see that basically all I
did was add this data attribute called
| | 02:31 | data-position="fixed" and I'm going
to do the same thing on my footer.
| | 02:35 | So I'll scroll down here and replace that.
| | 02:41 | So now I've got fixed position headers
and footers, so I'm going to save and
| | 02:45 | we'll scroll back up.
| | 02:47 | Right now let's run this and see how
the behavior is a little bit different.
| | 02:50 | So you can see that the Header Bar
starts out in the same position and here's
| | 02:55 | the content, and the Footer Bar appeared
at the bottom of the page when the page
| | 03:00 | loaded, and as I start to scroll you'll
see that the header and footer go away,
| | 03:05 | and when I stop scrolling they come back.
| | 03:08 | So as I scroll they disappear and reappear.
| | 03:11 | And if I tap-in the page they
momentarily disappear and then when I tap again
| | 03:16 | they come back again.
| | 03:17 | So that's how you create Fixed
position headers and footers.
| | 03:21 | Let's go back and take a
look at the Fullscreen option.
| | 03:25 | Now in this case the Fullscreen option
says I want the content of my page to
| | 03:30 | take up the entire screen.
| | 03:32 | So what I'm going to do is go and
copy this Snippet here and I'm going to
| | 03:36 | replace my page definition with this one.
| | 03:39 | And you can see that it's pretty much
the same, the only difference is that I
| | 03:42 | added an attribute here called data-
fullscreen and gave it a value of true.
| | 03:47 | So what that basically means is, all of the
content now is going take up the entire screen.
| | 03:52 | So if we run this again, now it may
be a little bit subtle to see in your
| | 03:56 | screen but the page content is now up
under the Header Bar, it doesn't start
| | 04:01 | below the Footer Bar anymore.
| | 04:03 | And you'll notice that when I scroll I'm
getting the same behavior as I was before.
| | 04:08 | You see that the header and footer go away
and come back when scrolling starts and stops.
| | 04:13 | The only difference is that the content
is now starting out taking up the entire
| | 04:17 | page and you notice that when I tap you
see the headers and footers go away, and
| | 04:21 | when I tap again they come back.
| | 04:22 | So the only difference is that the
content takes up the entire rendering area
| | 04:27 | of the page but other than that it works
pretty much the same way as Fixed position toolbars.
| | 04:32 | So that's how you can create headers and
footers with varying kinds of positions
| | 04:37 | using jQuery Mobile.
| | Collapse this transcript |
| Button basics| 00:00 | Buttons are probably one of the most
common UI elements that you'll find
| | 00:03 | in mobile applications either web
or native, and that's because most of
| | 00:08 | the interaction that the user has with the
application is by tapping with their finger.
| | 00:13 | So jQuery Mobile provides a whole
bunch of features for working with buttons,
| | 00:19 | and it makes working with
buttons really very easy.
| | 00:23 | You can style links as buttons, you
can use form button controls, either the
| | 00:28 | button tag or the input types.
| | 00:30 | jQuery Mobile gives you control over
how buttons are displayed, you can group
| | 00:34 | them as either vertical, or inline groups, you
can group them together into sets of buttons.
| | 00:41 | There's a whole bunch of
options for working with buttons.
| | 00:44 | So let's take an example, here is a
button in jQuery Mobile and to get a button
| | 00:49 | that looks like this, there is
a couple of ways I can do this.
| | 00:53 | I can use the Button tag, I can use
input type ="button", I can use a link with
| | 00:58 | a data-role of a value of button in it,
and either one of those three options
| | 01:03 | will give me the result that you see
here where I have a clickable button.
| | 01:08 | Now, by default, buttons take up 100%
of the available screen width unless you
| | 01:15 | specify a data attribute called data-
inline, and give it a value of true.
| | 01:20 | So you have a page that looks kind
of like this, then you're going to get a
| | 01:24 | button that's the full width
if you just define it like this.
| | 01:27 | So if you want to have a button that's
only as wide as its content, you need to
| | 01:31 | have that attribute there that says data-
inline="true", and that will give you a
| | 01:35 | button that's only as wide as its content.
| | 01:38 | You can also define button control
groups and you can group them together in
| | 01:43 | either horizontal or vertical lists.
| | 01:46 | So for example, if you have a page and
you want to have three buttons together,
| | 01:49 | then we'll click this in a group.
| | 01:51 | You simply wrap them inside a
container element like a div and give it a
| | 01:55 | data-role attribute of control group
and that will group all three of the
| | 02:00 | buttons together in a vertical list.
| | 02:02 | Now you can also group them together in
a horizontal list like this, and to do
| | 02:06 | that, you simply say data-type="
horizontal" on the same container element that
| | 02:11 | has the control group for its data-role.
| | 02:14 | And jQuery is smart enough in each
of these cases to take off the rounded
| | 02:18 | edges in each of the buttons and make them
look really nice and flush against each other.
| | 02:24 | In addition to grouping controls in
this case buttons together, you can specify
| | 02:29 | things like icons for buttons, and
the way you do that is you use a data
| | 02:33 | attribute called data-icon and you give
it the name of an icon that you want to
| | 02:38 | assign to the button and you can use
any one of the names that's available here
| | 02:42 | in this table, these are the buttons
that ship with jQuery Mobile, the button
| | 02:47 | icons, and you can also
specify where the icon should go.
| | 02:50 | You can specify that the icon should go
on the bottom, the left, right, or top
| | 02:54 | of the button, and if you use the
notext option, then the button will have no
| | 02:59 | text in it, it will be just the icon by itself.
| | 03:03 | So lots of different options for
working with buttons and you're not limited by
| | 03:07 | the way to the icons that just ship
with jQuery Mobile, there are ways of using
| | 03:12 | third-party icon libraries.
| | 03:14 | That's a little bit beyond the scope of
this particular course, but I just want
| | 03:17 | you to know that it is
possible to use third-party icon sets.
| | 03:20 | It involves just naming things
correctly and creating CSS files that use the
| | 03:25 | particular icons and making sure
that the Sprites are the right size like
| | 03:29 | 18x18 icons and so on.
| | 03:31 | Okay, so now that we've seen how to
specify a whole bunch of button options,
| | 03:35 | it's time to actually
work with them in the code.
| | Collapse this transcript |
| Working with buttons| 00:00 | Let's take a look at what we've
learned about buttons so far, and actually
| | 00:03 | put it into practice.
| | 00:04 | You can see here in the code editor,
I've got my buttons_start file open and
| | 00:08 | I've got my Snippets, and I'll
scroll down here to my Buttons section.
| | 00:11 | So let's just start out
by creating some buttons.
| | 00:15 | The first thing I'm going to do is copy
this one right here and in these three
| | 00:19 | lines, I'm going to paste those into
my content section down here, and what
| | 00:26 | this is going to do is create a
button out of a link, and you've seen this
| | 00:31 | before elsewhere in the title, but for now,
we're just going to do a little bit of a review.
| | 00:35 | Here, I've got a link with an href of
nothing, so nothing is happening here, and
| | 00:39 | a data-role attribute of button.
| | 00:40 | So when I run this, you can see that I get a
Link Button that's been styled from a link.
| | 00:46 | So far, so good; let's move on.
| | 00:48 | So let's copy the next version, and in
this case, we're going to be creating a
| | 00:54 | button out of a button element.
| | 00:57 | So you can see here that instead of
using a link, I'm now using the button tag,
| | 01:01 | and we'll run this again, and
now we have our button element.
| | 01:05 | So the results are the same.
| | 01:06 | We've got two buttons now just
created in different ways. All right.
| | 01:10 | Let's go back to the code.
| | 01:13 | Let's take a look now at
vertical versus inline buttons.
| | 01:17 | So I'm going to copy these guys right here
and we'll paste them down here below the others.
| | 01:24 | So I've got four buttons.
| | 01:27 | Here's Button 1 and Button 2 and they
are both being created from links with
| | 01:31 | data-role attributes of button.
| | 01:33 | The only difference is that in the
second group, I've got data-inline="true".
| | 01:37 | So let's see what effect
that has when we run this.
| | 01:41 | You'll see that the first two buttons
take up 100% of the width of the available
| | 01:45 | screen, whereas these two
buttons appear in line with each other.
| | 01:49 | So that's the effect of using the data-
inline attribute to specify that buttons
| | 01:54 | should go next to each other
rather than vertically stacked.
| | 01:58 | Okay, let's continue.
| | 02:01 | Now, we're going to group the
buttons together in a control group.
| | 02:06 | So I'm going to copy this, and
I'm going to paste down here.
| | 02:13 | So here, I have a container, in this
case, a div, and it's wrapping these three
| | 02:19 | buttons, and I've got my data-role
attribute that specifies this is a control
| | 02:24 | group, and I've got a data-type
attribute that specifies horizontal.
| | 02:30 | So what I'm going to do here is run this.
| | 02:33 | You can see that there's a, b and c
buttons and notice how button a and button
| | 02:38 | c have the rounded corners but the middle
button, button b does not have the rounded corners.
| | 02:43 | The corners have been removed
because JQuery Mobile is smart enough to
| | 02:47 | realize that, that's the middle button
there and it doesn't need to have the
| | 02:51 | rounded corners applied.
| | 02:53 | If I go back and either change this
to vertical or just take it off because
| | 02:59 | vertical is the default option, I run
this again, you'll see now in this case,
| | 03:04 | the buttons are now vertical, but
once again, the rounded corners are only
| | 03:08 | being applied to the first, and last
button in the group, and the middle button
| | 03:12 | has a nice square effect.
| | 03:14 | So that's what wrapping these
elements in a control group does for you.
| | 03:18 | Okay, let's go back, and let's change
that back to horizontal. All right.
| | 03:24 | Let's move to the next example.
| | 03:25 | Let's do some work with some icons.
| | 03:27 | I'm going to copy these examples right here,
and I'll paste these down here in the bottom.
| | 03:35 | So now, we've got some buttons, and
in this case, I'm using the data-icon
| | 03:43 | attributes to specify what icon should
go with each button and I'm using the
| | 03:48 | data-iconpos attribute to specify
where the icon should appear on the button.
| | 03:53 | There's top, bottom, left, right, and notext.
| | 03:56 | So let's save and we'll run.
| | 04:01 | When I scroll down to the bottom,
you'll see here are the buttons that I have
| | 04:04 | added with the icons.
| | 04:05 | Here is the Up button, and the Down
button, and left and right, and you can see
| | 04:10 | that they've got their icons in the
position where I've set them, and then
| | 04:14 | here's the notext option down here.
| | 04:17 | You can see that since I specified
notext on the Delete button, and it's got the
| | 04:20 | delete icon, only the icon is showing up.
| | 04:23 | The last thing I want to show you is
how to work with buttons programmatically.
| | 04:28 | There are a couple of different
functions you can call on buttons.
| | 04:32 | Now, the way that you need to do this
and we'll get to this a little bit later
| | 04:36 | when we talk about events in jQuery,
normally in jQuery, you would bind to the
| | 04:41 | document ready event or the DOM ready event.
| | 04:45 | And in jQuery Mobile because pages are
parts of HTML files, you don't want to
| | 04:51 | use the DOM ready because
it's only going to fire once.
| | 04:53 | What you want to do is bind to the
pageinit function, which will tell you when a
| | 04:58 | page is initialized, and that is when
you can run any initialization code that
| | 05:03 | you want to affect the page.
| | 05:05 | And again, we'll get to this later on,
so for now, I don't expect you to know or
| | 05:09 | understand this completely,
but just follow along with me.
| | 05:11 | So I'm going to copy this, I am going to
put this script down here in the bottom
| | 05:17 | of the page, and what's going to
happen is on the first page in the document
| | 05:23 | here, I'm going to call the live
function, and if you're not familiar with what
| | 05:27 | I'm doing here with the live function
or how I'm selecting the first page using
| | 05:31 | the jQuery selector, then you need
to go review the jQuery title here on
| | 05:36 | lynda.com which explains everything
that you see that's going on here.
| | 05:39 | But, in a nutshell, what I'm doing is,
I'm binding to the page initialization
| | 05:43 | event, and I'm running a function when
the page initializes to get the button
| | 05:49 | that has an ID of Button 1, and I'm
calling the disable method on the button.
| | 05:55 | So what's going to happen is when the
page loads, here is button with the ID
| | 06:00 | btn1, it's going to disable this button element.
| | 06:03 | So right now, let's just go back to the
browser and you can see that right now
| | 06:07 | that button is active.
| | 06:08 | When I hover over it, when I click
on it, it highlights in certain way.
| | 06:12 | So what I'm going to do is go back in
here, make sure that my script looks
| | 06:17 | right, save it and then
I'm going to run this again.
| | 06:21 | You can see that when the page
loaded, that script got executed and now
| | 06:24 | the button is disabled.
| | 06:26 | So now it's not getting any
highlighting, functions, I can't click on it.
| | 06:30 | So you can programmatically work
with buttons as well as declaratively in
| | 06:35 | the markup.
| | Collapse this transcript |
|
|
4. Creating jQuery Mobile FormsUnderstanding form basics| 00:00 | One of the places where jQuery
Mobile really comes in handy is in the
| | 00:04 | creation of mobile forms.
| | 00:06 | jQuery Mobile automatically enhances
the form elements in a jQuery Mobile
| | 00:12 | webpage to look really nice and
professional and have nice styling kind of like
| | 00:18 | native applications do.
| | 00:20 | Now, there are a couple of things you
need to remember about jQuery Mobile forms.
| | 00:23 | First, all the form controls
should be wrapped in a valid form tag;
| | 00:27 | you can't have form
controls that are outside of forms.
| | 00:30 | You got to have the controls inside
a valid form tag for jQuery Mobile's
| | 00:34 | enhancement to work properly.
| | 00:35 | The other thing is that all form
controls have to have unique ID attributes
| | 00:39 | across the entire site, not just the
page that they're currently in, and the
| | 00:43 | reason for this is because you have
to remember that jQuery Mobile is doing
| | 00:46 | things all the time like loading pages
via AJAX and then sorting them into the
| | 00:51 | DOM so that things work correctly.
| | 00:53 | You should make sure that any ID
attributes you have assigned to the form
| | 00:57 | controls in your form are unique not
just within their containing page, but
| | 01:03 | across the entire site as well.
| | 01:05 | The submission of forms is
automatically handled via AJAX.
| | 01:10 | So jQuery Mobile when the form goes to
be submitted will intercept that process
| | 01:16 | and submit the form using its AJAX engine.
| | 01:20 | Now, I want to emphasize here, there's
nothing special that you need to do on
| | 01:25 | your server end in order to handle form
submissions from jQuery Mobile, you can
| | 01:30 | just go ahead and use the form
submission logic that you're already using.
| | 01:34 | In fact, it's pretty much invisible to you;
| | 01:36 | you just simply define the form like
you normally would, you define the method
| | 01:40 | that the form is going to submit via
either get or post, you define the handler
| | 01:46 | script and everything should just work normally.
| | 01:49 | To group related controls together in
a form, you use a data-role attribute
| | 01:55 | named fieldcontain, and this is a
little bit different than the control group
| | 02:00 | data-role that we talked about earlier.
| | 02:02 | In this case, the fieldcontain takes a
label associated with a form control and
| | 02:08 | lays it out properly based
upon the width of the page.
| | 02:12 | So when the width of the page is
greater than 480 pixels, it will automatically
| | 02:17 | place the label next to the
form control on the same line.
| | 02:21 | But, when the width of the window is
480 pixels or less, it will automatically
| | 02:26 | fall back to placing the label above the
form field in the form, which is a nice
| | 02:33 | little layout helper that
jQuery Mobile gives you.
| | 02:36 | But, you have to wrap the related label
and form control in a container element,
| | 02:41 | usually a div, named fieldcontain or
with a data-role attribute of fieldcontain.
| | 02:46 | jQuery Mobile now requires that
controls have label tags, and the reason why
| | 02:52 | this requirement is there is for accessibility.
| | 02:55 | Now, there are times when you don't
want the label to be usable and in order to
| | 02:59 | make that happen, jQuery
Mobile gives you a CSS class called
| | 03:03 | ui-hidden-accessible, which you can
apply to the label which will hide the
| | 03:09 | label and you can use whatever
placeholder text you want inside the form
| | 03:13 | control, which if you're in a
situation where you don't want the label to be
| | 03:17 | visible, then that's fine.
| | 03:19 | So let's take a look at some
of these form basics in action.
| | 03:23 | We're going to jump over to my code
editor, and I've got my Snippets opened up
| | 03:27 | to my Form Basics section and I
have my formbasics_start page open.
| | 03:32 | So let's take a look at some of the concepts
we've discussed so far and see them in action.
| | 03:37 | So the first thing we're going to do is
copy the form itself, and I'm going to
| | 03:41 | copy this guy right here, and paste it into
the content area, and just close off that form.
| | 03:50 | So let's take a label, and an input
field, and paste it in, and we'll put that
| | 03:56 | here inside the form.
| | 03:57 | So what I've done is put in a label
for this item here called the input.
| | 04:04 | You can see that has the same name as
the for attribute on the label here and
| | 04:09 | it's got some placeholder text right here.
| | 04:12 | So the nice thing about jQuery Mobile
is that jQuery Mobile will implement a
| | 04:17 | lot of the HTML5 form attributes for you even in
browsers that don't officially support them yet.
| | 04:22 | It's a nice little feature.
| | 04:23 | In browsers that support HTML5 form
features, they're just handled natively, but
| | 04:28 | jQuery Mobile will fill in those
browsers that don't support them.
| | 04:31 | So let's run what we currently have, and
you can see here I've got my label with
| | 04:36 | my placeholder text.
| | 04:37 | So far, everything looks fine, but
notice that when I make the window larger,
| | 04:41 | they stay on separate lines and the
input field gets really long and what you
| | 04:47 | really want to have happen is have
the label on the same line as the text.
| | 04:51 | We'll take a look in a
little bit on how to do that.
| | 04:53 | Let's go back to the Snippets.
| | 04:57 | Now, in this case, what I'm going to do
is copy in another label and input.
| | 05:03 | Only in this case, I have the class of
ui-hidden-accessible defined, so that
| | 05:11 | in this case, the label won't be visible, but
the input field will take up the entire line.
| | 05:19 | So let's save this, and run it.
| | 05:23 | So here you can see here's the first
label with its associated input field, and
| | 05:27 | in the second case, only the input
field is visible, the label is not visible
| | 05:31 | because it's being hidden.
| | 05:32 | It's still there, so screen readers and
other assistive technologies that will
| | 05:37 | help users with those disabilities can
still get the content of the form label,
| | 05:42 | but it's just not visible on
the screen right now. All right.
| | 05:45 | Next, let's take a look
at what fieldcontain does.
| | 05:48 | So I'm going to copy those
lines, go back to my form.
| | 05:54 | Now, what I've done here is defined a
container div with a data-role attribute
| | 06:00 | named fieldcontain, and in this case,
I've got a label and an input just like I
| | 06:05 | have in the two examples above here,
and this one has a setting called Your
| | 06:09 | Address, and the placeholder text here
is Your Address.
| | 06:12 | So let's see how that works.
| | 06:14 | We're going to save, we're going to run
and you can see that when the window has
| | 06:17 | a certain width, the label, and
the field appear on the same line.
| | 06:22 | But, when the window gets down to
about 480 pixels, you can see that what's
| | 06:27 | happening is the label is going on its
own line, and the input field is going
| | 06:32 | on the line below it, and the field
container is putting a nestled divider line
| | 06:37 | between the bottom of this little control
set here and the next element in the page.
| | 06:43 | If you want to combine the ability to
hide the label with the field container,
| | 06:48 | the way that you do that is by
using the class of ui-hide-label.
| | 06:53 | Now, this is slightly different
than the ui-hidden-accessible.
| | 06:58 | I am going to put that
right on the field container.
| | 07:02 | So now, same thing, only in this
case, the label will be hidden.
| | 07:05 | So when I run this again, you can
see that the same behavior is there.
| | 07:10 | So the field container is still putting
this little divider line there, and the
| | 07:15 | field grows with the width of the
window, only now in the case of the input
| | 07:19 | element above it, both
those labels are now hidden.
| | 07:23 | Okay, so that gives a pretty good
introduction to the basics of form handling.
| | 07:27 | Let's move into some more
complex form elements now.
| | Collapse this transcript |
| Using text and search inputs| 00:00 | jQuery Mobile supports basic text
inputs and the newer HTML5 ones as well.
| | 00:06 | So as you might expect, you can do
things like this where you have input
| | 00:09 | type="text", and of course, jQuery
Mobile requires to have labels to go
| | 00:14 | along with your inputs.
| | 00:15 | But you can also use the newer HTML5
input types, things like number, things
| | 00:20 | like email, and all the rest of them,
URL and range, and all that stuff as well.
| | 00:25 | They're all supported and jQuery Mobile
supports the HTML5 attributes on those
| | 00:30 | input types as well.
| | 00:31 | In browsers that support it natively,
that's not a big deal, but in browsers
| | 00:35 | that don't support it natively,
it's a really nice feature.
| | 00:38 | Now in desktop browsers that's not a
particularly useful feature because you
| | 00:42 | have a full keyboard at your disposal
and you can enter data really easily.
| | 00:46 | Where this really comes in handy is
when you're running your Web application on
| | 00:50 | a mobile device like an iPhone or an
Android and the Browser is smart enough to
| | 00:55 | look at the input type and switch the
virtual onscreen keyboard to match the
| | 01:00 | kind of input that you're about to enter.
| | 01:02 | There's also a supported input type of search
and we'll take a look at that in a little bit.
| | 01:08 | This is an input type that has a nice
little UI that's specifically tailored for
| | 01:13 | search terms and textarea
controls are supported as well.
| | 01:17 | And a nice little feature of textarea
controls is that as you type text in them,
| | 01:22 | they will automatically grow larger
and larger in order to avoid scrollbars
| | 01:26 | appearing which can be really
hard to use on mobile devices.
| | 01:30 | So let's jump over to the code and see how
text and search inputs work in jQuery Mobile.
| | 01:36 | So here in my Editor I've got my
Snippets down on Text and Search Inputs and
| | 01:41 | I've got my inputs_start file open and
I'm going to go ahead and start trying
| | 01:46 | some of these things out.
| | 01:48 | So the first thing I'm going to do is
get my form into the page and I'll put the
| | 01:51 | form right here and just
close that off, alright.
| | 01:55 | Now I'll go back to the Snippets.
| | 01:58 | And in this case, my field
containers are not going to be divs.
| | 02:02 | I'm actually going to use
a fieldset in this case.
| | 02:04 | Now again, you can use fieldset, you can
use divs, whatever container you want to use.
| | 02:09 | The nice thing about fieldsets is that
they support using legends which we'll
| | 02:12 | probably see a little bit later.
| | 02:14 | So the first thing I'm going to do is
copy the first fieldset in here into my form.
| | 02:20 | And in here you can see that I'm
using various different input types.
| | 02:24 | I've got address right here, I've got
a number, I've got an email, I've got a
| | 02:29 | date right here, and actually, oops,
I've got to fix that right there.
| | 02:33 | So these are various input types, some
of them are basic input types, a couple
| | 02:38 | of them are HTML5 input types.
| | 02:41 | Well, let's just go ahead and run
this and see what happens in the Browser.
| | 02:44 | So you can see here when I bring up the
form, the address field gets a regular
| | 02:49 | text input but my age right
here is a numerical input.
| | 02:55 | And Safari is showing me these up-down
counters that I can use to enter numbers with.
| | 03:00 | My e-mail address input field right
here is a typical email field, and again,
| | 03:05 | if we run this on an iPhone, you
would see the virtual onscreen keyboard
| | 03:08 | switch to email input.
| | 03:09 | And here's a date input, and when I
use a date input, I get these up-down
| | 03:15 | counters and I can use this to
enter a date instead of a digit number.
| | 03:20 | Well, that's pretty cool.
| | 03:22 | All right, so far so good.
| | 03:24 | Let's go back to the code,
let's try some other things.
| | 03:27 | I'm going to copy this one
right here, this is a Search Box.
| | 03:34 | So we'll put this down below the
other fieldset but inside the form.
| | 03:38 | All right, so in this case we're using
an input type of search, and ordinarily,
| | 03:46 | without any enhancement this would
just look like any other text input.
| | 03:50 | But in jQuery Mobile it gets
enhanced to look a little bit different.
| | 03:55 | So you can see that the search
input has a little Search icon with some
| | 03:59 | automatic placeholder text
that says Search the site.
| | 04:02 | And when I put the focus in there and
start to type a search term, you can see
| | 04:06 | that little Delete button labeled Clear
Text appears and I can use that to clear
| | 04:12 | out whatever I've got
currently entered into that field.
| | 04:15 | So again, jQuery Mobile is enhancing
the field to look like a Search Box that
| | 04:21 | looks native to the platform.
| | 04:23 | You can tell that the corners are a
little bit more rounded than some of the
| | 04:26 | other input fields are.
| | 04:27 | So it's just a nice little visual cue
that this is a searching input field.
| | 04:32 | All right, let's go back to the code
and in the Snippets, I'll go down to the
| | 04:38 | next example and this is the
last one and this is a textarea.
| | 04:44 | So we'll put the text area in the form
here and we'll go back to the Browser.
| | 04:50 | So now in the case of the text area,
it starts out being two lines tall, but
| | 04:56 | you'll see that as I type text in here,
I'll put in a line in, now watch what
| | 05:02 | happens when I put in the third line.
| | 05:04 | You'll see that the text area grows
automatically, and that's to avoid any
| | 05:09 | scrollbars from popping up.
| | 05:12 | And you can see that as I enter more
text, it grows by two lines each time.
| | 05:16 | So again, that's the behavior that you
just get by default of using jQuery Mobile.
| | 05:20 | You don't have to do any special
programming to get any of the features that
| | 05:23 | you've seen here in this example.
| | 05:24 | jQuery Mobile just automatically
enhances your mobile forms to look really good
| | 05:30 | on the Browser that you're
using for your particular device.
| | Collapse this transcript |
| Using radio buttons, checkboxes, and toggles| 00:00 | As you would expect, jQuery Mobile
supports radio buttons and checkboxes and
| | 00:05 | introduces a new kind of
control called a Toggle Switch.
| | 00:08 | Now jQuery Mobile of course uses the
standard markup for radio buttons and
| | 00:13 | checkboxes, but it
enhances them on mobile devices.
| | 00:17 | And a specially named select list can
be styled to behave as a Toggle Switch.
| | 00:24 | And you've seen these toggle
switches on various mobile devices before.
| | 00:28 | They're basically a binary switch that
can be flipped into one of two different
| | 00:33 | positions, either On or Off or
however they happen to be labeled.
| | 00:37 | Controls can also be grouped
together in vertical and horizontal layouts.
| | 00:43 | So just like you can do with buttons,
you can do the same thing with radio
| | 00:46 | buttons and checkboxes.
| | 00:48 | So let's take a look at the
code and see how this works.
| | 00:52 | So here in my Code Editor I've got
my Snippets open and I'm down in the
| | 00:55 | Radiobuttons and Checkboxes section and
I've got my radioschecks_start file and
| | 01:01 | my toggle_start file open.
| | 01:03 | Let's go ahead and start actually with
the Toggle Switch, so I'm just going to
| | 01:08 | scroll down a little bit
to the Toggles section here.
| | 01:11 | And let's go over to the toggle_start.
| | 01:14 | Here this is the empty content section
which is where our form is going to go.
| | 01:19 | So I'll go back over my Snippets and
I'm just going to copy these lines right
| | 01:23 | here and paste them in.
| | 01:27 | So what I have here is my form, and in
my form I have a fieldset which has a
| | 01:28 | data-role attribute of fieldcontain on it.
| | 02:00 | And that's because I'm grouping
this label with this select list.
| | 02:01 | Now you'll notice that the
select list is a little bit special.
| | 02:02 | First, it only has two options in it.
| | 02:03 | There's the first option and the second
option and these two options represent
| | 02:04 | the two different states that the
Toggle Switch can be in at any given time.
| | 02:05 | There is also a data-role
attribute on the select tag named slider.
| | 02:07 | And this is the special flag that tells
jQuery Mobile that this is actually not
| | 02:09 | a select menu, it's a Toggle Switch.
| | 02:12 | So when jQuery Mobile enhances this
control, it's going to draw it differently
| | 02:18 | than a select menu normally would be.
| | 02:21 | So let's save and see how this works.
| | 02:23 | So I'm going to run this and you can
see that when I run it, the Toggle Switch,
| | 02:30 | first here's the label and here's the
switch, right, so here's the On state and
| | 02:34 | there's the Off state.
| | 02:36 | So it's a two-state switch
that can be either On or Off.
| | 02:40 | And because I'm using the fieldcontain,
you can see that as the window gets
| | 02:44 | wider, the control goes on the same
line as its label or it goes on the
| | 02:50 | line below the label.
| | 02:52 | In this case, this is the only control
in the page, so there's not much else to
| | 02:56 | separate it, but that's the purpose
of using the fieldcontain right there.
| | 03:01 | So that's how you make a Toggle Switch.
| | 03:03 | Okay, let's go back and take a
look at Radiobuttons and Checkboxes.
| | 03:07 | So I'm going to close this.
| | 03:08 | All right, over here in my radios and
checks file, you can see down here I've
| | 03:14 | got my div where the content is
going to go, so we'll scroll back up.
| | 03:19 | And the first thing I'll do is put my
form in here along with my first fieldset
| | 03:25 | and these are going to be the radio buttons.
| | 03:28 | So I'll copy that and we'll paste
that in and we'll close off the form.
| | 03:34 | So now I've got my form
and I've got my fieldset.
| | 03:39 | And inside the fieldset, first I
have a data-role attribute on the
| | 03:43 | fieldset named controlgroup.
| | 03:45 | So we've seen this before with buttons,
but now I'm using it with the radio
| | 03:48 | buttons and we'll see the
effect of that in a moment.
| | 03:51 | And I've also got a legend inside the
fieldset which is going to provide a label
| | 03:58 | for the Radio Button group.
| | 04:01 | Now of course each one of the radio
button inputs has to have an associated
| | 04:06 | label to go along with the radio
button for accessibility purposes.
| | 04:10 | But let's watch what happens when this
actually gets drawn in the Browser, so
| | 04:16 | I'm going to run this.
| | 04:18 | And you'll see that the radio buttons are
being styled a particular way by jQuery Mobile.
| | 04:23 | Here's the content of that legend
tag right here, so that's serving as an
| | 04:27 | overall label for the Radio Button group.
| | 04:30 | And the label content of each one of the
Radio Button tags, so you see here is a
| | 04:36 | radio button right here and here's the
label that goes along with it, the label
| | 04:40 | is being converted into a
part of the radio button itself.
| | 04:44 | So here's the actual radio button,
but you can see that the label has been
| | 04:47 | turned into a clickable element which
makes the accessibility and usability on a
| | 04:53 | mobile device much easier because I'm
giving my finger a nice larger hit target.
| | 04:58 | So jQuery Mobile is incorporating the
content of that label tag into the way
| | 05:03 | it's rendering the radio
button. So let's move on.
| | 05:08 | Let's now get our next fieldset here,
and these again are going to be radio
| | 05:14 | buttons, but in this case, the control
group, let me paste it in so you can see.
| | 05:20 | So here you can see that the control
group has a data-type attribute of horizontal.
| | 05:26 | So rather than being vertical, these
radio buttons are now going to be horizontal.
| | 05:31 | So let's run this and you can see here that I
have radio button behavior on these buttons.
| | 05:38 | And because of the controlgroup
setting, you can see that only the outside
| | 05:42 | ones have the rounded corners, this is nice
and flush, as are these here in the controlgroup.
| | 05:47 | So here I have a radio behavior on a
horizontally grouped set of buttons.
| | 05:52 | All right, let's move on.
| | 05:55 | Next I'm going to show checkboxes.
| | 05:58 | In this case, I'm going to copy that and
paste it down here at the end of the form.
| | 06:06 | So once again, I have a fieldset
with a data-role of controlgroup and I'm
| | 06:10 | grouping together this legend
and this label and this checkbox.
| | 06:14 | So let's save that and let's run it,
and you can see just like the radio
| | 06:19 | buttons, the label is being
incorporated into the control itself.
| | 06:23 | The same is true with the checkbox.
| | 06:25 | And you can see that this is the
content of the label, this is the legend right
| | 06:29 | here, and here's the actual checkbox by itself.
| | 06:32 | So jQuery Mobile is
enhancing these controls pretty well.
| | 06:36 | And then last but not least, let's
take a look at a group of checkboxes.
| | 06:41 | I'll copy and paste that down here.
| | 06:47 | So in this case I have a control
group of many different checkboxes.
| | 06:52 | I've got three checkboxes in here and
I'll run that and we'll scroll down and
| | 06:57 | you can see that we're getting the same
kind of rendering as the radio buttons.
| | 07:00 | Only in this case we have checkboxes
which are multiple select instead of radio
| | 07:05 | buttons in which only a
single selection can be made.
| | 07:08 | So using jQuery Mobile, we're able to
create control groups using radio buttons
| | 07:13 | and checkboxes and toggle switches that
not just look really good, but are using
| | 07:18 | all the contents of the different
elements used to specify the control group to
| | 07:23 | really create a nice, highly-
usable experience on mobile devices.
| | Collapse this transcript |
| Using select lists and sliders| 00:00 | All right. Let's finish up this section by taking
a look at using sliders and select menus
| | 00:04 | in our jQuery Mobile forms.
| | 00:06 | To create a slider Control, you basically
use a standard input tag with a type of range.
| | 00:13 | And this is one of the new HTML5
input types that some of the newer, more
| | 00:19 | modern browsers support.
| | 00:21 | But for those that don't support it,
jQuery Mobile provides an implementation.
| | 00:25 | And in fact, even in those browsers
that do support it, the implementation is
| | 00:30 | styled to look consistent
across different platforms.
| | 00:33 | So the way to use a
slider is something like this.
| | 00:36 | You have an input tag with a type of
range and then you specify values like the
| | 00:41 | current value of the
control is the value attribute.
| | 00:44 | And then you have min and max attributes
which represent the minimum and maximum
| | 00:50 | value of the slider Control.
| | 00:51 | And of course, there is a label that
goes along with it and everything is
| | 00:54 | wrapped inside a fieldcontain so that
the label appears next to the control or
| | 01:00 | above it based upon the width of the window.
| | 01:03 | Select menus are a little bit different.
| | 01:04 | You specify them as you usually do.
| | 01:06 | You have your select tag like this and
then inside the select tag, you have options.
| | 01:10 | And of course, jQuery Mobile respects
values like disabled and whatever else you
| | 01:15 | have inside your select list
which are standard HTML settings.
| | 01:19 | And of course, there is a label
that goes along with it and we wrap
| | 01:22 | everything in a fieldcontain.
| | 01:25 | Now by default, jQuery Mobile will
provide whatever the platform's native select
| | 01:31 | menu implementation is for
selecting values from the list.
| | 01:36 | So for example, on the iPhone,
when you tap on the select list, that
| | 01:40 | little spinner control comes up and
you can spin to the different values
| | 01:43 | and then select a value.
| | 01:45 | On Android it's a little bit different, on
Windows phone it's a little bit different.
| | 01:49 | But by default, that's
the behavior that you get.
| | 01:52 | The onscreen appearance of the select
menu is consistent across platforms,
| | 01:58 | but the actual process of selecting the value
is specific to however that platform does it.
| | 02:04 | Now you can change that if you want to.
| | 02:06 | jQuery Mobile can create customized
select menus in which the selection process
| | 02:13 | is the same across platforms.
| | 02:15 | So why would you want to do this?
| | 02:17 | Well, in jQuery Mobile's version of
the selection UI, it supports multiple
| | 02:23 | selection and it supports
option groups which are kind of nice.
| | 02:26 | It also allows you to style
the selection menu with CSS.
| | 02:32 | So if that's important to you, then you
can use a customized select menu to do so.
| | 02:36 | But probably the most important
reason is that this ensures consistent
| | 02:40 | behavior across platforms.
| | 02:42 | Different mobile browsers have
different implementations for selecting
| | 02:47 | values from select lists.
| | 02:48 | And in the cases of some browsers versus
others, not all of the desktop features
| | 02:53 | are always present and some things
are supported and some things are not.
| | 02:57 | So using a custom select menu in jQuery
Mobile we'll ensure that the experience
| | 03:02 | is the same across all platforms that
your Web application is being run on.
| | 03:07 | Now the way you do this, well there is
one of two ways, for a particular select
| | 03:11 | menu, you can use the data attribute
called data-native-menu="false", which in
| | 03:18 | this case will simply say, hey jQuery
Mobile, for this particular select menu
| | 03:22 | use your customized selection algorithm.
| | 03:26 | If you want to apply this behavior
globally to all of the select lists in your
| | 03:31 | site, then you can bind to the
mobileinit event that jQuery Mobile sends out
| | 03:37 | when it's initializing and set the
global property, which you see here, it's
| | 03:42 | nativemenu and it's buried deep inside
the selectmenu.prototype to be false.
| | 03:47 | Now that particular technique is
probably not familiar to you just yet and we'll
| | 03:51 | get to using the mobileinit
event later on in the course.
| | 03:55 | But this is the technique you'll use
when you want to set a global property
| | 03:59 | across jQuery Mobile.
| | 04:01 | All right, so let's jump over the code
and see select menus and sliders in action.
| | 04:06 | So over here in the code, I've got my
Snippets and my Snippets are scrolled down
| | 04:11 | to Select Lists and sliders and I've
got my different select_start files open
| | 04:16 | along with my slider_start file.
| | 04:18 | So we're going to start with the
slider, so let's create a slider control.
| | 04:22 | What I'm going to do here is in my
Snippets, I'm going to copy this code right
| | 04:27 | here and paste it in and I'm
going to put in the content section.
| | 04:34 | So here I've got my fieldset which is
my field container and inside there I've
| | 04:39 | got my legend which is
going to serve as the label.
| | 04:42 | And here I've got my label that goes
along with my range input right here and
| | 04:48 | you can see that I've got a current
value of 25 and it goes from 0 up to a 100.
| | 04:53 | So I'm going to save this, I'm going to run it.
| | 04:56 | When we run this, you can see that
here's my slider Control right here.
| | 05:02 | This is the slider portion, here
is the associated text input field.
| | 05:06 | And you can see that as I'm moving the slider
Control, the number is updating in the Edit field.
| | 05:12 | I can also type a number in there,
like say 50, and you can see that as I'm
| | 05:17 | typing the number in, the
slider is updating in real-time.
| | 05:22 | I can also use the Up/Down arrows to
change the number and then when it loses
| | 05:27 | focus, you can see that it updates.
| | 05:30 | I can also use the keyboard.
| | 05:31 | So here I'm using the Left and Right
arrows and the Up and the Down arrows and I
| | 05:38 | can use the Home and End keys to go to
min and max, so lots of different ways
| | 05:44 | for interacting with this control.
| | 05:46 | So that's how you build a slider,
let's take a look at the select menus.
| | 05:51 | Let's start off with the basic select list.
| | 05:53 | I'm going to move over to my
selectbasic_start file and I'll scroll to the
| | 05:58 | basic version here.
| | 05:59 | Okay, we'll copy this and we'll paste it in.
| | 06:07 | Okay, so here's my label and this is
the basic select menu and you can see
| | 06:12 | here I have a select and it's got a
name and id, it's got some options in
| | 06:16 | here, one of those options is disabled,
each one of those has a value along
| | 06:21 | with a text representation.
| | 06:23 | So let's save and run.
| | 06:25 | So you can see that jQuery Mobile has
progressively enhanced the appearance of
| | 06:31 | the select list here in the Browser,
but when I tap on it, you can see that I'm
| | 06:36 | getting the platform
native pop-up menu experience.
| | 06:40 | Now here on the desktop in Safari,
I'm getting a regular select list.
| | 06:44 | On a mobile device, this would look a
little bit different, and you can see here
| | 06:47 | that value is disabled so I can't select it.
| | 06:50 | And when I choose a value, that
value gets updated inside the control.
| | 06:55 | All right, so that's a basic
version of the select control.
| | 06:59 | Let's take a look at a more advanced
version, let's take a look at the selectgroup.
| | 07:05 | So I'll move over to this one and in
the Snippets, we'll go down to the Group.
| | 07:10 | Now why would you use a Group?
| | 07:12 | Well, let's take a look.
| | 07:14 | I'm going to copy all this in
here and I'm going to paste it in.
| | 07:22 | So what I've got here is a form with a
div in here and the div is assigned a
| | 07:32 | data-role of the fieldcontain.
| | 07:34 | And then inside that I've got a
fieldset which is a controlgroup and it's
| | 07:39 | specified to be vertical.
| | 07:41 | So I've got two select lists in here.
| | 07:44 | Here's one which contains a list of months and
here's another which contains a list of years.
| | 07:50 | So before I explain this any further,
let's just take a look at this in the Browser.
| | 07:53 | So you can imagine that this might be
the kind of experience that you might see
| | 07:58 | in an application that's asking you say
for an expiration date on a credit card.
| | 08:03 | So here we've got a way to select the
month and we have a way to select the year.
| | 08:08 | So I've got two different select
lists that are grouped together.
| | 08:11 | And you can see that because they're
in a control group, the edges are being
| | 08:15 | styled correctly so that they're
flushed against each other, only the tops and
| | 08:18 | bottoms have the curled
edges and they work together.
| | 08:21 | They're nice and visually
grouped with each other.
| | 08:23 | So let's go back over to the code,
let's change this to horizontal.
| | 08:28 | All right, now let's run this again.
| | 08:33 | And now you can see that the
experience is a little bit different.
| | 08:35 | So when I make the window larger,
because of the fieldcontain behavior I get the
| | 08:40 | label on the same line, but when I make
it smaller, it goes to different lines.
| | 08:44 | And again, this is just a nice way of
providing an experience to the user that
| | 08:48 | groups two related select lists
with each other, so pretty neat.
| | 08:55 | Let's take a look now at our last
example and that's going to be the
| | 09:00 | customized select menu.
| | 09:03 | So we'll jump over the start version
of that and we'll scroll down in here
| | 09:07 | to the Custom version.
| | 09:10 | Now in this case, a couple
different things going on.
| | 09:17 | So I'm going to select all those in
the form and paste them in down here.
| | 09:25 | So I've got two different fieldsets in here.
| | 09:29 | So here's my form and here's
fieldset number one and this has the role
| | 09:33 | of fieldcontain in it.
| | 09:34 | Now there's no control group,
it's just one select menu in here.
| | 09:38 | And you can see that a couple
of different things are going on.
| | 09:40 | First, I'm using the
data-native-menu="false"
to indicate to jQuery Mobile that
| | 09:46 | this should use the
customized value selection process.
| | 09:51 | I've also got options in here as well.
| | 09:53 | So I've got an option group (optgroup)
here labeled First Group and down here
| | 09:57 | I've got an option group labeled Second
Group, and inside the groups, I've got
| | 10:01 | different option values.
| | 10:03 | So before I explain it any further,
let's just actually see what's going on.
| | 10:06 | We'll run this in the Browser.
| | 10:08 | So here's my Custom Select menu and when
I click on the Choose One, notice how I
| | 10:12 | get the customized value
selection experience now.
| | 10:16 | This is no longer the native
menu that's being popped up.
| | 10:19 | Now when I choose a value, I'm
doing it using the customized selection
| | 10:24 | experience, which is kind of nice.
| | 10:26 | So a couple things to notice.
| | 10:27 | Here's the option groups, right here.
| | 10:29 | The option groups are being styled as
these group labels and you can see that
| | 10:32 | they're not selectable.
| | 10:33 | When I click on those guys, nothing happens.
| | 10:35 | The only time something
happens is when I select a value.
| | 10:38 | The other thing you notice is that here
there's a Choose One label up at the top.
| | 10:43 | And if you look back in the code, you'll
notice that that's this option right here.
| | 10:48 | Well, how did jQuery Mobile know to
use this option as a title rather than
| | 10:55 | a selectable option?
| | 10:57 | The reason is because jQuery
Mobile looks for option tags that have
| | 11:00 | certain properties.
| | 11:02 | If you for example, choose to create an
option tag that has no value attribute,
| | 11:08 | then that signals jQuery Mobile
that this should be used a label.
| | 11:11 | Similarly, if I provided no text but
just said (value= that) and I ran this, once
| | 11:20 | again, same idea, only now you'll see
that when it gets run, there's no default
| | 11:24 | value selected here because
there's no value inside this option tag.
| | 11:29 | And similarly, if I just simply leave
the thing entirely empty, just an empty
| | 11:34 | option altogether, once again,
there's no default option provided.
| | 11:39 | So let's undo that.
| | 11:43 | And the other thing you notice is that
the option group's labels right here are
| | 11:48 | what's being used as the labels inside
those highlighted group labels inside
| | 11:53 | the UI, right here.
| | 11:56 | Let's take a look at the second one.
| | 11:58 | In this case, we're enabling multiple
selections, so I can select more than one thing.
| | 12:04 | And up here is the label and there's a
little Close box that I can use when I'm
| | 12:07 | done making my selections.
| | 12:09 | And you can see that when I make
selections, the values appear in the label of
| | 12:14 | the control along with a Count Bubble
indicating how many options I've chosen.
| | 12:18 | So if I only choose two,
then Count Bubble changes to 2.
| | 12:23 | If I choose a whole bunch, then it fits
as many values as it can but shows the
| | 12:28 | number of selections in the Count Bubble.
| | 12:31 | So let's go back to the code
and see how I implemented that.
| | 12:34 | Basically, in this case, I have
a label called Multiple Enabled.
| | 12:38 | And right here I have my
option with only text inside of it.
| | 12:42 | That's what's serving as the label at
the top of the customized experience.
| | 12:46 | And I've got multiple="multiple"
set on my select list.
| | 12:51 | That's standard HTML, that's
not a jQuery Mobile feature.
| | 12:54 | jQuery Mobile just recognizes
that and sets the select list to be
| | 12:58 | multiple selection enabled.
| | 13:00 | And once again, I'm using data-native-
menu="false" to trigger the customized
| | 13:05 | selection experience
rather than the native menu.
| | 13:08 | And by setting all those options, I'm
able to get a select list that provides me
| | 13:13 | with multiple selection.
| | 13:16 | That wraps up the coverage of
jQuery Mobile form features.
| | 13:20 | You can see that using jQuery Mobile,
you can get some pretty advanced form
| | 13:23 | features just using standard HTML markup.
| | Collapse this transcript |
|
|
5. Working with List ViewsOverview of list views| 00:00 | In this section, we are going to talk
about list views and list view controls.
| | 00:04 | List Views are probably one of the more
popular ways of displaying information
| | 00:09 | on mobile devices either in
native applications or in webpages.
| | 00:14 | And jQuery Mobile provides a very
powerful framework for marking up information
| | 00:19 | and displaying it in a List View.
| | 00:21 | So before we actually get started
building our own list views, and seeing how
| | 00:25 | the markup works and so on, what I am
going to do is take a little bit of a tour
| | 00:30 | through what list views can do on
jQuery Mobile and I thought there's no better
| | 00:34 | place to do that than on their own
website, because they have a pretty good
| | 00:38 | gallery of examples of what list views can do.
| | 00:41 | So here I am on jquerymobile.com and I am
going to start off by clicking on the Docs section.
| | 00:46 | And when you go to the Docs section, the
first thing you notice is we're greeted
| | 00:50 | with a couple of list views.
| | 00:52 | On the left-hand side we have a list
view that's styled a certain way, and we've
| | 00:56 | got various categories here for
the different parts of jQuery Mobile.
| | 01:00 | Over here, we have some list views,
and you can see that this is a List View
| | 01:04 | that has some divider items.
| | 01:05 | This is a heading called Components,
down here is another non-clickable divider
| | 01:11 | that's called API, and you can see
that as I move the mouse over each one of
| | 01:15 | these items, it lights up and there is
some click behavior that happens on it.
| | 01:21 | It gets highlights when I click on it.
| | 01:23 | There's a little standard right-pointing
arrow which is an indicator that when I
| | 01:27 | click on it, something is going to happen.
| | 01:29 | So using jQuery Mobile, you can build
these kinds of list view controls for your
| | 01:34 | own mobile web applications.
| | 01:36 | So to see what kinds of list views are
available, I am going to go ahead and
| | 01:39 | click on the List views item here in
the documentation for the API, and that
| | 01:45 | will take us to the Lists section.
| | 01:48 | If I scroll down this page, you will
notice that there are a lot of options in here.
| | 01:51 | There are all kinds of examples of
things you can do with list views.
| | 01:55 | So let's just start off by taking a
look at the most basic list, which is the
| | 02:00 | Basic linked list right here.
| | 02:02 | So you can see that this is the Basic
linked list, and as I scroll down, there
| | 02:06 | is nothing really all that advanced about it.
| | 02:08 | Each item has a piece of text.
| | 02:11 | There is an arrow over here and
each one of these is clickable.
| | 02:14 | Now, creating a Basic list like this
is pretty simple and we will see that a
| | 02:17 | little bit later, but for now
let's look at some other lists.
| | 02:20 | Let's take a look at the Numbered list.
| | 02:22 | So this is the same as the Basic list,
but you can see that now there are
| | 02:26 | numbers next to the items.
| | 02:29 | Same idea though, clickable items,
right-facing arrow, only difference that
| | 02:33 | there is numbers over here.
| | 02:34 | Let's take a look at the dividers.
| | 02:36 | Here is a list that has dividers in it,
and you can see this is kind of like an
| | 02:40 | Address Book application where you have
the headers with the letters in them and
| | 02:46 | then names underneath each one of those,
and you can see that the dividers are
| | 02:50 | styled a bit differently and they
don't have the right-facing arrows.
| | 02:54 | They are not clickable items.
| | 02:55 | They are just serving as information separators.
| | 02:59 | Now, let's keep on going.
| | 03:01 | Let's take a look at the Count Bubble example.
| | 03:03 | Now, you've probably seen
examples like this before.
| | 03:05 | You have got the list items, you have
got your right-facing arrow, but here's
| | 03:10 | a little Count Bubble that's inside
the list item, and this basically shows
| | 03:14 | you some additional information
that's associated with that particular item
| | 03:18 | that's in the list view.
| | 03:20 | So in this example, we are looking at
what appears to be an email application,
| | 03:24 | and so we have categories for Inbox and
Outbox and Sent and Trash and so on, and
| | 03:29 | each one of those has a
number associated with it.
| | 03:31 | So in the Inbox, we've got 12 new email
messages, and in the Trash, we've got 62
| | 03:35 | items that need to be emptied,
and we have sent 328 things.
| | 03:38 | So you can easily build this kind of
information into your list views when you
| | 03:43 | build your app with jQuery Mobile.
| | 03:44 | Let's get a little bit more advanced.
| | 03:46 | Let's take a look at Nested lists.
| | 03:48 | Nested Lists are lists
that have lists inside them.
| | 03:51 | So in this case, we have
a list with three things;
| | 03:54 | we've got Animals, Colors, and Vehicles,
and you notice that when I click on the
| | 03:57 | Animals, I'm taken to another page that
has a sub-list in it, and if I click on
| | 04:03 | Pets, you see I have got things
like Canary, and Cat, and Dog.
| | 04:06 | The idea here is that you have got
lists that you can drill down into that
| | 04:10 | contain more and more detailed information.
| | 04:12 | So I am going to go back.
| | 04:13 | Let's take a look at the Split button list.
| | 04:17 | Now, the Split Button list is interesting.
| | 04:19 | What it does is it divides the
List item into two discrete areas.
| | 04:23 | There is the main area here that's
clickable, and you can see that there is some
| | 04:26 | information in the main area of
the list, sort of like a category.
| | 04:30 | But, there is also another clickable
item over here, and you can imagine that
| | 04:34 | there's all kinds of scenarios
where you might want to do this.
| | 04:38 | For example, in this example here we
are looking at what appears to be album
| | 04:41 | covers and clicking on this part of that
list item might take you to the details
| | 04:46 | about that particular album, whereas
clicking on this part of the button might
| | 04:50 | take you to the purchase page and so on.
| | 04:52 | So Split Buttons allow you to just
the scenarios where you want to have two
| | 04:56 | different clickable areas for two different
actions on the same list item. All right.
| | 05:01 | Let's keep going.
| | 05:02 | Here are some icons, and in this case,
we are looking at a list that has some
| | 05:07 | icons along the left-hand side of the
title part of the list item, and it also
| | 05:14 | has some count bubbles and some arrows.
| | 05:15 | So now we are getting into some
scenarios where we are combining
| | 05:17 | different features.
| | 05:19 | Then, last one we are going to look at
before we move on and start building our
| | 05:21 | own list views is the Search Filter bar.
| | 05:25 | So in this case, we have a list view,
the same as the Basic when we saw earlier.
| | 05:30 | But, in this case we have a
filter up here at the top.
| | 05:33 | So if I type items in here, you will see
that the list starts to get narrowed as
| | 05:39 | I type more and more information.
| | 05:40 | So for example, if I type Ac,
I get Acura and Cadillac.
| | 05:44 | So these are different car models and so on.
| | 05:46 | Again, these are all features that your list
items can contain in your own applications.
| | 05:53 | So now that we have seen a little bit
about what List Views are, and what they
| | 05:57 | can do, let's take a look at building
our own list views and see how to mark
| | 06:02 | them up to achieve the various
features that we have seen here.
| | Collapse this transcript |
| Basic list views| 00:00 | Let's begin by looking at how to
build some Basic List View features.
| | 00:05 | jQuery Mobile can enhance both ordered
and unordered lists, and the way that you
| | 00:09 | build these list views is use standard
HTML Markup to define either an ordered
| | 00:14 | or an unordered list and then you apply
the data-role of listview to the list,
| | 00:20 | and that's all you need to
do to make a basic list view.
| | 00:22 | jQuery Mobile, when it loads, will
search the page, find lists that have this
| | 00:27 | data role on them and then enhance them
to look like the list views that we saw
| | 00:31 | in the previous movie.
| | 00:32 | Now to make items tappable, you have to
enclose the List Item content inside link tags.
| | 00:39 | If you don't do this then
you will have a read-only list.
| | 00:42 | You have a list that will have items
in them that are for display-only but
| | 00:45 | don't respond to taps.
| | 00:47 | And to declare Divider items, you create
those by using the data-role of divider
| | 00:53 | on a particular list item.
| | 00:55 | So that's pretty much all there is to it.
| | 00:56 | To create a list view, all you do is
create a list either ordered or unordered,
| | 01:01 | apply the data-role of listview and
then put some list items in there, and if
| | 01:05 | we want the list items to be tappable
and what I mean by tappable is they will
| | 01:08 | have that little right-pointing arrow
on them, then just simply put anchor or
| | 01:13 | link tags inside your List Items,
and to define a Divider just put the
| | 01:17 | data-role of divider on your List Item,
and don't put a link in there because
| | 01:22 | you don't want it to be tappable.
| | 01:23 | All right, let's continue.
| | 01:24 | To define a Count Bubble like we saw
earlier you simply put the number inside a
| | 01:29 | span element or some other inline
element that you can style and then add the
| | 01:34 | class ui-li-count around
the number like you see here.
| | 01:39 | So in this case, I have got a list
item whose text is going to be List Item 1
| | 01:44 | with a number 15 in it and the number 15
is surrounded by a span with a class of
| | 01:49 | ui-li-count and that will wrap the
number inside that little circular bubble
| | 01:54 | like we saw in the previous example.
| | 01:56 | You can also specify Icons, and Icons
can be specified by, including image
| | 02:01 | inside link tag that has the
class ui-li-icon applied to it.
| | 02:07 | So here we have another example where I
have got my link, and inside the link, I
| | 02:10 | have my image which provides a path
to my image, in this case, a PNG image.
| | 02:15 | And then I saw in the class of ui-li-
icon to it and that will mark up the icon
| | 02:22 | centered in list item next to
the text that makes up the tag.
| | 02:26 | Okay, let's jump over the code and
actually build some of this stuff.
| | 02:28 | All right, so I am here in my code,
and I have got my Snippets opened, and I
| | 02:31 | have got basiclistview_start.
| | 02:34 | So let's start with a Basic List View
and you can see here that in my Basic list
| | 02:38 | view inside my content section I have two lists.
| | 02:42 | One of them is an Ordered List, one of
them is an Unordered List and I am going
| | 02:45 | to mark up each one of these
to appear to be a List View.
| | 02:48 | So I am going to do that is I am going
to copy this Ordered List tag right here
| | 02:53 | with the data-role of
listview on it, and replace that one.
| | 02:57 | I will do the same thing down here.
| | 03:02 | But that's an Unordered List, so I will
make that an unordered list, and I will save.
| | 03:07 | Now before I do anything else, let me
run this real quick, and you can see
| | 03:10 | that jQuery Mobile has now enhanced
the list so that in the top part, I have
| | 03:15 | an Ordered List and I have an
Unordered List down here, but notice how the
| | 03:18 | items are not clickable.
| | 03:19 | There are no arrows, there is no rollover
behavior when I move the mouse over them.
| | 03:23 | So these are just read-only list items.
| | 03:25 | In order to make these tappable,
I have to put links inside them.
| | 03:28 | So let's back to the code.
| | 03:31 | And what I am going to do is copy these
guys right here and we will paste them in.
| | 03:38 | Okay, so now I have got links and just
ignore for the moment that they have an
| | 03:44 | href of a Hash(#) character.
| | 03:46 | jQuery Mobile ignores links have has #
characters and then it doesn't actually
| | 03:50 | do anything with them.
| | 03:51 | But I'm only, including them so
that they will be clickable items.
| | 03:54 | So we will save and we will refresh
and now you will notice the items are now
| | 03:59 | styled in a fashion that
shows that they are clickable.
| | 04:03 | There's a little right
facing arrow icon over here.
| | 04:06 | You can see that the items are being
styled with a nice gradient in both the
| | 04:10 | Ordered and Unordered cases.
| | 04:13 | So let's go back to the code and now
let's make a list with some dividers in it.
| | 04:18 | So I am going to open up
listviewdivider_start, and we will go back to the
| | 04:22 | Snippets and we will scroll down to the
Divider section and all I need to do to
| | 04:28 | make a list item a divider is
put the data-role of divider on it.
| | 04:32 | So I am going to copy that and in both
of these lists, I am just going to insert
| | 04:39 | some dividers where I want dividers to be.
| | 04:41 | So I will put one here and I will
put one there, and I will put one over
| | 04:45 | here and I will save.
| | 04:47 | And now we will run this, and you can
see that I have got List View dividers
| | 04:53 | that are now in my list.
| | 04:54 | So here is a list view divider, you can
see it's not clickable whereas these are.
| | 04:59 | Up here in the Ordered List same thing, I
have got dividers that are not clickable.
| | 05:02 | All right. Let's continue on.
| | 05:05 | Let's go back to the Snippets.
| | 05:09 | Now we are going to do some Count Bubbles.
| | 05:10 | So let's put some items with
count bubbles into our list.
| | 05:14 | I am going to open up the Countbubble_
start and what I am going to do is run it
| | 05:19 | really quick so you can see.
| | 05:20 | So here is the standard list that
we have been working with so far.
| | 05:23 | Here are all the items.
| | 05:25 | Let's go to the Snippets code and let's
copy these guys here and paste them into
| | 05:32 | the file here and down in
the Unordered List as well.
| | 05:37 | So what have I done?
| | 05:38 | Well, these are the same list items
that they were there before but now they
| | 05:42 | have a span inside them and each one
of the span has a number and you can see
| | 05:47 | that the span has a class
of ui-li-count applied to it.
| | 05:53 | So when I save, now let's run it again,
and you can see that Count Bubbles have
| | 05:59 | now appeared in the items where I
happened to have those numbers.
| | 06:04 | And on List Item 5 in both cases I don't
have a count bubble, so nothing shows up.
| | 06:09 | That's right here,
| | 06:10 | there is no span, there is no class
of li-count so nothing shows up there.
| | 06:16 | Last but not least, in the Basic
category, let's add some icons.
| | 06:20 | So I am going to open up my
listviewicons_start file right here and over in
| | 06:28 | my Icons section in Snippets, I am going
to copy and I am going to paste, and paste.
| | 06:40 | So in this case, what I have got is
text inside the item, so I have got United
| | 06:46 | States, Great Britain, Germany and France.
| | 06:48 | And I have got these images in an
images directory inside the same folder as
| | 06:54 | this example file pointing to the
small little icons that will be styled with
| | 07:00 | the ui-li-icon class which will place
that image next to the text in the list.
| | 07:07 | So I am going to save that, run it and
you can see that in both cases now, in
| | 07:13 | both the Ordered and Unordered Lists,
I've got icons appearing next to my text.
| | 07:19 | So that covers creating
some Basic List View features,
| | 07:22 | we will move now on to some more advanced stuff.
| | Collapse this transcript |
| Advanced list views| 00:00 | Now that we have seen how to build
some basic list view functionality, let's
| | 00:03 | move on to some more advanced stuff.
| | 00:05 | In fact, the first thing we are going
to look at sounds advanced, but it's
| | 00:08 | actually pretty simple and that
is creating a list view filter.
| | 00:12 | So, creating a list view filter is as
simple as adding the data-filter attribute
| | 00:16 | with a value of true onto the listview element.
| | 00:20 | And you can see here I have got an
ordered list that's specified as a listview
| | 00:24 | and the data-filter is equal to true.
| | 00:27 | You can even customize the placeholder
text that's in the list view, if you use
| | 00:31 | the data-filter-placeholder
attribute and you put some text in there that
| | 00:36 | represents what you want the
placeholder text of the filter to be.
| | 00:40 | You can also nest lists within other lists.
| | 00:43 | So for example here I have got a
listview and I have got a few List Items and
| | 00:47 | then in my last List Item I've got
another embedded listview and this will
| | 00:52 | create the behavior where if you click
on the item that's labeled More Items, in
| | 00:57 | this case, the screen will animate to
the left, it will do a transition and take
| | 01:02 | you to the embedded list view.
| | 01:04 | You can do this as many times as you
like to drill down into more detailed lists.
| | 01:09 | And of course, List Items can be split
into separate tappable areas, we talked
| | 01:14 | about this earlier, this is creating a
split button and you simply add two link
| | 01:18 | tags to the list item.
| | 01:20 | So for list item that you want to be a
split area, you put in a link that will
| | 01:24 | be the large area and another link that
will be the small icon area and jQuery
| | 01:28 | Mobile is smart enough to use
the first and the last links.
| | 01:32 | If you put more than two links in here,
jQuery Mobile won't get confused, it
| | 01:35 | will use the first link for the large
area and it will use the second link for
| | 01:39 | the small icon area and any other
links, you put in here, will just simply
| | 01:43 | become content inside that
particular list item. All right.
| | 01:48 | So let's jump over to the code
and see some of this in action.
| | 01:51 | So here we are in my ExampleSnippets
and I have got my listviewfilter_start,
| | 01:57 | nestedlist_start, splitbutton_
start and listviewrich_start opened.
| | 02:02 | The listviewrich example is one I
didn't show on the slides, but it will show
| | 02:06 | you how to do some rich
formatting inside your list items.
| | 02:10 | So let's begin by taking a look at
the starting case of the listviewfilter.
| | 02:15 | So if I just run this as it is, you'll
see that I've got an ordered list and an
| | 02:19 | unordered list and we want to
apply some filtering to these guys.
| | 02:21 | So let's go back to the code and let's
replace the Ordered List definition with
| | 02:26 | this one and if we just put data-filter
="true" on there, and we run it again,
| | 02:32 | you will see that my little filter
appears and it says Filter items and I can
| | 02:36 | do things just like type some
characters and you can see that as I'm typing,
| | 02:40 | character's information is disappearing
and I can click the clear button and so on.
| | 02:46 | Now let's go back to code.
| | 02:49 | Let's do one more thing.
| | 02:51 | Let's put the data-filter-placeholder in here.
| | 02:58 | So now we have a filter and I have a
data-filter-placeholder and instead of
| | 03:04 | saying Filter items, it says Filter Countries.
| | 03:07 | And the one other thing that I am
going to do is put an attribute on both of
| | 03:13 | these called data-inset="true".
| | 03:18 | Now you notice probably earlier that the
lists went to the edge of the screen in
| | 03:22 | both cases and that's because the way
that lists are styled by default, they
| | 03:27 | take up all the available width in the
screen and by doing data-inset="true",
| | 03:34 | let's see how that changes things.
| | 03:36 | So I am going to save and then back here
in the browser, we are going to refresh.
| | 03:39 | So now watch the edges of the list here.
| | 03:41 | So you can see that the list has now
become inset into the page a little bit
| | 03:46 | with rounded corners in the top and
bottom elements and the items are flushed
| | 03:51 | with each other and these
guys are straight over here.
| | 03:53 | So by insetting the list, you can
have the list offset from the edges of
| | 03:59 | its container element.
| | 04:01 | This is useful when you want to
put lists inside things like forms or
| | 04:04 | collapsible content blocks
or other container elements.
| | 04:08 | And then the other thing you notice is
that in the case of the filters, this one
| | 04:12 | still says Filter items, this
one now says Filter Countries.
| | 04:16 | So my placeholder is now taking
effect right here that's the effect of the
| | 04:22 | data-filter-placeholder.
| | 04:24 | Let's move on to the next example.
| | 04:26 | Let's take a look at Nested Lists.
| | 04:28 | So here's my Nested Lists starting
point and over here in the code, I am going
| | 04:32 | to copy my two lists.
| | 04:38 | So here's my Ordered List and
here's my own Unordered List.
| | 04:45 | We are going to put that one down here.
| | 04:49 | So notice what I am doing is in
the case of this list, I have the
| | 04:53 | data-role="listview" on it and over here I
have got the data-role="listview" on a sub-list.
| | 05:00 | So I am going to save this
and I am going to run it.
| | 05:05 | You can see that in this case, where I
don't have any anchor tags or anything,
| | 05:09 | these list items are not clickable,
but this one is and when I do it, notice
| | 05:12 | how I drilled down into the More Items
detail, all right, same thing in Unordered List.
| | 05:18 | So that's how you create nested list items.
| | 05:21 | You can do this as many times as you want.
| | 05:23 | You can have nests that list pretty deeply.
| | 05:26 | That's Nested Lists. All right.
| | 05:27 | Let's move on to the next example.
| | 05:32 | Let's look at Split Buttons.
| | 05:33 | In this case, I am actually going to
use the Split Buttons with a Nested List.
| | 05:40 | So I am going to copy this code right
here, copy it and here's my starting point.
| | 05:45 | Now before I get started, what I am
going to do is just run this as it is
| | 05:50 | and you can see that I have got a
list view with some Wine Regions from
| | 05:54 | America, France and Italy.
| | 05:55 | If I click on America, you'll see
this California, Washington, Oregon,
| | 05:58 | right here is France.
| | 06:01 | Here is what I'm going to do, I am going
to copy and paste that Nested List with
| | 06:04 | Split Buttons inside here.
| | 06:06 | So let's go back to the code and
inside the California list item, I'm going
| | 06:13 | to put this nested, unordered list
with list items that have two link tags
| | 06:19 | inside each one of them.
| | 06:20 | I am going to save that.
| | 06:22 | Now before I go back and run this, I
am going to go back to the Snippets and
| | 06:27 | copy over the two different pages that
those items link to and you can imagine
| | 06:36 | that what I'm doing here is if you got
an application that displays information
| | 06:41 | about Wine Regions, you can imagine
that there's a page where you read details
| | 06:45 | about the wine and there's a page where
maybe you enter your own tasting notes.
| | 06:49 | So that's what we are building right here.
| | 06:52 | I am going to scroll back up
and save and we will run it again.
| | 06:57 | Now when I click on America, now you
will notice that I have a nested list there.
| | 07:02 | So when I click on California, I'm
getting this split list behavior.
| | 07:06 | So here's the large area, this is the
first link and you can see I have got 3 of
| | 07:10 | these and then over here, are the Split Buttons.
| | 07:13 | And even though, I gave a label for
each one of these, what's happening is an
| | 07:18 | icon with the arrow is showing up and
the text that I provided in the anchor tag
| | 07:24 | is now being listed as the
little pop-up on the icon.
| | 07:27 | Now obviously that won't happen on a mobile
device, but on the desktop device, it does.
| | 07:31 | So if I click on this item, it will take
me to the Wine Details page, whereas if
| | 07:36 | I click on this icon, it'll
take me to the Tasting Notes page.
| | 07:40 | So there are all kinds of common
scenarios where you want a list item to have
| | 07:45 | two different tappable areas.
| | 07:47 | Imagine a movie application where this
is the name of the movie and it shows you
| | 07:51 | the information about the movie and
this one is the one that purchases tickets.
| | 07:54 | This scenario pops up all the time. All right.
| | 07:57 | The last example I want to show
you is Rich Formatting inside a list.
| | 08:02 | So what I am going to do here in my
listviewrich starting point, let me
| | 08:07 | quickly run it and you can see
I am starting off a blank page.
| | 08:11 | But what I am going to do is go over to
my Snippets and I am going to first copy
| | 08:18 | over the Unordered List.
| | 08:21 | So we'll put that in here
and we'll close that off.
| | 08:26 | And then I'm going to copy in
the first couple of list items.
| | 08:30 | So I will copy that and paste it over
here, so you can see what's going on.
| | 08:36 | So my first list item is a
divider and it has a date inside of it.
| | 08:43 | And then inside my list item, inside my
link tag, I've got some pretty rich formatting.
| | 08:48 | Here's an h4 heading, here's a
paragraph with a style on it, here is another
| | 08:53 | paragraph with a class
assigned to it of ui-li-aside.
| | 08:58 | Here is another paragraph with some text in it.
| | 09:00 | So before we paste in the others,
let's just run this and see what happens.
| | 09:04 | So you can see that I've got an inset
list and that's because this data-inset
| | 09:08 | attribute right here.
| | 09:10 | It's pretty richly formatted.
| | 09:12 | First, here's that h4, here is that
paragraph with the bold text, here is that
| | 09:18 | other paragraph with the detailed text
and that ui-li-aside class caused that
| | 09:24 | other paragraph to be placed up here on
the side of the list item, sort of like
| | 09:28 | a little aside text.
| | 09:30 | So let's go back to the Snippets
and paste in the rest of these.
| | 09:35 | Now that you see what's going on,
it's kind of like a little to do sort
| | 09:39 | of agenda application.
| | 09:41 | I will copy these, paste them in and
we'll go back to the browser and refresh it.
| | 09:50 | Now you see that I have got a list of
To Do Items inside my application and
| | 09:57 | using the rich styling, it looks
like you can get some pretty advanced
| | 10:01 | formatting inside these list views,
this is pretty close to what a native
| | 10:05 | application might look like.
| | 10:07 | These are all clickable.
| | 10:08 | They don't do anything right now, but
they are inside link tag, so they are
| | 10:11 | getting the click behavior, you have
the right arrow over here, you have the
| | 10:14 | different formatting with
different locations for text.
| | 10:16 | So using jQuery Mobile list views,
you can actually get some pretty
| | 10:21 | advanced layouts going that begin to
rival what native applications can do
| | 10:25 | in their layouts.
| | Collapse this transcript |
|
|
6. Using the Content Formatting ToolsUsing layout grids| 00:00 | In this section we are going to take a
look at the various content formatting
| | 00:03 | tools that jQuery Mobile provides for
you to control how the content of your
| | 00:08 | mobile webpages is laid out and presented,
and we are going to start by taking a
| | 00:12 | look at using Layout Grids.
| | 00:15 | jQuery Mobile provides a set of
layout grids from two the five columns and
| | 00:19 | they're pretty basic, but they're pretty useful.
| | 00:22 | They are useful for laying out
smaller elements, think of things like Form
| | 00:25 | Controls or icons where
layout precision is needed.
| | 00:29 | And a really good example of this is
in footer toolbars, because recall from
| | 00:33 | earlier that footer toolbars don't
have the same kind of prescriptive layout
| | 00:38 | guidance that header toolbars have.
| | 00:40 | So layout grids can be useful for
when you need to position things like
| | 00:45 | form controls or multiple text fields
in a footer toolbar and they need to
| | 00:49 | be positioned just so.
| | 00:51 | jQuery Mobile's layout grids
do a really great job of that.
| | 00:54 | They are based on a nested structure
and any layout container can serve as the
| | 01:00 | root element. Typically you'll
use a div, something like this.
| | 01:04 | What you'll do is you will define a
class on that div or whatever the container
| | 01:08 | element is of ui-grid followed by a letter.
| | 01:13 | For the grids the letters go from a through d;
| | 01:16 | and a corresponds to two columns, b
corresponds to three columns, and so on up
| | 01:21 | to d which corresponds to five columns.
| | 01:24 | Now inside this div you will use
other containers, again probably divs, and
| | 01:28 | in this case you will put classes on
these days named ui-block- and then
| | 01:34 | followed by a letter.
| | 01:35 | Now in this case for two columns because
we are using ui-grid-a, we are going to
| | 01:39 | have two divs inside the parent div
and they are going to have classes of
| | 01:42 | ui-block-a and ui-block-b.
| | 01:45 | Then inside those divs that's
where you will place your content.
| | 01:48 | Now if you were using ui-grid-b, c, or
d you would have more divs than you see
| | 01:53 | here, but this is for a two column layout.
| | 01:56 | The layout grids take up 100% of the
available page width and they don't have
| | 02:01 | any padding or margin applied to
them which basically means they won't
| | 02:04 | interfere with the layout sizing of any of the
container elements that you put inside the grids.
| | 02:11 | The grid columns are all equal widths
and I have a table here that shows you
| | 02:15 | what the column widths are for
each one of the grid layout classes.
| | 02:20 | So for ui-grid-a there is two
columns and there are 50% and 50% of the
| | 02:24 | screen width and so on down to ui-grid-d
which has five columns each one of width is 20%.
| | 02:30 | Grids can wrap to multiple rows.
| | 02:33 | If you have a layout container;
| | 02:34 | let's say you have ui-grid-a and inside
you put two divs ui-block-a and ui-block-b,
| | 02:41 | if you put two more also called ui-
block-a and ui-block-b, then jQuery Mobile
| | 02:46 | smart enough to realize that you got
four divs inside a two column layout and
| | 02:50 | it will wrap each one of those to their own
line and you can do that as many times as you want.
| | 02:55 | So if you wanted to have eight rows
let's say you would say eight divs inside
| | 02:59 | the parent of a ui-grid-a and then you
have to assign ui-block-a and ui-block-b
| | 03:04 | to each one of the divs
in an alternating fashion.
| | 03:08 | So let's take a look at the code and we will
see how to take advantage of the layout grids.
| | 03:14 | Here in the code I've got my
ExampleSnippets open and I have got my grids_start open.
| | 03:18 | This is the file we are going to be
working on, but before we get started on
| | 03:21 | that let me just fire up the finished version.
| | 03:24 | I am just going to run this so you
can see what it's going to look like.
| | 03:27 | So here is the Layout Grids
Example in the finished state.
| | 03:30 | So you can see we have a two column
layout and these are the two divs here
| | 03:34 | and you've got block A and block B and
then Three-column layout Four or Five columns.
| | 03:38 | Here's an example showing multiple rows.
| | 03:40 | This is a Three-column layout with
two rows in it and then down here at the
| | 03:44 | bottom I've got some buttons laid out
in a layout grid showing how you can put
| | 03:49 | Layout controls inside a layout grid.
| | 03:52 | So this is the finished example let's
close this and we will close this as well
| | 03:56 | so we go back to the starting state.
| | 03:57 | And now we are going to build that example.
| | 03:59 | So let me scroll down here to my page
and we'll go over to the snippets and we
| | 04:04 | will start by just copying and
pasting the code for the Two-column layout.
| | 04:08 | So we will copy those lines right
there and we will put them inside the
| | 04:13 | content area right here.
| | 04:15 | So we'll save and now let's just
bring that in the browser and you can see
| | 04:18 | that's how we have arrived
at the two column layout.
| | 04:21 | So let's go back to the code
really quick and take a look.
| | 04:23 | You can see here, here's the parent div
with the class of ui-grid-a applied to
| | 04:28 | it and then inside I have
got ui-block-a and ui-block-b.
| | 04:33 | Now if I just copied and pasted these
two guys again like this and then ran, you
| | 04:39 | can see that I am making multiple rows.
| | 04:40 | We'll save that for later.
| | 04:43 | Let's just go ahead and take those off.
| | 04:45 | So let's go take a look at the rest of layouts.
| | 04:47 | Here we have got three columns and
we will copy that and paste that.
| | 04:53 | And we will run it.
| | 04:54 | Now you can see I have the three columns.
| | 04:57 | Let's go back and paste the rest.
| | 04:59 | So here's the Four and the Five one as well.
| | 05:05 | And we will paste those in down here
at the bottom and we will refresh the
| | 05:08 | page and you can see now that we've
got examples of all of the columns laid
| | 05:14 | out here in our page.
| | 05:16 | We have got Two, Three, Four, and Five columns.
| | 05:18 | So you can see that you can use these
columns to lay things out in a pretty
| | 05:22 | good precise fashion.
| | 05:23 | The Five-column layout is probably useful for
positioning icons and smaller form controls.
| | 05:28 | So let's close this.
| | 05:29 | Let's just go back to the code.
| | 05:30 | Now let's take a look at the multiple rows.
| | 05:32 | In this case I'll use the Three-
column layout with multiple rows.
| | 05:36 | So we go ahead and paste that in.
| | 05:38 | Now you can see here than using ui-
grid-b and ui-grid-b is the Three-column
| | 05:44 | layout because ui-grid-a is two.
| | 05:46 | Inside here I'm using two sets of three divs.
| | 05:50 | Here is the first set right here and
you can see I have got ui-block-a and
| | 05:55 | ui-block-b and ui-block-c.
| | 05:57 | Then I repeat over again with ui-block-
a and that tells jQuery Mobile that I'm
| | 06:02 | wrapping to a new row in my layout grid.
| | 06:06 | So if we save this and we run it
you'll see that if I scroll down we have a
| | 06:11 | three column layout with multiple rows
in it and you can repeat this as many
| | 06:14 | times as you want for as many rows as you need.
| | 06:17 | So I will close that.
| | 06:19 | Last but not least, let's show
a couple of different things.
| | 06:22 | First, we are going to show laying out
form controls and we are going to show it
| | 06:25 | using the layout grid class
applied to a different kind of container.
| | 06:31 | So I am going to copy this and I am
going to paste this down at the bottom of
| | 06:35 | my form and I could put this in the footer
if I wanted to, I could put it in the content.
| | 06:38 | Just for the sake of this example I am
going to put it in the content, but you
| | 06:41 | can use these layout grids in your
footers or header or anywhere else you want
| | 06:45 | to use a layout grid.
| | 06:47 | So in this case I've got a form and
I've got some buttons inside the form and
| | 06:53 | again they don't do anything;
| | 06:54 | I am just doing this to show you the layout.
| | 06:56 | But I've got a field set, and in
this case I'm assigning the class of the
| | 07:00 | ui-grid to the fieldset tag instead of
a div and the reason I am doing that is
| | 07:06 | because I want to group my controls
inside of fieldset and I want to use the
| | 07:09 | legend that goes along with fieldset.
| | 07:11 | So the legend says you know
catastrophic failure action and this is a play on
| | 07:15 | the old windows Abort, Retry, Ignore dialog.
| | 07:18 | So what I have got here is three
buttons laid out in a three column grid.
| | 07:22 | So I am using grid b be with ui-block-a,
b, and c. So that will create three
| | 07:26 | columns and each button
is getting its own column.
| | 07:30 | So if I save this and run it, and
scroll down, you can see that each of the
| | 07:35 | buttons is taking up 33% width in a
three column layout down here at the
| | 07:40 | bottom of the page.
| | 07:41 | So using Layout Grids you can achieve
some really common and useful layout
| | 07:45 | precision in your mobile webpages
whether you're laying out icons or controls or
| | 07:50 | blocks of text or anything.
| | 07:52 | The Layout Grids in jQuery mobile
can be pretty useful for those kind
| | 07:55 | of scenarios.
| | Collapse this transcript |
| Using collapsible content blocks| 00:00 | Another really great and useful
content formatting tool that jQuery Mobile
| | 00:04 | provides is the Collapsible Content block.
| | 00:07 | And I'm sure you have seen these before
on various websites you may have visited.
| | 00:11 | These are content blocks that can be
expanded and collapsed by the user by
| | 00:16 | clicking on them and jQuery Mobile
makes creating these really simple.
| | 00:21 | Any container element can be designated
as a collapsible content block and all
| | 00:25 | you need to do in order to achieve that
is apply the data-role of collapsible to
| | 00:31 | the parent container that
you want to be collapsible.
| | 00:33 | So in this case here I have got a div
tag and I'm giving it a role of being a
| | 00:37 | collapsible content block.
| | 00:39 | Now within the container any header
elements will become the title and any of
| | 00:43 | the following content will be wrapped
inside an element that will become the
| | 00:47 | collapsible content.
| | 00:49 | So to declare a complete collapsible
content block I would do something like this.
| | 00:55 | First, I would have a div and I
would give it a data-role of collapsible.
| | 00:57 | Then inside the div I would give n h1
or an h2, h3, whatever all the way up to
| | 01:03 | h6, whatever header tag I want to use, I
can give the content for what the title
| | 01:08 | of the collapsible content block will
be, and then any of the content that
| | 01:11 | follows the header will
become the collapsible content.
| | 01:14 | So in this case I have got a
paragraph and this is the content that will be
| | 01:17 | shown and hidden when the user clicks on it.
| | 01:21 | Now by default collapsible
content blocks are collapsed.
| | 01:24 | When the page loads the content is not
visible and the blocks are in collapse state.
| | 01:29 | To prevent this from happening;
| | 01:30 | in other words to have the collapsible
blocks open by default, you simply use
| | 01:35 | the data-collapsed
attribute with a value of false.
| | 01:39 | So in this case I have got a div and I
am giving it a role of collapsible and
| | 01:42 | then I am saying hey you actually start
life out as an open collapsible block.
| | 01:47 | Collapsible blocks can also
be nested inside of each other.
| | 01:51 | So for example I can have something
like this where I have a div and I've got
| | 01:55 | the collapsible data-role on their
and inside I have got my title and my
| | 01:59 | collapsible content, but then I
can put another one of these inside.
| | 02:02 | So I can have another div that's a collapsible
content block with a heading and some content.
| | 02:07 | You can do this as many times as you
want and inside these collapsible content
| | 02:11 | blocks you can pretty
much put whatever you want.
| | 02:13 | You can put forms in there, you can
put list in there, you put any kind of
| | 02:17 | markup that will be shown and
hidden when the user clicks on it.
| | 02:21 | So let's jump over to the code
and actually build one of these.
| | 02:24 | So here I am in the code and I have got
my ExampleSnippets open and I have got
| | 02:29 | my collapsibleblocks_start file open.
| | 02:31 | This is the file that we are going to
use to build our collapsible blocks.
| | 02:34 | So over in the ExampleSnippets I
scrolled down here to my collapsible blocks and
| | 02:38 | we are going to just start off
by copying the first example.
| | 02:42 | So I am going to copy that code right there
and paste it into my content section here.
| | 02:47 | We will save it and we will run it.
| | 02:52 | You can see that I have got a
collapsible block, a little plus sign (+) right
| | 02:55 | there, this is the title.
| | 02:56 | I will click on it and you can see
that the plus sign (+) changes to a minus
| | 02:59 | sign (-) and the collapsible content is
now visible and you can see I click on
| | 03:05 | this and it shows and hides the content.
| | 03:07 | Okay so let's go look at the code,
you can see here, here's my parent div.
| | 03:10 | This is the container element that's
going to be the parent of the collapsible
| | 03:13 | block and here's my heading.
| | 03:15 | This is what the title is going to be.
| | 03:17 | And you can see, I've given it in h1,
but I could give it in anything, I can
| | 03:20 | give it in h3 and let's save that and run it.
| | 03:24 | And you see it doesn't really make any
difference jQuery Mobile in this case has
| | 03:27 | styled content to look the same size.
| | 03:30 | So let's go ahead and back to
the code and change that back.
| | 03:35 | Here is the content that
I want to be collapsible.
| | 03:38 | This is the content that is shown and hidden
and I can put whatever mark up in here I want.
| | 03:41 | So let's go back and copy another example over.
| | 03:44 | Let's try out the data-collapsed = false state.
| | 03:49 | So we will paste this in and I need to
paste that inside my Content section.
| | 03:55 | Let's save and run, and you can see
that this one is closed, but the one with
| | 03:59 | the (data-collapsed=false)
defaults to being open.
| | 04:03 | So now it's open by default. Let's continue on.
| | 04:06 | Let's get another example.
| | 04:09 | Let's get a nested collapsible block right here.
| | 04:13 | I am going to paste that in.
| | 04:18 | Now here you see I have a nested
collapsible block, I have got a parent div here
| | 04:21 | that's collapsible, I have got another
div here that's collapsible and in both
| | 04:26 | cases I've got the heading and the
content and the heading and the content.
| | 04:30 | So let's save and let's run.
| | 04:33 | Here's a nested block right here.
| | 04:35 | You can see that when I expand and
contract this in the expanded state here is
| | 04:39 | the nested one and I can
expand that one as well.
| | 04:41 | You can see its remembering its
state in between each one of the collapses.
| | 04:48 | Let's go back and actually try something.
| | 04:50 | Let's try this as (data-
collapsed="false"). Let's save that.
| | 04:59 | Let's run it again.
| | 05:00 | Now you can see that in this case the
nested collapsible block defaults to open
| | 05:07 | whereas in the previous
case it defaulted to close.
| | 05:10 | So that's using collapsible blocks in
jQuery Mobile to show and hide content
| | 05:15 | to the user.
| | Collapse this transcript |
| Using collapsible sets| 00:00 | A close relative of the collapsible
block is the collapsible set and I am sure
| | 00:04 | you've seen these on the web before.
| | 00:06 | Sometimes they're called accordion
controls, they maybe called something else.
| | 00:10 | They're basically made up of
individual collapsible blocks.
| | 00:14 | Now, the difference here is that only
one of these blocks can be opened at a
| | 00:16 | time, and when user clicks on one to
open it up, if another one is open,
| | 00:21 | then that one closes.
| | 00:22 | And the way that you define these in
jQuery Mobile is really pretty simple.
| | 00:26 | Instead of putting the data-role of
collapsible in the parent container, you
| | 00:31 | use the collapsible-set value and
here you can see I am using a parent
| | 00:34 | container of a div and I've got the
data-role defined as collapsible set and
| | 00:38 | then inside the collapsible set you put
the collapsible blocks that you want to
| | 00:42 | make up the collapsible set.
| | 00:44 | So in this case I've got two
collapsible blocks and one of them is using the
| | 00:48 | data-collapsed attribute with a
value of false two default two open.
| | 00:53 | So in this case I have got two blocks
and they are mutually exclusive, when one
| | 00:57 | of them gets open, the other one gets
closed and that's the basic behavior of a
| | 01:02 | collapsible set or accordion
control or whatever you want to call it.
| | 01:05 | So let's quickly jump over to the code and
build one of these and then we'll move on.
| | 01:08 | Okay, so here in the code I have
got my Snippets scrolled down to the
| | 01:12 | collapsible set example and over
here I've got my starting point for
| | 01:16 | the collapsible sets.
| | 01:17 | So let's go back to the snippets and
let's copy this over and let's just begin
| | 01:22 | by copying over the parent container.
| | 01:25 | So what I am going to do is put
that in there, close that div off.
| | 01:28 | So here we have the heading, this is
the header for the example and then here's
| | 01:32 | the actual collapsible set itself.
| | 01:34 | So this is going to be the parent
container and you can see there's a data-role
| | 01:37 | of collapsible set on here. All right.
| | 01:40 | Let's go back to the Snippets, now let's
copy the content, that will take up the
| | 01:44 | collapsible blocks and we've got four
of these blocks and we're going to paste
| | 01:50 | these inside the collapsible set div.
| | 01:53 | So now I have got a collapsible set with
four collapsible blocks in them and the
| | 01:57 | one up here on the top is using data-
collapse="false" to be the default open
| | 02:02 | case and you can see that I've got
content and headings in each one of them.
| | 02:06 | So let's save and let's run.
| | 02:08 | So when we run it, you can see that
Section 1 defaults to the open state and all
| | 02:13 | the others are closed.
| | 02:14 | You can also see that jQuery Mobile is
doing a good job of CSS styling, so that
| | 02:18 | only the ones in the top and the
bottom have the rounded corners and the rest
| | 02:22 | are all flushed with each other.
| | 02:24 | So when I go to open Section 2, you can
see that Section 1 closes and so on with
| | 02:29 | the other sections and in fact I
can close all of them if I want to.
| | 02:32 | Let's go back to the code, let's take
the data-collapse attribute off of this
| | 02:39 | one and put it down let's say on number 3 here,
so we'll have that one be open by default.
| | 02:45 | Let's run again.
| | 02:46 | You can see that this time section 3
is now the one that's open by default.
| | 02:49 | So that's how you take collapsible
blocks and group them together into a
| | 02:54 | collapsible set or an
accordion control in jQuery Mobile.
| | Collapse this transcript |
| Using themes| 00:00 | One of the most powerful features of
jQuery Mobile is its styling architecture.
| | 00:04 | jQuery Mobile includes a really
powerful styling architecture based on CSS3.
| | 00:10 | It uses CSS3 for things like rounded
corners and background, gradients, and
| | 00:15 | shadows and all the things that up
until now you would have had to use things
| | 00:20 | like graphic elements in order to accomplish.
| | 00:23 | So, relying on CSS3 means that jQuery
Mobile doesn't need to download a whole
| | 00:28 | bunch of heavyweight graphics in order
to achieve some really nice styling and
| | 00:32 | visual presentation.
| | 00:34 | So basing things on CSS3 until
recently would have been a problem as well for
| | 00:38 | browsers, but because most modern
mobile browsers now use CSS3 especially the
| | 00:42 | WebKit ones, you can rely on the fact
that CSS3 will be available in most of
| | 00:48 | your users' browsers and your jQuery
Mobile applications will look really well.
| | 00:52 | And in fact using CSS3 in many of the
modern browsers not just is a good idea
| | 00:57 | for visual reasons, in many cases the
CSS3 features like animations and so on
| | 01:02 | are hardware accelerated.
| | 01:03 | So the performance is much nicer and
much faster than it would be if you were
| | 01:08 | using old-school techniques like
background images to achieve things like
| | 01:12 | gradients and so on.
| | 01:14 | Now, a set of unified visual
appearances in jQuery Mobile is called a theme and
| | 01:20 | jQuery Mobile ships with five of these,
and each theme has multiple swatches
| | 01:25 | what we call different
color swatches inside the theme.
| | 01:28 | Swatches are assigned letters starting
with A and ending with Z. You can have up
| | 01:32 | to 26 swatches per theme, and the nice
thing about themes is that themes can be
| | 01:37 | mixed and matched
throughout different parts of a page.
| | 01:41 | And the way that the jQuery Mobile
theme architecture is built, they've
| | 01:46 | gone ahead and done things like
separate the notion of color from other
| | 01:51 | forms of visual appearance.
| | 01:52 | So you can use different themes on
different parts of your page, and the way
| | 01:57 | that it's built, the child elements
of the page know how to inherit visual
| | 02:02 | properties from the parent
element that a theme is applied to.
| | 02:05 | The way that you apply a theme is by
using the data-theme attribute and then
| | 02:10 | you give it a letter.
| | 02:11 | So for example, data-theme="a", data-
theme="b" and so on depending on the swatch
| | 02:16 | that you want to use, and that will
assign a theme to the element that you apply
| | 02:22 | the data-theme attribute to, and if
it's a parent element, that will affect the
| | 02:26 | way that the children of
that element apply as well.
| | 02:29 | In fact, in some places, you
can get even more advanced.
| | 02:33 | List views for example go further than this.
| | 02:35 | You can theme many of their parts
individually and I've listed a table here
| | 02:39 | that gives you idea of some of the different
things you can do with list views and theming.
| | 02:44 | So for example you can put themes
directly on list items themselves.
| | 02:49 | You can specify things like what the
divider theme should be on a given list
| | 02:53 | view, or how the count bubble should
appear by using the data-count theme, you
| | 02:57 | can specify things like what the
icon should be in place of the standard
| | 03:01 | right-pointing arrow in list views.
| | 03:03 | Anyway, this gives you an idea of how
powerful things are, but there's nothing
| | 03:07 | like seeing it in action.
| | 03:08 | So I am going to jump over to the code,
and we can play around with themes and
| | 03:10 | see how themes affect the
visual appearance of the page.
| | 03:14 | Now unlike in other examples, I don't
have a start and finished state here.
| | 03:18 | What I have is just an example theme_
tester file, and you can see that I've just
| | 03:23 | put a whole bunch of content in here,
different kind of page elements, and we're
| | 03:26 | going to see how the various themes
affect the way that this content is styled.
| | 03:32 | So I am just going to go ahead and
start assigning themes to various parts of
| | 03:35 | the page and then we'll see
what it looks like in the browser.
| | 03:38 | So before I do anything, let me just
run this in its current state, and you can
| | 03:41 | see that this is the
default jQuery Mobile theme,
| | 03:45 | this is the out-of-the-box
appearance if you don't do anything special.
| | 03:48 | And you can see that the background
color here is lighter and the text is
| | 03:51 | darker, up here we have our header with
an Options button in it, and here's the
| | 03:56 | collapsible section control
that we looked a little while ago.
| | 03:59 | Here's a list view with some list
items in it and a divider with some count
| | 04:04 | bubbles, we've got a footer
down here with some buttons.
| | 04:06 | So this should be a pretty good
indicator of how various parts of the page are
| | 04:11 | going to look when we change the themes around.
| | 04:13 | So let's go back to the code, and
let's begin just by putting a theme right
| | 04:17 | on the page itself.
| | 04:18 | So right on the page I am going to say
(data-theme="a") and I am going to save
| | 04:24 | that, and I am going to go back to the
browser and I am going to refresh it.
| | 04:28 | Okay, so when I refresh the page, you can
see that the difference was pretty dramatic.
| | 04:33 | Now, the background is much darker,
the text is whiter, the controls look a
| | 04:37 | little bit different, you can see
that the accordion control here, or the
| | 04:41 | collapsible set looks a little bit different.
| | 04:43 | But list view hasn't really changed all that
much, but we'll get to that in a little bit.
| | 04:46 | And you can see that the
footer has changed as well.
| | 04:49 | So let's go ahead and start playing
around with different parts of the page.
| | 04:52 | I can actually put a
different theme right on the header.
| | 04:55 | I can say (data-theme="d") and save that.
| | 05:00 | All right let's refresh.
| | 05:02 | So you can see that when I refresh the
page, the rest of the page keeps theme A,
| | 05:08 | but here, the header is now using
theme D and you can see that the button and
| | 05:12 | the header now look different from each other.
| | 05:14 | So let's keep on going, let's do
the same thing with the footer.
| | 05:16 | Let's scroll down to the footer, (data
-theme="d") and we'll save, and we'll
| | 05:26 | refresh it, and you can see that now
that my header and my footer look different
| | 05:31 | than the rest of the page does.
| | 05:33 | So let's keep on going,
let's go back to the code.
| | 05:35 | Let's put a theme right on the
button that's in the header itself.
| | 05:39 | So here's that Options button and I am
going to put a theme, say (data-theme="e")
| | 05:48 | and E is the fifth and last theme that
jQuery Mobile ships with, but, you're
| | 05:54 | going to find your own.
| | 05:54 | So I will save and I will refresh and
you can see now that the button is using
| | 06:01 | theme E, whereas the header is using
theme D and the page is still using theme
| | 06:06 | A. So this should give you an
idea of how customizable things are.
| | 06:10 | Let's keep on going.
| | 06:12 | Here in the collapsible set I will
give this a separate theme as well, I will
| | 06:15 | say data-theme="b", let's see
what that does, we'll refresh.
| | 06:22 | Now, you can see that the collapsible
set is using theme B. Let's play with the
| | 06:28 | listview a little bit.
| | 06:29 | So down here in the listview, the
first thing I am going to do is put a
| | 06:34 | different style on one of the list items.
| | 06:36 | So on the last list I will say )data
-theme="e") and we'll refresh that.
| | 06:43 | I am going to scroll down, you can see
now that, that's using theme E, and theme
| | 06:48 | e appears to have this like sort of
yellow gradient applied to it, so you can
| | 06:52 | see that's now affecting list item 6.
| | 06:55 | Let's try some other stuff, let's go
back to the code here, and right on the
| | 06:59 | list view itself, let's put, let's
see (data-divider-theme=)-- let's give that
| | 07:08 | theme e as well and let's give the data-
count-theme to affect the count bubble,
| | 07:15 | let's give that a theme of b and last
but not least, let's change the icon of
| | 07:22 | one of these guys, let's change the icon on
the second list item to the (data-icon="gear").
| | 07:30 | So let's save, and now let's refresh,
and let's keep an eye on the list view.
| | 07:34 | So you can see that I change the
divider theme here, now that matches theme E.
| | 07:40 | The count bubbles are now using theme B
which is this blue background with white text.
| | 07:45 | Here, I change the icon from the standard
right-pointing arrow to be the gear icon.
| | 07:50 | So jQuery Mobile's theme architecture is
pretty powerful and by using the themes
| | 07:55 | on various parts of the page, you
can get a really wide variety of visual
| | 07:59 | appearances in your mobile pages.
| | 08:01 | And using the new theme roller which
just became available on their website, you
| | 08:06 | can create your own themes, and
download them and include them in your pages.
| | Collapse this transcript |
|
|
7. jQuery Mobile EventsTouch events| 00:00 | jQuery Mobile defines a whole set of
events that your application can listen
| | 00:06 | for and use to find out about
interesting things that are going on in your
| | 00:10 | mobile web application.
| | 00:12 | And these events are divided
up into four main categories;
| | 00:15 | there are Touch Events, there
are Scroll Events, Page Events and
| | 00:20 | Orientation Events.
| | 00:21 | Touch Events are used to simplify
working with common touch gestures.
| | 00:27 | Things that the user does
throughout the course of using a mobile web
| | 00:31 | application, like tapping on the screen
or swiping from left to right or tapping
| | 00:36 | their finger and holding it there, all
those events are capturable by your app
| | 00:40 | and you can trigger various things off of them.
| | 00:44 | The Scrolling Events provide a cross
platform way of binding two events that
| | 00:49 | fire when scrolling starts and when it stops.
| | 00:52 | The Page Events are also pretty useful.
| | 00:54 | There are several events provided for
handling page related issues such as when
| | 00:59 | pages are created, when they're loaded,
when they're about to be shown and when
| | 01:03 | they are about to be hidden, when
they're unloaded that kind of stuff.
| | 01:07 | So you can hook into the page events
to set up things for that page or figure
| | 01:13 | out when a page is about to be
unloaded and free some resources.
| | 01:16 | There is a whole set of
them and they're pretty useful.
| | 01:19 | And then there is a Cross-platform
Orientation event for handling when the
| | 01:24 | orientation of the device changes.
| | 01:26 | Now some devices like the iPhone, for
example, support this event natively, but
| | 01:31 | jQuery Mobile provides its own
implementation for those devices that don't have
| | 01:37 | a native way of handling when
the device orientation is changed.
| | 01:43 | So let's begin by taking a
look at the Touch Events.
| | 01:46 | Touch Events are pretty straightforward.
| | 01:48 | There are five of them.
| | 01:50 | There are the tap, taphold, swipe,
swipeleft and swiperight events.
| | 01:56 | And they are pretty self-explanatory.
| | 01:58 | So for example tap is when the user
taps on an element whether it's an element
| | 02:03 | of the page or the page itself.
| | 02:05 | A taphold is when the user taps on
something and then holds their finger there
| | 02:08 | for a second or longer.
| | 02:11 | And then the swipe events are
again pretty self-explanatory.
| | 02:16 | Swipe events are typically triggered
when the user's finger moves by more
| | 02:21 | than 30 pixels in a given
direction and less than 20 pixels in the
| | 02:26 | perpendicular direction.
| | 02:28 | So for example a swipeleft event is
when the user moves their finger from the
| | 02:32 | right towards the left by more than 30
pixels, but doesn't move their finger
| | 02:36 | vertically by more than say 20 pixels.
| | 02:39 | And you can bind to the swipe event
and then figure out whether the swipe
| | 02:43 | happened vertically or horizontally
yourself or you can use the swipe left
| | 02:47 | and swipe right events for the very common
cases where you only care about horizontal swipes.
| | 02:54 | So let's take a look at
the code and see these in action.
| | 02:58 | So here I am in the code and I've got
my touchevents_start file opened and in
| | 03:04 | my ExampleSnippets, I'm scrolled down to
Chapter 7 and right here is my Touch Events code.
| | 03:11 | So what I am going to do is right here
in the head, I'm going to copy and paste
| | 03:16 | my script for binding to some Touch Events.
| | 03:20 | So I am going to copy these lines
right here and I will paste those in.
| | 03:27 | So notice that I am including this
script after the jquery.mobile library
| | 03:32 | itself and inside the script I am setting
up my event handlers on my firstpage element.
| | 03:41 | So I am using jQuery to get a
reference to the firstpage object and then I am
| | 03:45 | calling the live function.
| | 03:47 | The reason I am calling live instead of
bind is because remember that as jQuery
| | 03:51 | Mobile is doing its work, it may be
loading and unloading pages from the DOM and
| | 03:56 | pages are being created and released.
| | 03:59 | If I only use the bind event, then if
that page ever goes out of focus or gets
| | 04:05 | unloaded by jQuery Mobile, then any
event handlers I had registered on it, are
| | 04:09 | going to be discarded.
| | 04:11 | So I am using live, so that whenever
this page is created, the event handlers
| | 04:17 | are created along with it
and bounced to that page.
| | 04:20 | And you can find out more about the
live function either in the jQuery
| | 04:25 | documentation or in the
jQuery Essential Training title.
| | 04:28 | So when the pageinit function gets
fired, I am going to create three
| | 04:34 | different event handlers.
| | 04:35 | The first one is going to bind to the tap event.
| | 04:38 | The second one is going to
bind to the swiperight event.
| | 04:42 | And then third one is going
to bind to the swipeleft event.
| | 04:46 | And in each case, I am just
going to show an alert saying, hey,
| | 04:49 | You either tapped or you
swiped right or you swiped left.
| | 04:52 | Again, nothing really all that earth-
shattering in advance, but it just shows
| | 04:56 | you how you can bind to these events.
| | 04:58 | So let's go ahead and save this and
just to show you what's going on down here
| | 05:04 | in the markup, here's my first page,
this is my jQuery Mobile page and it's got
| | 05:10 | some content, it's got a header and a footer.
| | 05:12 | So let's go ahead and run this in
the browser and see what happens.
| | 05:15 | So here is my page.
| | 05:18 | Now I am going to just click the
mouse somewhere in the content area.
| | 05:23 | You can see that when I do
that, I am getting a tap event.
| | 05:25 | Now let's try swiping.
| | 05:27 | So I am going to click the mouse
and then move the mouse to the right.
| | 05:32 | You can see I am getting a swiperight
event along with a tap event because I did
| | 05:38 | put my finger on the screen and same
thing here, going to the right to the left,
| | 05:42 | we are getting a swipeleft
message along with a tap.
| | 05:45 | So that's how easy it is to bind to
swipe and tap events using the Touch Event
| | 05:53 | module in jQuery Mobile.
| | 05:55 | Now if you wanted to implement this
yourself in JavaScript, using the various
| | 05:59 | evidence that the different mobile
browsers provide to you, you would have to
| | 06:03 | write a whole bunch of custom platform
specific code based on whether or not the
| | 06:07 | browser is WebKit or
whether it's something else.
| | 06:10 | And jQuery Mobile just abstracts all
of that away for you and just makes it
| | 06:14 | really simple for binding to touch-based events.
| | Collapse this transcript |
| Orientation events| 00:00 | To detect changes in the orientation of
a device you can use the ORIENTATION EVENT
| | 00:04 | provided by jQuery Mobile and that's
called orientationchange and this is
| | 00:09 | triggered when the orientation
of the device changes.
| | 00:12 | jQuery Mobile also sets a class name on
the HTML element of either portrait or
| | 00:17 | landscape when this happens.
| | 00:19 | So if you have CSS classes that leverage
these names then you can take advantage
| | 00:24 | of that in CSS as well as a new script.
| | 00:27 | So this only runs on the emulator.
| | 00:30 | So what I'm going to do is just show you
the code and now I'm going to jump over
| | 00:33 | to the end of it to watch it running.
| | 00:35 | So I'm going to switch over to
the code and show you the code.
| | 00:39 | So here I'm in the code and this is the
section on orientation and I've got my
| | 00:43 | orientevents_start open.
| | 00:45 | So what I'm going to do here is copy this
script and paste it into my file and save it.
| | 00:54 | So what's happening is on the page
in my document here I'm going to get
| | 01:01 | reference that page using jQuery and
then I'm going to attach to the pageinit
| | 01:05 | event and then I'm going to bind
to the orientationchange function.
| | 01:10 | When the orientationchange function
fires I'm going to say hey, the Orientation
| | 01:15 | changed to and I'm going to say e.orientation.
| | 01:20 | So this will be a string of either
landscape or portrait showing me what the
| | 01:24 | orientation changed to.
| | 01:26 | Now this only works on the emulator.
| | 01:28 | So at this point I'm going to save
this and I'm going to jump over to the Mac
| | 01:32 | and I'm going to show you how
this works in the iOS simulator.
| | 01:35 | So I'm over here on the Mac now and I'm
running my iOS simulator and this is the iPhone.
| | 01:41 | Now in order to test this I had to put
my files into my local web server here on
| | 01:46 | the Mac and I'm not going to
go deeply into how to do that.
| | 01:48 | If you watch my Mobile Web
Fundamentals Essential Training course you'll see
| | 01:53 | how to set that up or there are other
titles here on lynda.com that cover the
| | 01:57 | same kind of subjects.
| | 01:58 | So basically what I'm doing is using
the iPhone to load the orientation change
| | 02:04 | starts file that we have right here.
| | 02:06 | You can see its orientevents_start.html.
| | 02:09 | And so what I'm going to do is just
change the orientation of the device and
| | 02:14 | we'll see an alert that show me
that the orientation is changed.
| | 02:18 | So I'm going to say Rotate Left and
you can see that we're getting the
| | 02:21 | Orientation changed to:
| | 02:22 | landscape and if we change it back
to Right you can see them getting
| | 02:27 | Orientation changed to: portrait.
| | 02:29 | So it seems be working correctly.
| | 02:31 | So that's how you can use jQuery
Mobile's orientation event to detect changes in
| | 02:35 | the orientation of the device.
| | 02:37 | And in response to orientation
changes you can do all kinds of things.
| | 02:40 | You can re-layout your page to be wider,
you can apply different CSS classes,
| | 02:44 | you can change the way that your
pages appear based upon how the user is
| | 02:48 | holding the device.
| | Collapse this transcript |
| Scroll events| 00:00 | jQuery Mobile provides two
events related to scrolling;
| | 00:03 | there is the scrollstart
event and scrollstop event.
| | 00:07 | And as you might imagine the
scrollstart is triggered when a user starts to
| | 00:11 | scroll the content in the view and
scrollstop is fired when the scrolling stops.
| | 00:16 | Now there are a couple of things you
need to be aware of when you're working
| | 00:19 | with scrolling events on various devices.
| | 00:22 | Perhaps the most important one is
that currently iOS devices suspend DOM
| | 00:27 | manipulation during scrolling.
| | 00:29 | In other words, while the content has
being scrolled in the window, you can't
| | 00:33 | make changes to the DOM and that's
done for performance and other reasons.
| | 00:38 | What the iOS device does is it takes
all of the DOM manipulation actions
| | 00:43 | that your script might do and
queues them up and executes them after
| | 00:47 | scrolling has stopped.
| | 00:49 | The other thing you need to keep in
mind is that scrolling on mobile devices is
| | 00:54 | a little bit different
than it is on desktop devices.
| | 00:57 | When the user scrolls on a mobile device,
they typically flick with their finger
| | 01:02 | or thumb and there is some inertial
property associated with it, so the
| | 01:06 | scrolling starts off pretty fast and
then it starts to slow down a little bit
| | 01:10 | and many users when they are reading
long content, will just flick the content
| | 01:14 | as it starts to slow down,
but it never actually stops.
| | 01:17 | And in those cases where the user is
scrolling, but when the content starts to
| | 01:22 | slow down up a little bit, they
scroll again, you won't get a scrollstop
| | 01:25 | message fired at that point, the
scrollstop event only fires when the scrolling
| | 01:30 | has come to a complete stop.
| | 01:31 | So if you're counting on getting
scrollstop events, you need to be careful about
| | 01:35 | how you use these because in many
cases the user might be scrolling in a way
| | 01:39 | that won't fire the event in
the way that you are expecting it.
| | 01:43 | So let's just jump over the code
and see the scroll event in action.
| | 01:48 | So here I have my scrollevents_start
file open and I'll go to my Snippets and
| | 01:53 | I've scrolled down to my Scrolling section.
| | 01:55 | I'll just copy this code right here
and I will paste it into the head.
| | 02:01 | So what's happening here is when the
page gets initialized, I'm binding on the
| | 02:06 | document here, not on the page, I'm
binding on the actual document object to
| | 02:11 | the scrollstop event.
| | 02:13 | I am not using the scrollstart event
here, just using scrollstop and I am just
| | 02:17 | showing an alert that says that
scrolling stopped whenever the scrolling action
| | 02:21 | stops, just a simple example to
show one of the events in action.
| | 02:25 | So I'll save and I'll run this.
| | 02:27 | And you'll see that when I grab the
scrollbar and I start to scroll, when I stop
| | 02:32 | scrolling, that event will be fired.
| | 02:34 | So I am going to scroll and stop and
you can see that I'm getting my scrolling
| | 02:37 | stopped event and that's pretty
much how it works when you scroll.
| | 02:42 | You can see as I am scrolling, when it stops
completely, that's when the event gets fired.
| | 02:48 | So remember, just keep in mind that
scrolling is a little bit different on
| | 02:51 | mobile devices, there is the inertia involved,
so the scrollstop event may not always fire.
| | 02:57 | It only fires when the
scrolling completely stops.
| | 02:59 | And also just remember that on iOS
devices, you can't change the DOM around
| | 03:04 | while scrolling is happening.
| | Collapse this transcript |
| Page initialization and load events| 00:00 | jQuery Mobile exposes a whole
collection of page related events for your web
| | 00:05 | application to use to figure out
what's going on during the various lifecycle
| | 00:09 | events of jQuery Mobile pages.
| | 00:11 | They're divided into four categories.
| | 00:14 | There is Page Initialization, Page Loading/
Unloading, Page Change, and Page Transition.
| | 00:19 | Now each of these categories is named
appropriately and implies what kind of
| | 00:23 | events are contained within each category.
| | 00:25 | So for example in page initialization
these are events for handling the various
| | 00:30 | page initialization related events,
things like when pages are about to be
| | 00:34 | created and when they're finished being
created, and when they're initialized.
| | 00:37 | Page Load/Unload again similarly, these
allow scripts to handle page loading and
| | 00:42 | unloading events and when page loading
encounters some kind of a problem and a
| | 00:47 | failure happens, now at this point
you can take whatever action you want.
| | 00:50 | You can navigate to a different page.
| | 00:52 | You can show the user some kind of
custom error message. It's up to you.
| | 00:55 | The page change events are fired when
pages are changed to and from using jQuery
| | 01:01 | Mobile's programmatic method for changing pages.
| | 01:05 | These are not fired when the user
clicks in a link and a page is about to be
| | 01:10 | changed to, because jQuery Mobile
provides a programmatic function that you can
| | 01:14 | call within your scripts to change
pages for whatever reason that you deem fit.
| | 01:19 | But similar to load/unload these events
allow you to trap when a page is changed
| | 01:25 | to and from and when a change
event fails for some reason.
| | 01:29 | Then finally there's the page
transition events which as their name implies are
| | 01:33 | fired before and after page
transitions start and end.
| | 01:37 | So a transition is a thing
like a pop or a fade or a flip.
| | 01:40 | You can trap when those
things start and when they end.
| | 01:44 | Let's start by taking a look at the
page initialization and the page loading
| | 01:48 | and unloading events.
| | 01:49 | There is a sequence of events that fire
when pages are initialized in jQuery Mobile.
| | 01:55 | So if you take a look at a typical
jQuery Mobile webpage that looks like this
| | 01:59 | with its container element, in this
case it's a section, but it could be a div
| | 02:02 | or anything else with a data role of
page when one of these is created there are
| | 02:07 | three events that fire.
| | 02:09 | The first is the pagebeforecreate event
which is then followed by pagecreate and
| | 02:13 | followed up by pageinit.
| | 02:14 | Now each of these events has a
specific context for why it's being fired.
| | 02:20 | So for example page before create is
triggered when the page is created, but
| | 02:24 | before most of the widget auto
initialization code has had a chance to run.
| | 02:29 | So in this event it's your chance to
manipulate any markup in the DOM before
| | 02:33 | jQuery Mobile has a chance to do so.
| | 02:36 | The page create event is triggered
when the page has been created, but before
| | 02:40 | the widget enhancement has been completed.
| | 02:42 | So if you want to do any customization
on widget enhancement, you can do it here
| | 02:46 | and then finally there's the page init
event which is fired when the page is
| | 02:50 | initialized after jQuery Mobile has
finished enhancing all the page content.
| | 02:56 | And you use this event instead of
the usual DOM ready event in jQuery.
| | 03:00 | One of the first things you learn when
you learn to use jQuery is there is this
| | 03:05 | document ready event that fires when an
HTML file has loaded and jQuery has had
| | 03:10 | a chance to go through the DOM and do
any initialization work that it does.
| | 03:14 | You're taught to use that instead of
the window on load eventHandler, because
| | 03:18 | window on load fires only after all of
the images have loaded whereas DOM ready
| | 03:23 | fires when all the DOM content has
been parsed and placed into the document.
| | 03:28 | Now in the case of jQuery Mobile you
have to remember there could be multiple
| | 03:32 | jQuery Mobile pages inside a given HTML file.
| | 03:36 | So you don't want to use DOM ready,
because that's going to fire when the
| | 03:39 | HTML file is loaded.
| | 03:40 | But if you want to trigger your logic
off of a specific page being initialized,
| | 03:45 | you will use the pageinit event instead.
| | 03:47 | Let's take a look at PAGE LOADING and UNLOADING.
| | 03:50 | When an external page is loaded into the DOM
there are two events that are going to fire.
| | 03:55 | First is going to be the page beforeloadevent.
| | 03:58 | This is fired before the page is loaded and
then one of two things is going to happen.
| | 04:03 | There is either going to be a page load event
or there's going to be a page load failed event.
| | 04:09 | So if you try to navigate to a page
that doesn't exist for example or something
| | 04:12 | goes wrong with the Ajax request,
then you will get a page load failed.
| | 04:16 | So page before load is triggered
before jQuery Mobile formulates the Ajax
| | 04:21 | request to load the external page, and
you can trap this event if you want to do
| | 04:25 | your own custom page loading logic here.
| | 04:28 | The page load event is triggered when
the page has been successfully loaded, has
| | 04:32 | been parsed, and is inserted
into the DOM by jQuery Mobile.
| | 04:36 | The page load failed is then triggered
by jQuery Mobile if for some reason the
| | 04:40 | request fails and by default the
framework shows the page load failed message,
| | 04:44 | but you can whatever you want here.
| | 04:46 | You can navigate to a different
page or do some custom error messages.
| | 04:49 | It's up to you and finally there's the
page remove event and this is triggered
| | 04:54 | when the framework removes a page from the DOM.
| | 04:57 | So if the page has been navigated away
from in jQuery Mobile needs to reclaim
| | 05:01 | some memory, and it goes to remove
the page from the DOM, you can trap that
| | 05:06 | event and do any custom
work that you need to do.
| | 05:09 | Let's jump over to the code
and see some of these in action.
| | 05:13 | So here I am in the code and I've got
my ExampleSnippet opened and I've got my
| | 05:17 | pageload_start and pageinit
_start example files open.
| | 05:22 | So let's start with the page loading event.
| | 05:24 | I am going to go to my snippets, copy
over the script, and paste into the head.
| | 05:34 | Now the pageload event is bound
to on the parent document itself.
| | 05:39 | So here I'm using jQuery to get a
reference to the document and then calling the
| | 05:43 | bind function to listen for the
pageload event and then here's my eventHandler
| | 05:48 | and my eventHandler takes two arguments.
| | 05:49 | There is the event object and then
there is some data that jQuery Mobile
| | 05:53 | passes along and this is a pretty
complex data object, but it's got some
| | 05:56 | useful properties in it,
| | 05:57 | for example, the URL of
the page that's been loaded.
| | 06:00 | You can use that information for
whatever purposes you may have.
| | 06:03 | In this case, I am just showing the alert
that shows the URL of the page that got loaded.
| | 06:08 | So let's save this and let's run it
and what I am going to do is use the Web
| | 06:15 | Inspector here in Safari.
| | 06:16 | I am going to place a breakpoint on
that line where we show the alert.
| | 06:22 | So now I am going load the external
page and you can see that we hit that
| | 06:26 | breakpoint and I've got a watch
expression on my data object and you can
| | 06:31 | see that there is a whole bunch of
information being passed in here by jQuery Mobile.
| | 06:35 | Now some of this is pretty advanced,
so I am not going to go deeply into it.
| | 06:38 | But down here is the URL property
and this is the URL of the page that's
| | 06:42 | about to be loaded.
| | 06:43 | So if we go ahead and let this run, you
will see that my pageload event has been
| | 06:48 | fired and it's showing the
URL of the page being loaded.
| | 06:51 | I click OK, the page is
loaded, and everything is great.
| | 06:55 | So let's go back to code, let's try
something else, let's copy this, and let's
| | 07:04 | bind to pageloadfailed and now I am
going to refer to a page that doesn't
| | 07:09 | exist, let's run that.
| | 07:15 | And you can see that a page load
failed event happened and you can see that's
| | 07:19 | showing error page there.
| | 07:20 | Let's just change this
really quick just to say error.
| | 07:26 | Let's run it again.
| | 07:28 | And you can see that now my
pageloadfailed event has been fired.
| | 07:31 | There is an error and the
default error message is shown.
| | 07:38 | Now let's take a look at the
page initialization events.
| | 07:41 | So let's scroll over here to our
page initialization events (Page Init).
| | 07:44 | I am going to copy these, paste them in.
| | 07:52 | Now in this case the pageinit,
beforecreate and create events are going to be
| | 07:57 | fired on the page itself.
| | 07:59 | So I'm using jQuery selector here to
get a reference to my first page object,
| | 08:05 | which is this guy right here, and I'm
creating eventHandlers for pageinit,
| | 08:09 | pagebeforecreate, and pagecreate,
and again I am just showing some alerts
| | 08:15 | indicating that each one of these happened.
| | 08:17 | So let's go ahead and
save this and let's run it.
| | 08:22 | So now pagebeforecreate has been fired.
| | 08:24 | So the page is about to be created,
but nothing has been initialized yet.
| | 08:28 | Now pagecreate is fired and at this
point the page has been created and the
| | 08:32 | widget enhancement process is moving
along, and then finally there's page init,
| | 08:37 | in which case everything has been
initialized, all the widgets have been
| | 08:40 | enhanced, and everything
is inserted into the DOM.
| | 08:43 | So those are examples of using page
initialization and loading and unloading
| | 08:47 | events in jQuery Mobile.
| | Collapse this transcript |
| Page change and transition events| 00:00 | Let's look at the Page Change and
Page Transition events in jQuery Mobile.
| | 00:04 | In jQuery Mobile there is a function to
programmatically navigate pages and it's
| | 00:09 | called the mobile.changePage function.
| | 00:12 | Now we haven't covered this yet and we
will in a little bit, but I wanted you
| | 00:15 | to be aware of it because it's how you
change from one page to another using
| | 00:19 | script in jQuery Mobile.
| | 00:21 | Now when this function is called,
it causes two events to be fired.
| | 00:25 | The first one is pagebeforechange event.
| | 00:29 | Now the second event will be one of two things;
| | 00:31 | they will either be a pagechange
event, or a pagechangefailed event.
| | 00:36 | pagechange will be fired if the change
is successful and the new page can be
| | 00:41 | changed too and the pagechangefailed
event will be fired if for some reason
| | 00:46 | something goes wrong, either the page
being changed to has a parsing error or it
| | 00:50 | can't be found or whatever it
is, then that error will fire.
| | 00:53 | And the pagebeforechange event is
fired before any of that happens.
| | 00:57 | It's fired before the change actually begins.
| | 00:59 | So in the event of the pagechange
event being successful, you can do whatever
| | 01:04 | you need to do programmatically
when a page is changed and if the
| | 01:08 | pagechangefailed event happens then
again you can take whatever action you
| | 01:11 | need to take, either navigating to a
different page or showing some error or whatever.
| | 01:16 | Now for transitions, there are also events
involved and page transitions involve two pages;
| | 01:21 | there's a "from" page and a "to" page.
| | 01:24 | Now if we imagine that this little
black rectangle is the screen right here and
| | 01:28 | the current page being shown in the
screen is the fromPage, when a transition
| | 01:32 | happens, the first thing that will
happen is that the fromPage will get a
| | 01:35 | pagebeforehide event and the
toPage will get a pagebeforeshow event.
| | 01:41 | Now at this point, both pages have been
loaded, they have been parsed, they have
| | 01:44 | been placed into the DOM by jQuery
Mobile and they are both present.
| | 01:48 | Now after those events are fired, the
fromPage will animate out, the toPage will
| | 01:52 | animate in and then the fromPage will
get a pagehide event and then the toPage
| | 01:57 | will get a pageshow event.
| | 01:59 | So just to recap, we've got
pagebeforeshow and beforehide and beforeshow is
| | 02:03 | triggered on the page that's about to
be transitioned to before the animation
| | 02:08 | starts and similarly the pagebeforehide
event is on the page that's about to be
| | 02:12 | transitioned away from and
again that's before the animation.
| | 02:15 | And then the pageshow and pagehide
events are triggered on their respective
| | 02:20 | pages, again after the animation has completed.
| | 02:24 | Let's take a look at this in the code.
| | 02:26 | So here in the code, I have got my
pagetrans_start file open and here is my Snippets.
| | 02:31 | So let's go ahead and copy this over.
| | 02:34 | So I'll copy this and paste it into the head.
| | 02:37 | So let's take a quick
look at what's going on here.
| | 02:38 | Down here in the content I've got two pages;
| | 02:41 | here is firstpage and here is
secondpage and they're both being defined
| | 02:45 | using HTML5 section tags.
| | 02:48 | Now in this case they both happen to
be in the same HTML file, but they could
| | 02:53 | be in separate files.
| | 02:55 | So let's go back up here.
| | 02:56 | So what I am doing is I want to attach
the pagebeforehide, beforeshow and then
| | 03:02 | hide and show events to each one of the pages.
| | 03:05 | Well, since those pages are being
defined as section tags and the events are
| | 03:10 | fired on the jQuery Mobile page
construct, I'm using the jQuery selector
| | 03:15 | mechanism here to get all the sections
in the page, in this case, there are two
| | 03:19 | of them, and attach event handlers for each
one for beforehide, beforeshow and so on.
| | 03:25 | Now, when these events happen, I am
going to get a callback function which you
| | 03:29 | see here which takes an event (evt)
and take some associated data.
| | 03:32 | Now the data object changes based
upon which event is being fired.
| | 03:36 | In the case of the pagebeforehide, this
data object will be the next page, this
| | 03:43 | data object will be the previous page
and so on and we'll see that in just a
| | 03:47 | moment, but for now, I am just going to
save and run it and show you it running.
| | 03:52 | So when Safari starts, you can
see that there's a page being shown.
| | 03:55 | Now there is no page being hidden
because there's no current page and then
| | 03:58 | after the page is currently shown,
everything is fine and we only get those two
| | 04:02 | events at that one time.
| | 04:04 | But now watch when I click on Go to
the second page, where you should get the
| | 04:07 | alerts for the page being hidden, the
page being shown and now there's the page
| | 04:12 | hidden and the page shown alerts.
| | 04:14 | So there were four alerts there;
| | 04:16 | one for the page that's being hidden
and then being shown and then after the
| | 04:21 | page has been hidden and then
after the page has been shown.
| | 04:24 | So let's go back to the code and let's
put a breakpoint on this line right here,
| | 04:29 | so we can take a look at
what's in the data object.
| | 04:31 | So let's go back to the browser and
what I am going to do is bring up the Web
| | 04:36 | Inspector and going to go to the
script for code right there, we'll put a
| | 04:46 | breakpoint right there and you can see
that when we reach the breakpoint, we
| | 04:49 | should have a data object that we can look at.
| | 04:52 | So I'm going to go ahead back into the
browser and click on Go to first page.
| | 04:57 | You can see we hit the breakpoint and
now we have our alert that's about to be
| | 05:02 | shown, but let's take a
look at the Data object.
| | 05:04 | So the data:
| | 05:05 | Object in the case of the
pagebeforehide has a nextPage object in it and this
| | 05:10 | gives you all the information about
the page that's about to be shown.
| | 05:15 | So this is called on the page that's
being hidden and you're given information
| | 05:19 | about the page that's coming up.
| | 05:21 | So if we look inside the HTMLElement
object here, this provides you all the
| | 05:26 | information about the page
that's about to be brought in.
| | 05:29 | So let me go ahead and put another
breakpoint there and we are going to run this
| | 05:34 | and you can see the page is being
hidden and the page is being shown.
| | 05:37 | Now the pagehide alert is about to be triggered.
| | 05:40 | And what we are going to do is go back
up here and we're going to take a look at
| | 05:44 | our object and once again we have a nextPage.
| | 05:46 | Let's have another breakpoint right there
because this is another nextPage object.
| | 05:51 | Let's run until we get to the pageshow.
| | 05:54 | And now in the pageshow case, we have
a prevPage object and this is the data:
| | 06:00 | Object for the page that was being
shown and again you can see there is all of
| | 06:04 | this information here for you to make
use of, lots of data being provided to
| | 06:08 | you by jQuery Mobile.
| | 06:09 | So that's a quick summary of using
the page transition events in jQuery
| | 06:13 | Mobile and trapping events to see
what's going on in the page transition
| | 06:18 | event handlers.
| | Collapse this transcript |
|
|
8. The jQuery Mobile APIConfiguring defaults| 00:00 | In addition to providing a whole bunch
of really great features for marking up
| | 00:04 | and working with mobile webpages, jQuery
Mobile actually provides a full API for
| | 00:10 | working with the library itself and it
does that by exposing a mobileinit event
| | 00:16 | that you can use to initialize
your application's custom settings.
| | 00:20 | This is your chance when your
application starts up to make any customizations
| | 00:25 | you want to the way that
jQuery Mobile does things.
| | 00:28 | Now the mobileinit event fires
immediately when the framework loads.
| | 00:34 | So in order to take advantage of
this event, you have to sandwich any
| | 00:38 | customization code that you have in
between the loading of jQuery and the
| | 00:43 | loading of jQuery Mobile.
| | 00:45 | So typically, you have your
script loader that looks like this;
| | 00:48 | you have a script tag that refers to
the jQuery library and then you have
| | 00:52 | another script tag that refers
to the jquery-mobile library.
| | 00:55 | And in order to make sure that your code
gets executed before jQuery Mobile just
| | 01:00 | goes off running and doing its thing,
what you got to do is put your script in
| | 01:04 | the middle here and what I am doing
here is binding on the document to the
| | 01:09 | mobileinit event and calling an
initialization function that I'll define either
| | 01:15 | here or somewhere else.
| | 01:16 | But the main point here is that you
have to have this script in between jQuery
| | 01:20 | and jQuery Mobile, that way your script
can do any customizations on the jQuery
| | 01:26 | Mobile library before it goes off and running.
| | 01:28 | So then that begs a question well,
what would you like to customize?
| | 01:32 | Well, jQuery Mobile provides a whole
bunch of settings all accessible via the
| | 01:37 | $.mobile object and so for
example you'd have $mobile.
| | 01:41 | and then the name of some setting and
you can set that setting to some newValue.
| | 01:46 | Now there's a whole bunch of settings
that you can customize in jQuery Mobile,
| | 01:50 | but I have provided here a table that
lists the most common ones that you are
| | 01:55 | probably going to want to customize.
| | 01:58 | So for example, the activePageClass
is the CSS class that's applied to the
| | 02:03 | currently active page and during transitions.
| | 02:06 | Now it defaults to a class called ui-
page-active, but you can change that to
| | 02:10 | whatever you want here.
| | 02:11 | So if you come up with some CSS class
that you like to apply to whatever the
| | 02:16 | active page is, you can
customize that when your app starts up.
| | 02:19 | The ajaxEnabled setting determines
whether pages are loaded via AJAX requests.
| | 02:25 | Now this defaults to true because one
of the major things that jQuery Mobile
| | 02:29 | does, it makes AJAX requests for
external pages, loads them asynchronously,
| | 02:34 | parses them and inserts them into
the DOM with these nice animations.
| | 02:38 | Now you can turn that behavior off if
you want, but it defaults to being on.
| | 02:42 | The next two settings defaultPageTransition
and defaultDialogTransition are the
| | 02:47 | default transitions used for pages.
| | 02:49 | Now throughout this title, you've
probably noticed that the transitions
| | 02:53 | you've been seeing when I change from
one page to another, has been the slide
| | 02:57 | transition and that's because the
default value for the defaultPageTransition
| | 03:01 | setting is a slide and similarly for
dialogs, the defaultDialogTransition is pop.
| | 03:07 | But you can change them to be whatever you want.
| | 03:09 | You can use fade or flip or pop
or slide whatever you want to use.
| | 03:13 | The loadingMessage and pageLoadErrorMessage
settings are the messages shown when
| | 03:19 | a page is loading and
when a page can't be loaded.
| | 03:22 | And in the first case, it defaults to
the word loading and in the second case,
| | 03:25 | it defaults to error loading page, but
you can change that to be whatever you want.
| | 03:29 | So let's take a look at some
of the customizations in action.
| | 03:33 | I am going to fire up my Code Editor
over here and you can see I have got my
| | 03:37 | Snippets opened and I've scrolled down
to the Config section and I have got my
| | 03:41 | config_start file open over here.
| | 03:43 | So what I am going to do is copy this
script right here and then I'll explain
| | 03:50 | it in a moment, but now I have to
insert it in a very specific place and
| | 03:53 | remember I have to insert it right
here between the jquery library and the
| | 03:58 | jquery.mobile library.
| | 04:00 | So I am going to select that line
and paste and so now I've got my script
| | 04:04 | sandwiched in between the two and on
the document object itself I am going
| | 04:09 | to listen for the mobileinit event
and when that event fires, I am going to
| | 04:14 | call this function right here, which will go
and customize my settings in jQuery Mobile.
| | 04:19 | First, it's going to show an alert
that says the Mobile initialization event
| | 04:22 | fired and then we are just going to
go ahead and change some settings.
| | 04:26 | We'll change the defaultPageTransition
to be a fade, we'll make the
| | 04:29 | defaultDialogTransition be
a flip and we'll change the
| | 04:33 | pageLoadingErrorMessage to be Whoops!
| | 04:36 | instead of error loading page.
| | 04:38 | So let's go ahead and save and then
down here you can see I have got some
| | 04:42 | exercise code that's going to work some of this.
| | 04:45 | So I've got a link that goes to a
secondpage, I've got a link that tries to load
| | 04:50 | an externalpage that's nonexistent,
let's actually make sure that's nonexistent
| | 04:55 | and then we will just exercise this file.
| | 04:58 | So let's go ahead scroll back up to
the top and we'll click Run and you can
| | 05:03 | see okay, there is the Mobile
initialization event, it has now fired and
| | 05:07 | here's my first page.
| | 05:08 | Now if you look at the code you will see
that my defaultPageTransition is a fade
| | 05:13 | operation right here.
| | 05:14 | So when I go to the second page, instead
of getting a slide effect, I should get
| | 05:18 | a fade which is what happens and when I
go back to the first page it should fade
| | 05:22 | back, that's very good. All right.
| | 05:24 | So now let's try to load the
external page which doesn't exist.
| | 05:27 | Now ordinarily, I would get an
error that says error loading page, but
| | 05:31 | let's watch what happens.
| | 05:32 | So I try to load an
external page, and it says Whoops!
| | 05:35 | That's because I customized that. All right.
| | 05:37 | Let's go back to the code.
| | 05:39 | Let's try loading the secondpage as a dialogue.
| | 05:44 | Remember to do that from earlier.
| | 05:45 | We have to do data-rel="dialog", to do that.
| | 05:49 | So I am going to save and we are
going to go back and run this again.
| | 05:53 | Okay there is my event.
| | 05:54 | So now when I go to the
second page, I should get a flip.
| | 05:57 | So let's look at the code. Yeah.
| | 05:59 | So now I have my defaultDialogTransition
is a flip, normally it's a pop.
| | 06:04 | So let's go back to the browser.
| | 06:06 | So when I go to the second page,
instead of seeing a pop, I should see a flip
| | 06:09 | and that's exactly what happens.
| | 06:11 | So that should give you an idea of
how customizable jQuery Mobile is.
| | 06:15 | I've just shown you a couple of simple
examples, but you can customize a whole
| | 06:18 | bunch of things in jQuery Mobile from
the CSS classes that are applied to pages
| | 06:22 | to all kinds of things.
| | Collapse this transcript |
| Utility methods| 00:00 | jQuery Mobile also provides a set of
utility methods and properties that you can
| | 00:05 | make use of in your scripts, should you
so choose and in this table, I've listed
| | 00:09 | some of the more common ones.
| | 00:11 | There is the changePage method which
programmatically changes the current
| | 00:16 | page to another page.
| | 00:18 | So instead of just waiting for the
user to click on something, you can
| | 00:21 | change pages yourself.
| | 00:23 | There is also the silentScroll method
and that scrolls to a given Y position on
| | 00:28 | the page without activating any
of the scroll event listeners.
| | 00:32 | This is useful because in some cases
where you want to have a link down to a
| | 00:36 | named anchor in the page remember
because jQuery Mobile is using that hash
| | 00:41 | character (#) to do things like load
other pages that are in the same HTML file,
| | 00:45 | you can't use named anchors in your HTML pages.
| | 00:49 | So if you want to scroll down to
another element in the page, you need to use
| | 00:54 | silentScroll and it'll do that without
activating any of the scrolling event
| | 00:58 | listeners that might be
attached to the page itself.
| | 01:01 | There is the activePage property and
that represents the currently active page
| | 01:05 | object and then there are the methods
for showing and hiding the PageLoadingMsg.
| | 01:11 | So if for some reason you decide to
override the AJAX functionality that loads
| | 01:16 | pages into jQuery Mobile with your own,
then you can use these methods to show
| | 01:21 | and hide the page loading dialog.
| | 01:23 | So let's take here a quick
look at changing pages via script.
| | 01:26 | So to change page via script you use the
changePage function and that takes two arguments.
| | 01:32 | There is the 'to' argument
and the 'options' argument.
| | 01:35 | Now the 'to' argument is the page to change to.
| | 01:39 | It's either a URL in which case you
give it an absolute or a relative URL to
| | 01:44 | change to in the case of a string or
in the case of an object, you've used
| | 01:49 | jQuery to get a reference to some other
page elements in the HTML file and you
| | 01:55 | want a change to that. Now that's enough,
| | 01:57 | the options argument is actually optional.
| | 01:59 | You don't have to pass it if you don't
want to, but if you do, there are a few
| | 02:02 | things that you can specify.
| | 02:04 | Now in the options object, you can
specify AllowSamePageTransition which allows
| | 02:09 | transitions to the same page, so if you
are going from and to the same page, you
| | 02:15 | can specify that the
transition should apply there.
| | 02:18 | Now that defaults to false, but you
can set it to true if you want to.
| | 02:22 | There's also the reloadPage option
which forces a page reload, even if it's
| | 02:27 | already in the DOM and again that
defaults to false, but you can force pages to
| | 02:32 | be reparsed or reloaded,
even if they're already present.
| | 02:35 | There's also the showLoadMsg and
that's whether or not to show the loading
| | 02:39 | message, that defaults to true, but you
can turn it off if you want to and then
| | 02:43 | there's the transition and that's the
transition to use when changing to the new page.
| | 02:47 | If you don't specify it, it uses
whatever the default transition is or you
| | 02:51 | can list it yourself.
| | 02:53 | Couple of other utility functions that
are pretty useful, the ones that I've
| | 02:56 | chosen here to list are usually working
with URLs because you find working with
| | 03:01 | URLs is A. Usually a pain
and B. Sometimes pretty common.
| | 03:06 | So jQuery provides some utility
functions for working with URLs.
| | 03:09 | There are a couple of functions to determine
whether or not a URL is relative or is absolute.
| | 03:15 | There's a function called isSameDomain
which will compare two URLs to see if
| | 03:19 | they're in the same domain,
including the protocol.
| | 03:21 | So for example if you'd have http://joe.com
and https://joe.com, those are not the same.
| | 03:29 | The protocols have to be the same.
| | 03:31 | And then there is parseUrl which is a
method that will take a URL and parse it
| | 03:35 | into pieces that can be really
easily accessed, such as the domain, the
| | 03:40 | protocol, the query string, the path,
the relative path, the filename, the
| | 03:45 | filename extension, all that good stuff.
| | 03:48 | So let's just take a quick look at one
of the utility functions that's changing
| | 03:53 | from one page to another
programmatically because this is something you are
| | 03:55 | probably going to run into fairly commonly.
| | 03:59 | So here I am in the code with the utility
snippets scroll to and here is my utility_start.
| | 04:05 | So what we are going to do is
build a little function that changes
| | 04:09 | pages programmatically.
| | 04:11 | So I am going to copy this script right
here and that contains my change function.
| | 04:15 | And I am going to paste that in here.
| | 04:17 | I am going to go back to my Snippets.
| | 04:20 | And then I've got two buttons.
| | 04:22 | I am going to copy this one and put
that into my content section, right here
| | 04:31 | and I'll copy the other one and we'll put that
into my section down here, on the secondpage.
| | 04:40 | So now I've got two buttons and when
the buttons get clicked they call this
| | 04:44 | doChange function and the doChange function
passes in the ID of the page we want to change to.
| | 04:52 | You can see that the title of the
button is Go to Page whatever Via Script.
| | 04:56 | This is not a link that's happening
here, this is a programmatic change.
| | 05:00 | So back up in the doChange function,
I've got the newPage I am going to and I
| | 05:05 | am going to call $.mobile.changePage
and that will take me to the newPage, so
| | 05:09 | let's save and run.
| | 05:12 | So I am going to click on
Go to Page 2 Via Script.
| | 05:14 | You can see that that works
and Go to Page 1 Via Script.
| | 05:18 | It seems to be working just fine.
| | 05:20 | So we're using the changePage
function to programmatically change pages.
| | 05:24 | Let's go back and make a slight edit.
| | 05:26 | Let's comment this one out and
uncomment this one because here I'm specifying a
| | 05:31 | transition for sliding up rather than
using whatever the default is and this is
| | 05:37 | using the options object.
| | 05:39 | Remember here I didn't pass it in
because it's optional, but here I am going to
| | 05:42 | use the transition feature.
| | 05:43 | So I'll save and we'll run it.
| | 05:46 | So now when I click on this button, I
should get a slide up effect, and I do
| | 05:51 | and that should show you a pretty
good example of using some of the jQuery
| | 05:56 | Mobile utility functions.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | All right. Well that wraps up our
exploration of jQuery Mobile.
| | 00:04 | I hope you've enjoyed joining me here
as we see how jQuery Mobile can help you
| | 00:08 | build really visually rich,
almost native looking mobile websites.
| | 00:12 | Where you might want to go next is if
you're not familiar with the concepts and
| | 00:17 | fundamentals of building mobile web
applications, there is a great title here
| | 00:22 | on the lynda.com that covers the
fundamentals of mobile website development and design.
| | 00:27 | So even though jQuery Mobile is
pretty good for building mobile websites and
| | 00:32 | mobile web applications there's
additional information that's applicable to
| | 00:36 | mobile web development in general.
| | 00:38 | So I would go, check that out next.
| | 00:40 | I'd also go, check out the jQuery Mobile
website and see some of the examples on
| | 00:45 | there because that website and jQuery
Mobile are being updated all the time.
| | 00:50 | So there are new features being added
that I did not get a chance to cover here,
| | 00:54 | go check out the jQuery Mobile gallery
as well for some inspiration on some ways
| | 00:59 | that you can build mobile web
applications with the jQuery Mobile library.
| | 01:03 | Well, I am really excited to see what
all of you build with jQuery Mobile,
| | 01:06 | thanks, good luck and happy coding.
| | Collapse this transcript |
|
|
