jQuery Mobile Cookbook
Chetan K. Jain
Language: English
Pages: 320
ISBN: 1849517223
Format: PDF / Kindle (mobi) / ePub
Chetan K Jain, "jQuery Mobile Cookbook"
English | ISBN: 1849517223 | 2012 | 320 pages | PDF | 4 + 8 MB
Over 80 recipes with examples and practical tips to help you quickly learn and develop cross-platform applications with jQuery Mobile
Overview
Create applications that use custom animations and use various techniques to improve application performance
Use and customize the various controls such as toolbars, buttons, and lists with custom icons, icon sprites, styles, and themes
Write simple but powerful scripts to manipulate the various configurations and work with the events, methods, and utilities which are provided by the framework.
In Detail
jQuery Mobile is an award winning, HTML5/CSS3 based open source cross-platform UI framework. It offers a very cool and highly customizable UX. It is built on the popular jQuery library and uses declarative coding making it easy to use and learn. It is the market leader today considering the numerous browsers and platforms that it supports.
"jQuery Mobile Cookbook" presents over a hundred recipes written in a simple and easy manner. You can quickly learn and start writing code immediately. Advanced topics such as using scripts to manipulate, customize, and extend the framework are also covered. These tips address your common everyday problems. The book is very handy for both beginner and experienced jQuery Mobile developers.
You start by developing simple apps using various controls and learn to customize them. Later you explore using advanced aspects like configurations, events, and methods.
Develop single and multi-page applications. Use caching to boost performance. Use custom transitions, icon sprites, styles, and themes. Learn advanced features like configurations, events, and methods. Explore future trends by using HTML5 new features and semantics with jQuery Mobile.
"jQuery Mobile Cookbook" is an easy read and is packed with practical tips and screenshots.
What you will learn from this book
Create single-page and multi-page applications that use custom CSS and JavaScript transitions; improve performance using Prefetch, DOM-Cache, and Application Cache
Use fixed and full screen toolbars, navbars, and buttons; customize them with your own icons, icon sprites, and styles
Use XML and JSON data in your application; format page content using layout grids, collapsibles, and nested accordions
Build accessible forms; use form controls like flip switches, sliders, and select menus; validate and submit forms using Ajax
Use various types of lists such as Inset, Numbered, Nested, Read-only, and Split Button lists; manipulate lists using JavaScript
Use JavaScript to dynamically create and initialize controls, load and change pages, handle events; tweak and customize the framework configurations
Explore HTML5 semantics and features such as Local Storage, Session Storage, History, 2D Canvas, 3D, Geolocation, Web Workers, Audio, and Video
Use custom fonts and backgrounds, upgrade themes, override existing themes; generate and share new themes using the Theme Roller tool
Approach
This book is written in Cookbook style with a lot of practical tips, code, and step-by-step examples, to ease and quicken your learning curve.
Who this book is written for
If you are a beginner with jQuery/JavaScript skills, this book offers you numerous examples to get you started.
If you are a seasoned developer, this book lets you explore jQuery Mobile in greater depth.
Why Nations Fail: The Origins of Power, Prosperity, and Poverty
Nuclear 2.0: Why a Green Future Needs Nuclear Power
Beginning Google Glass Development
#page2. You can style this link as a button by using the data-role="button" attribute. Next, add the #page2 page using the
fixed toolbars here. To toggle the toolbar visibility, you can use the fixed toolbars in the Fullscreen mode. This recipe shows you how to create a simple Photo Viewer application that uses fullscreen toolbars. Toolbars Getting ready Copy the full code of this recipe from the code/03/fullscreen-toolbars sources folder. This code can be launched using the URL http://localhost:8080/03/fullscreentoolbars/main.html. How to do it... 1. In main.html create the #main page and a tag to display
method to let the framework initialize and enhance the controls. When the page loads you will see the Volume Control form with both the dynamically added flip switch and the disabled slider control, as shown in the following screenshot: Next add code to handle the change event of #flipswitch and in the event handler, check whether the flip switch is on or off using the slider().val() call. Based on this value, enable or disable the slider volume control by calling slider('enable') or
modification to update the list. 160 Chapter 6 When the app is started, the display looks like the following screenshot with an empty list: Pressing the Add button adds new list items to the list, as in the following screenshot: Pressing the Remove button removes the recently added list item. 161 List Views There's more... As mentioned in this recipe, you have to call the refresh() method on the listview plugin after any modification. On adding new list items or on removing list items,
and Dialogs In this chapter, we will cover: ff Writing a single-page template application ff Writing a multi-page template application ff Prefetching pages for faster navigation ff Using the DOM cache to improve performance ff Custom styling a dialog ff Using CSS to create a bouncing page transition ff Using JS to create a slide and fade page transition ff Using data-url to handle a login page navigation ff Using the History API to create a custom error pop up Introduction A