Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying jQuery Mobile Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
jQuery Mobile Cookbook

jQuery Mobile Cookbook

By : Chetan Jain
3 (1)
Buy this Book
close
close
jQuery Mobile Cookbook

jQuery Mobile Cookbook

3 (1)
By: Chetan Jain
Buy this Book

Overview of this book

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.
Table of Contents (19 chapters)
close
close
close
jQuery Mobile Cookbook
Icon
jQuery Mobile Cookbook
Credits
Icon
Credits
About the Author
Icon
About the Author
Acknowledgement
Icon
Acknowledgement
About the Reviewers
Icon
About the Reviewers
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Get Rolling
Icon
Get Rolling
Icon
Introduction
Icon
Writing your first jQuery Mobile application
Icon
Using JS Bin to create a simple application
2
Pages and Dialogs
chevron up
Icon
Pages and Dialogs
Icon
Introduction
Icon
Writing a single-page template application
Icon
Writing a multi-page template application
Icon
Prefetching pages for faster navigation
Icon
Using the DOM cache to improve performance
Icon
Custom styling a dialog
Icon
Using CSS to create a bouncing page transition
Icon
Using JS to create a slide and fade page transition
Icon
Using data-url to handle the login page navigation
Icon
Using History API to create a custom error pop up
3
Toolbars
Icon
Toolbars
Icon
Introduction
Icon
Using fullscreen fixed toolbars
Icon
Using persistent navbars in toolbars
Icon
Customizing the header with multiple buttons
Icon
Adding a customized round button to the header
Icon
Adding an image to the header
Icon
Adding a customized back button
Icon
Adding a layout grid to the footer
4
Buttons and Content Formatting
Icon
Buttons and Content Formatting
Icon
Introduction
Icon
Scripting a dynamically added button
Icon
Using a custom icon in a button
Icon
Adding a custom icon sprite
Icon
Replacing the default icon sprite
Icon
Using alternate icons in a collapsible
Icon
Creating a nested accordion
Icon
Creating a custom layout grid
Icon
Using XML content
Icon
Using JSON content
5
Forms
Icon
Forms
Icon
Introduction
Icon
Native styling of form controls
Icon
Disabling text controls
Icon
Grouping radio buttons in a grid
Icon
Customizing a checkbox group
Icon
Creating dynamic flip switch and slider controls
Icon
Using options to auto-initialize a select menu
Icon
Validating forms
Icon
Submitting a form using POST
Icon
Fetching data using GET
Icon
Creating an accessible form
6
List Views
Icon
List Views
Icon
Introduction
Icon
Using inset and non-inset lists
Icon
Creating a custom numbered list
Icon
Using a nested list
Icon
Using a read-only nested list
Icon
Formatting content in a list
Icon
Using a split button list
Icon
Using image icons
Icon
Creating a custom search filter
Icon
Modifying a list with JavaScript
7
Configurations
Icon
Configurations
Icon
Introduction
Icon
Configuring the active classes
Icon
Configuring ajaxEnabled
Icon
Configuring autoInitializePage
Icon
Configuring the default transitions
Icon
Configuring ignoreContentEnabled
Icon
Configuring the page loading and error messages
Icon
Configuring the default namespace
Icon
Configuring hashListeningEnabled and subPageUrlKey
Icon
Configuring pushStateEnabled and linkBindingEnabled
8
Events
Icon
Events
Icon
Introduction
Icon
Using orientation events
Icon
Using scroll events
Icon
Using touch events
Icon
Virtual mouse events
Icon
Page initialization events
Icon
Page load and remove events
Icon
Page change events
Icon
Page transition and animation events
Icon
Using layout events
9
Methods and Utilities
Icon
Methods and Utilities
Icon
Introduction
Icon
Using loadPage() to load a page
Icon
Using changePage() to change a page
Icon
Using jqmData() and jqmRemoveData()
Icon
Using jqmEnhanceable()
Icon
Using jqmHijackable
Icon
Using $.mobile.base
Icon
Parsing an URL
Icon
Using $.mobile.path utility methods
Icon
Using silent scrolling
10
The Theme Framework
Icon
The Theme Framework
Icon
Introduction
Icon
Theming a nested list
Icon
Using a custom background
Icon
Using custom fonts
Icon
Styling corners
Icon
Overriding the global Active State theme
Icon
Overriding an existing swatch
Icon
Using the ThemeRoller tool to create a swatch
11
HTML5 and jQuery Mobile
Icon
HTML5 and jQuery Mobile
Icon
Introduction
Icon
Using the new HTML5 semantics
Icon
Improving speed and taking your application offline
Icon
Using Web Workers for intensive tasks
Icon
Using local and session storage
Icon
2D drawing with Canvas
Icon
Applying Gaussian blur on a SVG image
Icon
Tracking your location with the Geolocation API
Icon
Playing music with the
Icon
Viewing videos with the
1
Index
Icon
Index

Using JS to create a slide and fade page transition

In the previous recipe, you learned to add a custom transition to your jQuery Mobile app using CSS. You can also create custom transitions using JavaScript. This recipe shows you how to create a "slidefade" (slide and fade) effect during page transition in your app by using JavaScript.

Getting ready

Copy the full code of this recipe from the code/02/custom-js-transition sources folder. You can launch this code using the URL http://localhost:8080/02/custom-js-transition/main.html.

How to do it...

Carry out the following steps:

  1. Create the customtransition.js JavaScript file and define your custom transition by adding a mycustomTransition() method, as shown in the following code snippet. Here, define how the from and to pages should animate during the transition:

    function mycustomTransition( name, reverse, $to, $from ) {
    var deferred = new $.Deferred();
    // Define your custom animation here
    $to.width("0");
    $to.height("0");
    $to...
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
jQuery Mobile Cookbook
End of Section 2
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon