February 2012
Beginner to intermediate
272 pages
6h 20m
English
Content preview from jQuery Mobile: Up and Running
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,
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.
Editing Themes
The theme is just a CSS file. That means we can create the CSS file from scratch or edit one using any text editor. We need to understand how jQuery Mobile defines elements and classes to know what to change.
jQuery Mobile uses classes to define styles. Every widget in the HTML markup will be converted to an element with some class definitions. Therefore, our UI work will be just defining styles for these classes.
Tip
Remember that in the content area of a page, we can have any HTML that we want, so we can still create our own markup with CSS styles apart from the framework CSS.
Every class is defined including a ui prefix and the color swatch as a suffix,
ui-<name>-<color-swatch>.
Therefore, for example for defining the buttons, the class name is
ui-btn-a for a color
swatch and ui-btn-c for
c color swatch. Then, from the HTML using data-theme or another attribute we will define
which color swatch will be applied.
Table 7-1 shows the typical class names we can edit and define in a theme CSS file.
Table 7-1. Classes that we can define in the theme file to customize the UI (<x> defines the color swatch)
| Class name | Description |
|---|---|
| Headers, footers, and other bars |
| Buttons in normal state |
| Buttons in hover state |
| Buttons in pressed state |
| Buttons in active state (all swatch colors) |
| Page body |
| Links |
| Icon for buttons and other widgets |
| Applies to all the controls that have rounded corners ... |
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.