Advertise here with BSA
Our fifth jQuery Mobile tutorial. Today we continue talking about built-in set of icons, icon placement, creating custom buttons, using of swatches, making custom themes and so on. All examples are supported with code snippets.
ADDING ICONS TO BUTTONS
These images, or icons, allow us to know what the button is without having to read it. They also make some buttons appear less awkward if there is not enough space to spell out what they are supposed to do.
USING THE JQUERY BUILT-IN ICON SET
jQuery Mobile comes with a built-in set of icons that you can use on your buttons to help with styling for mobile devices. These icons are applied to your buttons by including a data-icon="" attribute in the element you are using as a button. The icon you want to display on the button is the value for the attribute. For example, if I wanted to display a search icon in my button I would use data-icon="search" as an attribute on the element that I am using as a button.
The included icons are
Left Arrow – data-icon=”arrow-l”
Right Arrow – data-icon=”arrow-r”
Up Arrow – data-icon=”arrow-u”
Down Arrow – data-icon=”arrow-d”
Delete - data-icon=”delete”
Plus – data-icon=”plus”
Minus – data-icon=”minus”
Check – data-icon=”check”
Gear – data-icon=”gear”
Refresh – data-icon=”refresh”
Forward – data-icon=”forward”
Back – data-icon=”back”
Grid – data-icon=”grid”
Star – data-icon=”star”
Alert – data-icon=”alert”
Info – data-icon=”info”
Home – data-icon=”home”
Search – data-icon=”search”
Example 38: Adding icons to button
Link-based buttons being created with the use of data-role="button".
Each button has had a different icon applied to it by using data-icon="back", dataicon="home", and data-icon="forward" and this added default built in jQuery icons to the buttons as shown in the image below
POSITIONING OF JQUERY MOBILE DEFAULT ICONS IN DIFFERENT PLACES IN THE BUTTON
This is the default behavior of icon placement on buttons. We can change the icon placement using the data-iconpos="" attribute and a value of top, right, or bottom. It should not come as a surprise that the placement of the icon will be exactly where the value says to place it. We can also use a value of notext to leave only the icon on the button and remove the text. This resizes the button to be to be barely larger than the icon itself and can come in handy when you need to place many buttons on a single line for a small screen.
Example 39: Use of data-iconpos Attribute in defining Icon placement in button
CREATING CUSTOM ICON
The Icon Disc
You may have noticed that all the built-in icons are sitting on top of a round circle or disc. This is to help the icon stand out and work on any color of background. This disc must fit within the 18×18 pixel space. This means that when you are designing a custom button, you want to add a few pixels of space so that your custom icon does not appear broken or out of place when the disc is applied.
We create an icon disc and add an icon to it using the below CSS snippet of code
Then add it to our html markup as shown below
Example 40: Applying a custom button to button
We used the data-icon attribute and pass in a custom value. The value custom-cart-icon is used to generate a class named ui-icon-custom-cart-icon
The media query is used to check the mobile browser for support of high-resolution icons. If the browser supports them, then the CSS code inside the media-query will run. The background-image property again, only this time points to a high-resolution file.
The image to fit within a space of 18×18 pixels. Without this property being set, the larger image will try to scale up and will end up being mostly hidden, leaving only a small portion of your custom icon visible.
USING ICONS AND CLASSES
Even though CSS3 is in use and helps reduce file size, some static assets are still used. They have been put together into a minimum amount of files that are downloaded only when needed.
Currently the default theme uses five static image files:
ajax-loader.png—This is the animated loader or spinner.
icons-18-white.png—This sprite contains 22 white icons.
icons-18-black.png—This sprite contains 22 black icons.
icons-36-white.png—This sprite contains 22 high-res white icons.
icons-36-black.png—This sprite contains 22 high-res black icons.
The file ajax-loader.png is the spinner or loader image that appears when pages are being loaded through AJAX. The image dimension is 35×35 pixels and is downloaded by the browser on page load.
The files icons-18-white.png and icons-18-black.png are sprite files. They are horizontal sprites that measure 776×18 pixels each. They contain 22 icons or images that are 18×18 pixels separated by an 18-pixel space. Most of the icons found in this file do not take up the full 18×18 pixel space. This is because a circular disc is applied through CSS as a background to help the icons maintain visibility on whatever object they are placed. Each image has between 2 and 4 pixels of empty space around the edges to make room for the disc.
The files icons-36-white.png and icons-36-black.png are also sprite images, and they contain the same images as the other two sprite files. The difference here is that the icons contained in these sprites are 36×36 pixel images with a 36-pixel space between them that is used for high resolution displays, like those with Retina™ displays. These high-resolution icons are loaded only on devices that support them, so you do not need to worry about wasting mobile bandwidth on devices that cannot use them. This is done through the following snippet that checks for device compliance:
If the device viewing the page does not meet the requirements of the media query, then any code inside it is skipped and not loaded.
ADDING JQUERY MOBILE THEMES AND SWATCHES TO YOUR MOBILE SITE
In jQuery Mobile, a ‘theme’ is a unified visual design applied across the interface. In practical terms, a theme specifies everything from fonts to drop shadows to colors.
In keeping with the idea of separating layout from color and texture, a jQuery Mobile theme can have multiple ‘swatches’. Swatches are a set of defined styles that can be applied when using a theme. By default five swatches are included with jQuery Mobile. You can change the default swatch used for an entire page by including an attribute of data-theme with the value set to the swatch you want loaded. When the page loads, every component except the header and footer will have that swatch color scheme applied to it.
A swatch is a unified color concept governing the colors of background, text, shadows, iconography, etc.
The default jQuery Mobile theme includes five swatches (called a, b, c, d, and e). Each swatch provides different visual emphasis, with swatch a being the most visually emphatic (typically white text on a black background), and swatch d being much softer.
Swatch e is an ‘error’ swatch. JQuery Mobile defaults to swatch c in most cases, but it is easy to specify a different swatch using the data-theme attribute. The data-theme attribute can be applied to any enhanced element and will cascade down through child elements.
However, an attribute of data-theme="b" has been added to standard markup for setting up a page; This attribute will change the applied swatch for the entire page.
It will not, however, change the swatch for the header and footer. To change those you must include the data-theme attribute separately.
Example 41: Adding jQuery mobile themes and swatches to a standard markup for setting page
SWATCHES IN JQUERY MOBILE
Example 42: Adding common swatches in jQuery mobile
DEFAULT SWATCHES
SWATCHE A
SWATCHE B
SWATCHE C
SWATCHE D
SWATCHE E
Some few image of the ‘choose’ label of select form input when clicked
MIXING JQUERY MOBILE SWATCHES
You can even mix and match swatches within a given page, giving you fine control over the look and feel of your application.
Example 43: Mixing common default swatches in jQuery mobile
SPECIFYING THE SWATCH USED ON ELEMENTS BY CLASS ATTRIBUTE VALUE
Starting at the top you can see that both the page and the header sections do not have a datatheme attribute used, so theme defaults will be used on these sections.
Example 44: Mixing common default swatches in jQuery mobile by specifying the swatch used on elements by class attribute value
While only a few classes were used, you can customize just about every facet of the base jQuery
Mobile styles by overwriting classes like the following:
ui-bar-(a-z)
ui-body-(a-z)
ui-btn-up-(a-z)
ui-btn-down-(a-z)
ui-btn-active
ui-corner-all
ui-br
ui-icon
ui-icon-alt
ui-overlay
ui-shadow
To see all the classes that you can use, open the noncompressed or minified CSS file that is part of the jQuery Mobile framework. This file has been commented and is really helpful when trying to create your own customized styles. Let’s take a look at how to create our own styles and include them.
CUSTOMIZING A SWATCH
The theme swatches in jQuery Mobile are all defined by CSS, so they are easy to modify to suit your individual needs. The swatches are broken out into sections in the jQuery Mobile style sheet, and are straightforward.
The best way to modify a theme is to create a style sheet that overrides the desired styles and then load that style sheet after you load the jQuery Mobile style sheet. This is especially useful if you are using the CDN to serve the jQuery Mobile style sheet.
APPLYING A CUSTOM THEME
Now that you know you are able to customize the styles of jQuery Mobile by using CSS classes, it is time to learn how to modify the default styles and even include your own. To do this you need to either edit the existing CSS file, or create your own and add it to the mobile page. Because I believe in using nondestructive methods when learning something new, we create a new CSS style sheet and add it to our page.
For example, let’s say we want to change the yellow colors of Swatch E to be green. It’s a simple matter of creating some override rules.
Note that I have included my custom Swatch E style sheet after the jQuery Mobile style sheet, thus guaranteeing that my styles will supersede the default styles.
Example 45: Applying a custom theme
CREATING A SWATCH
You have a few different options when it comes to creating a swatch. You can either modify an existing swatch or code one from scratch, or copy one and change the swatch letter and change the settings to something you’d prefer. One other option is also available ‘Rolling Your Own Theme with ThemeRoller’.
To create our own swatch, we are going to copy one of the existing swatches and then modify the styles to be what we want.
Below is an entire swatch that was copied and then changed to be a custom swatch.
Example 46: Entire swatch – a copied and changed/modified to swatch f
To create this new f swatch, the a swatch was copied and then modified. The fastest way to start the modification is to do a search-and-replace of the entire file for ‘-a’ and replace it with a dash and the letter of the swatch you are creating. When performing a search and replace, make sure you do not replace -o, -m, -w, -g, -s, or -i, or you will either break your styles altogether or break the fallback support for other browsers.
The f theme in an html markup in preview in a mobile browser
Example 47: Modified new created theme f in standard html markup setting
THEMING SITE COMPONENTS
You just learned that you can use classes to change various aspects of the theme of your site, but there are a few extra options that you can