February 2012
Beginner to intermediate
272 pages
6h 20m
English
Content preview from jQuery Mobile: Up and RunningBecome an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Interactive Rows
Lists become more powerful when we combine them with touch interaction.
If a list element contains an a
element, it will convert that row in an interactive one for touch and/or
cursor navigation. One great feature of jQuery Mobile is that the whole
row will be interactive automatically for touch no matter where the link
is placed inside the row. Meaning the user doesn’t need to tap only in the
link’s text area. She can tap on any pixel in the row.
Note
An interactive row has a different height than a read-only one. This different design is optimized for touch interaction, as the touch area needs to be large enough to avoid errors. The row text also has a larger font size. In iOS-based devices, 44 pixels is the recommended height for most common controls. Other touch devices use similar sizes.
The framework automatically adds a nice arrow at the right side of
the row giving the user a hint that the row is touchable, as seen in Figure 4-5. This icon can be changed using data-icon, as we will see in a minute.
On the same list, we can mix interactive rows with read-only rows. However, the most typical UI design is to have full-interactive or full-read-only lists.
In the following sample, shown in Figure 4-5, we can see interactive rows in action:
<!DOCTYPE html> <html> <head> <!-- Typical jQuery Mobile header goes here --> </head> <body> <div data-role="page" id="main"> <div data-role="header"> <h1>Interactive</h1> </div> <div data-role="content"> <ul data-role="listview"> ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.