KEMBAR78
Jquery mobile tutorial | PDF
Uploaded byHarikaReddy115
162 views

Jquery mobile tutorial

jQuery Mobile is a user interface framework built on jQuery core for developing responsive websites and applications for mobile, tablet, and desktop devices. It utilizes jQuery and jQuery UI features to provide APIs for mobile web applications and includes comprehensive documentation aimed at beginners to build expertise. The framework is open-source, cross-platform, and supports HTML5 and CSS3, allowing for easy application development with a focus on efficient page loading and device compatibility.

Download to read offline
jQuery Mobile i AbouttheTutorial JQuery Mobile is a user interface framework, built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses features of both jQuery and jQueryUI to provide API features for mobile web applications. This tutorial will teach you the basics of jQuery Mobile framework. We will also discuss some detailed concepts related to jQuery Mobile. Audience This tutorial has been prepared for beginners to help them understand basic jQuery Mobile framework. After completing this tutorial, you will find yourself at a moderate level of expertise in jQuery Mobile framework from where you can take yourself to the next levels. Prerequisites jQuery Mobile framework is based on JavaScript programming language. Hence, if you have a basic understanding on JavaScript programming, then it will be fun to learn jQuery Mobile framework. Copyright&Disclaimer  Copyright 2017 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@tutorialspoint.com
jQuery Mobile ii TableofContents About the Tutorial....................................................................................................................................i Audience..................................................................................................................................................i Prerequisites............................................................................................................................................i Copyright & Disclaimer.............................................................................................................................i Table of Contents....................................................................................................................................ii 1. JQUERY MOBILE ─ OVERVIEW .............................................................................................1 Why Use jQuery Mobile? ........................................................................................................................1 Features of jQuery Mobile ......................................................................................................................1 Advantages of jQuery Mobile..................................................................................................................2 Disadvantages of jQuery Mobile .............................................................................................................2 2. JQUERY MOBILE ─ SETUP.....................................................................................................3 Download jQuery Mobile ........................................................................................................................3 Download jQuery Library from CDNs.....................................................................................................11 3. JQUERY MOBILE ─ PAGES ..................................................................................................14 Single Page............................................................................................................................................14 Multi-Page Template.............................................................................................................................17 Dialogs Page..........................................................................................................................................19 Basic Dialogs .........................................................................................................................................20 Transitions Dialogs................................................................................................................................22 Closing Dialogs ......................................................................................................................................24 Chaining Dialogs....................................................................................................................................27 Styling & Theming Dialogs.....................................................................................................................30 Dialog Width and Margins.....................................................................................................................33 Prefetching Pages..................................................................................................................................34
jQuery Mobile iii 4. JQUERY MOBILE ─ ICONS...................................................................................................38 Icon Set .................................................................................................................................................38 Icon Positioning.....................................................................................................................................40 Icon Only...............................................................................................................................................41 Icon Shadow..........................................................................................................................................43 Removing Icon Circle.............................................................................................................................44 Black and White Icon Sets .....................................................................................................................46 Combining alt and nodisc ......................................................................................................................47 5. JQUERY MOBILE ─ TRANSITIONS........................................................................................50 Fade Page Transition.............................................................................................................................51 Fade Dialog Transition...........................................................................................................................53 Flip Page Transition...............................................................................................................................55 Flip Dialog Transition.............................................................................................................................57 Page Popup Transition ..........................................................................................................................58 Dialog Popup Transition........................................................................................................................60 Page Flow Transition.............................................................................................................................62 Dialog Flow Transition...........................................................................................................................64 Page Slide Transition.............................................................................................................................66 Dialog Slide Transition...........................................................................................................................68 Page Slidefade Transition......................................................................................................................70 Dialog Slidefade Transition....................................................................................................................72 Page Slideup Transition.........................................................................................................................74 Dialog Slideup Transition.......................................................................................................................76 Page Slidedown Transition ....................................................................................................................78 Dialog Slidedown Transition..................................................................................................................80 Page Turn Transition .............................................................................................................................82
jQuery Mobile iv Dialog Turn Transition...........................................................................................................................84 Page None Transition ............................................................................................................................86 Dialog None Transition..........................................................................................................................88 6. JQUERY MOBILE ─ LAYOUTS ..............................................................................................92 Grid Layouts..........................................................................................................................................92 Basic Grid Layouts .................................................................................................................................94 Two-column Grids.................................................................................................................................95 Three-column Grids...............................................................................................................................97 Four-column Grids.................................................................................................................................98 Five-column Grids ...............................................................................................................................100 Multiple Row Grid...............................................................................................................................102 Grid Solo Class.....................................................................................................................................104 Responsive Grids.................................................................................................................................105 Breakpoint Preset ...............................................................................................................................106 Buttons in Grids ..................................................................................................................................109 Basic Buttons in Grids..........................................................................................................................109 Mini-sized Buttons in Grids .................................................................................................................111 Icon Only, Inline Centered Buttons in Grids.........................................................................................113 Responsive Buttons in Grids................................................................................................................115 Alignment Buttons in Grids .................................................................................................................117 Custom Responsive Grid .....................................................................................................................119 7. JQUERY MOBILE ─ WIDGETS............................................................................................122 Buttons ...............................................................................................................................................125 Basic Buttons ......................................................................................................................................126 Rounded Buttons ................................................................................................................................127
jQuery Mobile v Grouped Buttons.................................................................................................................................129 Shadow Buttons..................................................................................................................................131 Inline Buttons......................................................................................................................................132 Mini Button.........................................................................................................................................135 Back Button.........................................................................................................................................136 Icon Position .......................................................................................................................................138 Disabled Button ..................................................................................................................................139 Checkbox Widget ................................................................................................................................141 Checkbox Basic markup.......................................................................................................................143 Checkbox Mini Size .............................................................................................................................144 Checkbox Vertical Group.....................................................................................................................145 Checkbox Horizontal Group.................................................................................................................147 Checkbox Icon Position .......................................................................................................................148 Checkbox Theme.................................................................................................................................150 Checkbox Disabled ..............................................................................................................................151 Checkbox Enhanced ............................................................................................................................153 Radio Widget ......................................................................................................................................154 Basic Radio Widget..............................................................................................................................156 Basic Radio Mini Size Widget...............................................................................................................158 Radio Vertical Group Widget...............................................................................................................159 Radio Horizontal Group Widget ..........................................................................................................161 Radio Icon Position Widget .................................................................................................................162 Radio Widget Theme...........................................................................................................................164 Radio Disabled Widget........................................................................................................................165 Radio Enhanced Widget ......................................................................................................................167 Datapicker Widget ..............................................................................................................................168
jQuery Mobile vi Collapsible Widget ..............................................................................................................................171 Collapsible...........................................................................................................................................172 Basic Collapsible..................................................................................................................................173 Collapsible Theme...............................................................................................................................174 Collapsible Expanded ..........................................................................................................................176 Mini Sized Collapsible..........................................................................................................................177 Collapsible Icons..................................................................................................................................178 Collapsible Icons Positioning ...............................................................................................................180 Collapsible Legend ..............................................................................................................................181 Non-inset Collapsible ..........................................................................................................................183 Collapsible Set.....................................................................................................................................184 Collapsible Pre-rendered Markup........................................................................................................186 Dynamic Collapsible ............................................................................................................................187 Collapsible Set.....................................................................................................................................189 Collapsible Markup .............................................................................................................................191 Collapsible Inset vs. Full Width............................................................................................................192 jQuery Mobile - Listview .....................................................................................................................192 Listview Unordered Widget.................................................................................................................194 Listview Ordered.................................................................................................................................195 Listview Linked....................................................................................................................................197 Listview Inset ......................................................................................................................................198 Listview Filter......................................................................................................................................200 Listview Filter Reveal ..........................................................................................................................201 Listview Dividers .................................................................................................................................202 Listview Autodividers..........................................................................................................................204 Listview Count Bubbles .......................................................................................................................205
jQuery Mobile vii Listview Standard Icons.......................................................................................................................207 Listview Icons: 16x16...........................................................................................................................208 Listview Thumbnails............................................................................................................................211 Listview Split buttons..........................................................................................................................213 Listview Formatted Content................................................................................................................215 Listview Theme ...................................................................................................................................218 Listview Forms ....................................................................................................................................220 Listview Collapsible.............................................................................................................................223 Grouped Collapsible With Listviews ....................................................................................................224 Full Width Collapsible Listview............................................................................................................229 Mini Collapsible Set.............................................................................................................................236 Collapsible Set Icon .............................................................................................................................237 Collapsible Set Icon Positioning...........................................................................................................239 Collapsible Set Without Rounded Corners...........................................................................................241 Collapsible Set Theme .........................................................................................................................243 Nested Collapsible...............................................................................................................................245 jQuery Mobile ─ Controlgroup Widget ................................................................................................246 Controlgroup Vertical Widget..............................................................................................................247 Controlgroup Horizontal Widget .........................................................................................................249 Controlgroup Minisized Widget...........................................................................................................250 Controlgroup Radio Button .................................................................................................................252 Controlgroup Checkbox.......................................................................................................................255 Controlgroup Selects...........................................................................................................................258 Controlgroup Textinputs .....................................................................................................................261 Controlgroup Pre-Rendered Markup...................................................................................................262 Fliterable Widget.................................................................................................................................263
jQuery Mobile viii Filterable Basics ..................................................................................................................................265 Table Filter ..........................................................................................................................................267 Controlgroup Filter..............................................................................................................................270 Filter Collapsible Set............................................................................................................................271 Filter Collapsible Set & Collapsible Children ........................................................................................274 Filter Anything ....................................................................................................................................276 Filter Styling ........................................................................................................................................278 Filter Reveal ........................................................................................................................................279 Filter Custom Callback.........................................................................................................................281 Filterable Pre-rendering ......................................................................................................................282 Flip Switch Widget ..............................................................................................................................284 Listview Widget...................................................................................................................................288 Listview...............................................................................................................................................290 Listview Unordered Widget.................................................................................................................295 Listview Ordered.................................................................................................................................296 Listview Linked....................................................................................................................................297 Listview Inset ......................................................................................................................................299 Listview Filter......................................................................................................................................300 Listview Filter Reveal ..........................................................................................................................302 Listview Dividers .................................................................................................................................303 Listview Autodividers..........................................................................................................................304 Listview Count bubbles .......................................................................................................................306 Listview Standard Icons.......................................................................................................................307 Listview Icons: 16x16...........................................................................................................................309 Listview Thumbnails............................................................................................................................310 Listview Split Buttons..........................................................................................................................313
jQuery Mobile ix Listview Formatted Content................................................................................................................316 Listview Theme ...................................................................................................................................318 Listview Forms ....................................................................................................................................320 Listview Collapsible.............................................................................................................................323 Grouped Collapsible With Listviews ....................................................................................................324 Full Width Collapsible Listview............................................................................................................329 Listview Autocomplete........................................................................................................................333 Listview Remote Autocomplete ..........................................................................................................334 Listview Local Data..............................................................................................................................336 Listview Providing Richer Search Content ...........................................................................................339 Listview Remote Autocomplete ..........................................................................................................341 Listview Autodivider Linkbar...............................................................................................................344 Listview Autodivider Selector..............................................................................................................347 Nested Listviews .................................................................................................................................349 Listview Collapsible Item Flat ..............................................................................................................353 Listview Collapsible Item Indented......................................................................................................358 Listview Responsive Grid.....................................................................................................................362 Loader Widget.....................................................................................................................................368 Standard Loader Widget .....................................................................................................................368 Custom HTML Widget .........................................................................................................................370 Theme Widget.....................................................................................................................................372 Navbar Widget....................................................................................................................................373 Navbar Basics......................................................................................................................................375 Navbar Multi-row................................................................................................................................378 Navbars in Headers .............................................................................................................................380 Navbars in Footers ..............................................................................................................................381
jQuery Mobile x Navbars Persistent ..............................................................................................................................382 Navbars Icons......................................................................................................................................386 Navbars Icons Position ........................................................................................................................387 Navbars 3rd Party Icon Sets.................................................................................................................389 Navbars Themes..................................................................................................................................391 Navbars with Button Elements............................................................................................................393 Panels Widget .....................................................................................................................................395 Panels .................................................................................................................................................396 Closing Panel.......................................................................................................................................399 External Panel .....................................................................................................................................401 Fixed Panel Positioning .......................................................................................................................403 Panel Responsive ................................................................................................................................405 Panel Styling........................................................................................................................................408 Panel Swipe.........................................................................................................................................410 Internal and External Panels................................................................................................................412 Popup Widget .....................................................................................................................................414 Basic Popup.........................................................................................................................................415 Basics of Popup ...................................................................................................................................418 Popup Tooltip......................................................................................................................................419 Closing Popups....................................................................................................................................421 Photo Lightbox....................................................................................................................................423 Popup Menu .......................................................................................................................................426 Popup Form ........................................................................................................................................427 Popup Dialog.......................................................................................................................................429 Popup Padding....................................................................................................................................431 Popup Position....................................................................................................................................432
jQuery Mobile xi Popup Transitions ...............................................................................................................................434 Popup Theme......................................................................................................................................436 Popup Arrow.......................................................................................................................................438 Pre-rendered Popup Markup ..............................................................................................................440 Popup Alignment ................................................................................................................................442 Dynamic Popup...................................................................................................................................444 iframes in Popup.................................................................................................................................447 iframe Video .......................................................................................................................................448 Map Popup .........................................................................................................................................451 Scaling Images.....................................................................................................................................454 Popup on Multiple Pages ....................................................................................................................456 Range Slider Widget............................................................................................................................459 Basic Rangeslider ................................................................................................................................461 Rangeslider Step Attribute ..................................................................................................................463 Rangeslider No Highlight.....................................................................................................................464 Rangeslider Theme..............................................................................................................................465 Rangeslider Mini .................................................................................................................................466 Rangeslider Disabled...........................................................................................................................468 Rangeslider Label Hidden....................................................................................................................469 Rangeslider Fieldcontain .....................................................................................................................470 Rangeslider Fieldcontain Mini .............................................................................................................472 Table Widget.......................................................................................................................................473 Column Toggle ....................................................................................................................................474 Column Toggle Heading Groups ..........................................................................................................479 Column Toggle Customization.............................................................................................................484 Table Reflow .......................................................................................................................................487
jQuery Mobile xii Table Reflow Heading Groups .............................................................................................................491 Table Reflow Stripes and Strokes ........................................................................................................494 Table Reflow Custom Styles ................................................................................................................497 Tabs Widget ........................................................................................................................................501 Use Navbar for Tabs............................................................................................................................502 Tabbed Page Content..........................................................................................................................504 Textinput Widget ................................................................................................................................506 Textinput Text and Textarea ...............................................................................................................509 Textinput Search .................................................................................................................................510 Textinput Number...............................................................................................................................512 Textinput Date, Month, and Week......................................................................................................513 Textinput Time and Color....................................................................................................................515 Textinput Telephone and Email...........................................................................................................517 Textinput URL and Password...............................................................................................................518 Textinput Datetime.............................................................................................................................520 Textinput File ......................................................................................................................................521 Textinput Mini ....................................................................................................................................523 Textinput Placeholder .........................................................................................................................524 Textinput Value/Text ..........................................................................................................................525 Textinput Label Hidden .......................................................................................................................527 Textinput Disabled ..............................................................................................................................528 Textinput Enhanced ............................................................................................................................530 Textinput Fieldcontain ........................................................................................................................531 Textinput Fieldcontain, Mini Size ........................................................................................................533 Toolbar Widget ...................................................................................................................................535 Toolbar................................................................................................................................................536
jQuery Mobile xiii Toolbar Markup ..................................................................................................................................537 Toolbar Theme....................................................................................................................................539 Buttons in Toolbars.............................................................................................................................540 Buttons in Footers...............................................................................................................................541 Adding Back Button to Header ............................................................................................................543 Navbar Widget ....................................................................................................................................545 Navbar Basics......................................................................................................................................546 Navbar Multi-row................................................................................................................................549 Navbars in Headers .............................................................................................................................551 Navbars in Footers ..............................................................................................................................552 Navbars Persistent ..............................................................................................................................554 Navbars Icons......................................................................................................................................557 Navbars Icons Position ........................................................................................................................559 Navbars 3rd Party Icon........................................................................................................................561 Navbars Themes..................................................................................................................................563 Navbars with Button Elements............................................................................................................565 Grouped Buttons.................................................................................................................................567 Adding a Padding ................................................................................................................................568 Dynamic Toolbars................................................................................................................................569 External Toolbars ................................................................................................................................571 Fixed Position Toolbars .......................................................................................................................573 Fullscreen Position Toolbars................................................................................................................577 External Fixed Toolbars.......................................................................................................................582 Persistent Toolbars .............................................................................................................................586 Navbars Persistent ..............................................................................................................................586 Ajax Optimized Toolbars .....................................................................................................................590
jQuery Mobile xiv Form in Toolbar...................................................................................................................................592 8. JQUERY MOBILE ─ EVENTS...............................................................................................598 Mobile Events .....................................................................................................................................598 Touch Events.......................................................................................................................................600 Touch Tap Event..................................................................................................................................601 Touch Taphold Event...........................................................................................................................603 Touch Swipe Event ..............................................................................................................................604 Touch Swipeleft Event.........................................................................................................................606 Touch Swiperight Event.......................................................................................................................607 Scroll Events........................................................................................................................................609 Scrollstart Event..................................................................................................................................609 Scrollstop Event ..................................................................................................................................613 Orientation Event................................................................................................................................616 Page Events.........................................................................................................................................618 Page Initialization Events ....................................................................................................................619 Page Load Events ................................................................................................................................620 Page Transition Events ........................................................................................................................622 9. JQUERY MOBILE ─ FORMS...............................................................................................626 Form Basic...........................................................................................................................................626 Form Structure....................................................................................................................................628 Form Buttons ......................................................................................................................................631 jQuery Mobile ─ Icon Set.....................................................................................................................631 Form Field Container...........................................................................................................................634 Form Inputs.........................................................................................................................................636 Form Select .........................................................................................................................................638
jQuery Mobile xv Form Select Menus..............................................................................................................................639 Form Custom Select Menus.................................................................................................................641 Form Multiple Selection......................................................................................................................642 Form Slider..........................................................................................................................................644 Form Slider Controls............................................................................................................................644 Form Flip Toggle Switch ......................................................................................................................646 Refreshing and Auto Initialization of Form Elements...........................................................................648 10. JQUERY MOBILE ─ THEMES .............................................................................................650 Themes Types .....................................................................................................................................651 Styling & Theming Dialogs...................................................................................................................653 Theming Buttons, Icons and Popups ...................................................................................................656 Buttons in Footer ................................................................................................................................658 Navbars Themes..................................................................................................................................660 Theming Panels...................................................................................................................................662 Theming Collapsible Button and Split Buttons.....................................................................................664 Theming Lists and Collapsible Lists......................................................................................................667 Collapsible Forms................................................................................................................................670 11. JQUERY MOBILE ─ CSS CLASSES.......................................................................................672 Global Classes .....................................................................................................................................672 Button Classes.....................................................................................................................................672 Icon Classes.........................................................................................................................................674 Theme Classes.....................................................................................................................................677 Grid Classes.........................................................................................................................................678
jQuery Mobile xvi 12. JQUERY MOBILE ─ DATA ATTRIBUTES..............................................................................679 Button.................................................................................................................................................679 Checkbox.............................................................................................................................................680 Collapsible...........................................................................................................................................680 Collapsible Set.....................................................................................................................................682 Controlgroup.......................................................................................................................................683 Dialog..................................................................................................................................................683 Enhancement......................................................................................................................................684 Fixed Toolbar ......................................................................................................................................685 Flip Toggle Switch................................................................................................................................686 Footer .................................................................................................................................................686 Header ................................................................................................................................................687 Inputs..................................................................................................................................................688 Link .....................................................................................................................................................688 List ......................................................................................................................................................689 List Item ..............................................................................................................................................690 Navbar ................................................................................................................................................691 Page ....................................................................................................................................................691 Popup..................................................................................................................................................692 Radio Button.......................................................................................................................................693 Select ..................................................................................................................................................693 Slider...................................................................................................................................................694
jQuery Mobile 17 JQuery Mobile is a user interface framework, which is built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses the features of both jQuery and jQuery UI to provide API features for mobile web applications. It was developed by the jQuery project team in the year 2010 and written in JavaScript. WhyUsejQueryMobile?  It creates web applications that it will work the same way on the mobile, tablet, and desktop devices.  It is compatible with other frameworks such as PhoneGap, Whitelight, etc.  It provides a set of touch-friendly form inputs and UI widgets.  The progressive enhancement brings a unique functionality to all mobile, tablet, and desktop platforms and adds efficient page loads and wider device support. FeaturesofjQueryMobile  It is built on jQuery Core and "write less, do more" UI framework.  It is an open source framework, and cross-platform as well as cross-browser compatible.  It is written in JavaScript and uses features of both jQuery and jQuery UI for building mobile-friendly sites.  It integrates HTML5, CCS3, jQuery and jQuery UI into one framework for creating pages with minimal scripting.  It includes Ajax navigation system that uses animated page transitions. AdvantagesofjQueryMobile  It is easy to learn and develop applications if you have knowledge of HTML5, CSS3 features.  It is cross-platform and cross-browser compatible so you don't have to worry about writing different code for each device resolution. 1. JQUERY MOBILE ─ OVERVIEW
jQuery Mobile 18  You can create the custom theme using ThemeRoller without writing the line of code. It supports all HTML5 browsers.  It uses HTML5 along with JavaScript for easy development of web applications.  It is built in a way that allows the same code to automatically scale from the mobile screen to desktop screen. DisadvantagesofjQueryMobile  There are limited options for CSS themes, so sites can look similar which are built by these themes.  Applications which are developed using jQuery Mobile are slower on mobiles.  It becomes more time consuming when you combine jQuery mobile with other mobile frameworks.  Difficult to provide complete customized visual design.  All the features in a device cannot be accessed by JavaScript in a browser.
jQuery Mobile 19 In this chapter, we will discuss how to install and set up jQuery Mobile. DownloadjQueryMobile When you open the link jquerymobile.com/, you will see there are two options to download jQuery mobile library.  Custom Download - Click this button to download a customized version of library.  Latest Stable - Click this button to get the stable and latest version of jQuery mobile library. Custom Download with Download Builder Using Download Builder, you can create a custom build including only the portions of the library that you need. When you download this new customized version of jQuery Mobile, you will see the following screen. 2. JQUERY MOBILE ─ SETUP
jQuery Mobile 20
jQuery Mobile 21
jQuery Mobile 22
jQuery Mobile 23
jQuery Mobile 24
jQuery Mobile 25 You can select the libraries according to your need and click the Build My Download button. Stable Download Click the Stable button, which leads directly to a ZIP file containing the CSS and JQuery files, for the latest version of jQuery mobile library. Extract the ZIP file contents to a jQuery mobile directory. This version contains all files including all dependencies, a large collection of demos, and even the library's unit test suite. This version is helpful to getting started.
jQuery Mobile 26 DownloadjQueryLibraryfromCDNs A CDN (Content Delivery Network) is a network of servers designed to serve files to the users. If you use a CDN link in your webpage, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of jQuery mobile from the same CDN, it won't have to be re-downloaded. You can include the following CDN files into the HTML document. //The jQuery Mobile CSS theme file (optional, if you are overriding the default theme) <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> //The jQuery core JavaScript file <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> //The jQuery Mobile core JavaScript file <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> We are using the CDN versions of the library throughout this tutorial. We use AMPPS (AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples. Example Following is a simple example of jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header">
jQuery Mobile 27 <h1>Header Text</h1> </div> <div data-role="main" class="ui-content"> <h2>Welcome to TutorialsPoint</h2> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html> Details of the above code are:  This code is specified inside the head element. <meta name="viewport" content="width=device-width, initial-scale=1"> o The viewport is used to specify (by the browser) to display the page zoom level and dimension. o content="width=device-width" is used to set the pixel width of the page or screen device. o initial-scale=1 sets the initial zoom level, when the page is loaded for the first time.  Include the following CDNs <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>  Content inside the <body> tag is a page displayed in the browser. <div data-role="page"> ...
jQuery Mobile 28 </div>  data-role="header" creates the header at the top of the page.  data-role="main" is used to define the content of the page.  data-role="footer" creates the footer at the bottom of the page.  class="ui-content" includes padding and margin inside the page content. Output Let's carry out the following steps to see how the above code works:  Save the above html code as simple_example.html file in your server root folder.  Open this HTML file as http://localhost/simple_example.html and the following output will be displayed.
jQuery Mobile 29 The user can interact with jQuery Mobile pages, which groups the content into logical views and page views. Page view can be animated using page transitions. Multiple pages can be created using HTML document and therefore, there is no need of requesting the content from the server. Following table demonstrates the types of pages in detail. Sr. No. Types & Description 1 Single Page A single page is created in HTML document using a standard way of writing a template. 2 Multi-Page Template Multiple pages can be included in the single HTML document, which loads together by adding multiple divs with data-role="page". 3 Dialogs Page Modal dialogs open content in an interactive overlay above the page. SinglePage Description A standard format is used to create pages many times without changing it. The following standard format is used to create a single page in the jQuery mobile. <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div> 3. JQUERY MOBILE ─ PAGES
jQuery Mobile 30 <div data-role="footer"> <h4>Page Footer</h4> </div> </div> Example The following example demonstrates the use of Single Page in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Single Page</h1> </div> <div data-role="main" class="ui-content"> <h2>Welcome to TutorialsPoint</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p> </div>
jQuery Mobile 31 <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save above html code as single_page.html file in your server root folder.  Open this HTML file as http://localhost/single_page.html and the following output will be displayed.
jQuery Mobile 32 Multi-PageTemplate Description Multiple pages can be included in the single jQuery mobile document which loads together by adding multiple divs with the attribute data-role="page". The div with data- role="page" should consist of unique id to link internally between the pages. Example Following example demonstrates the use of multi page in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p> For more information <a href="#page2">click here</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>
jQuery Mobile 33 <div data-role="page" id="page2"> <div data-role="header"> <h1>Header Text</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1">Back to previous page</a></p> </div> <div data-role="footer"> <h4>Footer Text</h4> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as multiple_page.html file in your server root folder.  Open this HTML file as http://localhost/multiple_page.html and the following output will be displayed.
jQuery Mobile 34 DialogsPage Description Modal dialogs open content in an interactive overlay above the page. Following table demonstrates the types of dialogs pages in detail. Sr. No. Types & Description 1 Basic Dialogs Include attribute data-dialog="true" to any page to display a dialog. 2 Transitions The transition plugin provides a simple transition effect. 3 Closing Dialogs The closing button can be set at the right side by adding data-close-btn="right" to the dialog container.
jQuery Mobile 35 4 Chaining Dialogs The data-rel="back" attribute is used to navigate to go back to the previous dialog. 5 Styling & theming Different styling and theming can be applied to a dialog. 6 Dialog width and margins By default, the dialog width and margin is set. BasicDialogs Description Include the attribute data-dialog="true" to any page to display a dialog. By default, the dialog box will also have a close button, if the dialog header is included. When the dialog attribute is included, then the framework adds styles to it, i.e. rounded corner, margin, etc. Example The following example demonstrates the use of basic dialogs in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header">
jQuery Mobile 36 <h2>Header</h2> </div> <div role="main" class="ui-content"> <p><a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn- inline">Open dialog</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as basic_dialogs.html file in your server root folder.  Open this HTML file as http://localhost/basic_dialogs.html and the following output will be displayed.
jQuery Mobile 37 TransitionsDialogs Description The transition plugin provides a simple transition effect. The data-transition attribute is used to apply a different transition on the dialog as per choice. Example The following example demonstrates the use of transition in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div>
jQuery Mobile 38 <div role="main" class="ui-content"> <a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data- transition="slidedown">SlideDown Dialog</a> <a href="#page3" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data- transition="flip">Flip Dialog</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="right" id="page2"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="none" id="page3"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div>
jQuery Mobile 39 </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as transition.html file in your server root folder.  Open this HTML file as http://localhost/transition.html and the following output will be displayed. ClosingDialogs Description The closing button can be set at the right side by adding data-close-btn="right" to the dialog container. By default, the close button is present on the left in the dialog box, when the attribute dialog is included. If you don't need the close button in the dialog box, then you can add data-close-btn="none" to the dialog container.
jQuery Mobile 40 Setting the Close Button Text  Through the dialog's data-attribute, the close button text can be set.  It is an important accesibility feature as the close button text can be modified for translating into different languages.  By default, it displays an icon-only button.  The text is invisible on the screen but the screen reader can read it.  The data-attribute data-close-btn-text is set to configure the text from your markup.  The property $.mobile.dialog.prototype.options.closeBtnText can be set to a particular string and you can configure for all dialogs by binding to the mobileinit event. Example The following example demonstrates the use of closing dialogs in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Close Button</a> <a href="#page3" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">No Close Button</a>
jQuery Mobile 41 </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="right" id="page2"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="none" id="page3"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> </body> </html> Output
jQuery Mobile 42 Let's carry out the following steps to see how the above code works:  Save the above html code as closing_dialogs.html file in your server root folder.  Open this HTML file as http://localhost/closing_dialogs.html and the following output will be displayed. ChainingDialogs Description The data-rel="back" attribute is used to navigate to go back to the previous dialog. When one dialog is chained to the second dialog box and the second dialog is chained to the third, then using the data-rel="back" on the third dialog you can navigate to the second dialog box. Example Following example demonstrates the use of chaining dialogs in jQuery Mobile. <!DOCTYPE html> <html>
jQuery Mobile 43 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Open Dialog</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h1>First Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a href="#page3" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Open Second Dialog</a> </div> </div>
jQuery Mobile 44 <div data-role="page" data-dialog="true" data-close-btn="none" id="page3"> <div data-role="header"> <h1>Second Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a href="#page1" class="ui-btn ui-corner-all" data-rel="back">Back to First Dialog </a> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as chaining_dialogs.html file in your server root folder.  Open this HTML file as http://localhost/chaining_dialogs.html and the following output will be displayed.
jQuery Mobile 45 Styling&ThemingDialogs Description Different styling and theming can be applied to a dialog. Following are the ways to apply themes and styles to a dialog:  Themes can be included in the dialog by adding the attribute data-theme to any containers such as header, footer, or content.  Include data-corners="false" to remove the rounded corner of the dialog as by default the corners are set as rounded.  data-overlay-theme attribute sets the overlay to any pattern letter.  Multiple button can also be used in the dialogs. The dialog can be fixed to the top by including {margin-top:0} to the class specified for the page .ui-dialog.my-dialog .ui-dialog-contain
jQuery Mobile 46 Example Following example demonstrates the use of styling and theming dialogs in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> <style> .ui-dialog.dialog-actionsheet .ui-dialog-contain { margin-top: 0; } </style> </head> <body> <div data-role="page" id="page1"> <div data-role="header" data-theme="b"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <a href="#page2" class="ui-btn ui-corner-all ui-btn-inline">Open Dialog</a> <a href="#page3" class="ui-btn ui-corner-all ui-btn-inline">Photos Dialog</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>
jQuery Mobile 47 <div data-role="page" data-dialog="true" id="page2" data-corners="false" data- overlay-theme="b"> <div data-role="header"> <h1>First Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a data-rel="back" class="ui-btn ui-corner-all ui-btn-inline">Back</a> </div> </div> <div data-role="page" class="dialog-actionsheet" data-dialog="true" id="page3"> <div role="main" class="ui-content"> <h3>Share Photos</h3> <a href="#page4" data-transition="slidedown" class="ui-btn ui-shadow ui- corner-all ui-btn-b">Email</a> <a href="#page4" data-transition="slidedown" class="ui-btn ui-shadow ui- corner-all ui-btn-b">Share on Facebook</a> <a href="#page4" data-transition="slidedown" class="ui-btn ui-shadow ui- corner-all ui-btn-b">Tweet photo</a> <a data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn- a">Cancel</a> </div> </div> <div data-role="page" class="dialog-actionsheet" data-dialog="true" id="page4"> <div role="main" class="ui-content"> <h3>Photos uploaded successfully</h3> <a href="#page1" class="ui-btn ui-shadow ui-corner-all ui-btn-a">View photo page</a> <a href="#page1" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Done</a> </div> </div> </body>
jQuery Mobile 48 </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as style_theming.html file in your server root folder.  Open this HTML file as http://localhost/style_theming.html and the following output will be displayed. DialogWidthandMargins By default, the dialog width and margin is set in the jQuery mobile. The default width of dialog is 92.5%. On the larger screens, the dialog top margin is set larger, i.e. 10% top margin but it gets collapsed on the small screen to a small margin. This style can be overriden in your stylesheet when needed. .ui-dialog-contain { width: 92.5%;
jQuery Mobile 49 max-width: 500px; margin: 10% auto 15px auto; padding: 0; position: relative; top: -15px; } Conventions, Not Requirements  The data-role attribute elements such as the header, footer, page, and content are used to provide the basic format and structure of a page.  For single page documents, the page wrapper was required for auto-initialization is set as optional.  The structural element can be excluded for a webpage with custom layout.  To manage pages, the page wrapper is injected by the framework when it is not included by the markup. Prefetching Pages Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. For more information click here. PrefetchingPages Description Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. It helps to link those points to the page. After the primary page is loaded, the target page is loaded in the background and the pagecreate event is triggered. Using the pagecontainer widget's load() method, we can prefetch a page alternatively. $( ":mobile-pagecontainer" ).pagecontainer( "load", pageUrl, { showLoadMsg: false } ); Example The following example demonstrates the use of Prefetching Pages in the jQuery Mobile. <!DOCTYPE html> <html>
jQuery Mobile 50 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <h2>Welcome to Tutorialspoint!!! </h2> <a href="#page2" data-prefetch="true" class="ui-btn ui-btn-inline">Next Page</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1" class="ui-btn">Back to Previous Page</a> </div> <div data-role="footer">
jQuery Mobile 51 <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as prefetching_page.html file in your server root folder.  Open this HTML file as http://localhost/prefetching_page.html and the following output will be displayed. DOM Cache When the browser memory gets full in DOM, then it slow downs the mobile browser or might crash due to loading of multiple pages. There is a simple method to keep the DOM tidy:  When a page is loaded via ajax, then it indicates to remove the page from DOM when you redirect to another page.  The previous page which you have visited can be retrived from the cache when you revisit it.
jQuery Mobile 52  Instead of removing the pages, you can tell jQuery mobile to keep it in DOM by using the following line: $.mobile.page.prototype.options.domCache = true;  Set the domCache option as true on the page plugin to keep all the pages in the DOM, which was visited previously. pageContainerElement.page({ domCache: true });
jQuery Mobile 53 jQuery Mobile provides a set of built-in icons, which can be used with buttons, listview buttons which will make the buttons more attractive. Following table lists down some of the icons used in the jQuery Mobile framework. Sr. No. Icon Area & Description 1 Icon Set It sets the icon in the button. 2 Positioning Icons It specifies the position of the icon in the button. 3 Icon-only It displays only an icon in the button. 4 Icon shadow It adds an icon shadow in your button. 5 Removing Circle It removes the grey circle around the icon. 6 Black and White Icons It changes the color of icons to black or white. 7 Combining alt and nodisc It combines the alt and nodisc classes to the icon. IconSet Description You can set the icon in the button using ui-icon class and ui-btn-icon-pos_name class for specifying the position for icon. 4. JQUERY MOBILE ─ ICONS
jQuery Mobile 54 Example Following example describes the use of icon setting in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn ui-btn-icon-left ui-icon-grid">Grid Button</a> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-r">arrow-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-u">arrow-u</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-audio">audio</button> <button class="ui-btn ui-btn-icon-left ui-icon-calendar">calendar</button> <button class="ui-btn ui-btn-icon-left ui-icon-camera">camera</button> <button class="ui-btn ui-btn-icon-left ui-icon-carat-l">carat-l</button> <button class="ui-btn ui-btn-icon-left ui-icon-carat-r">carat-r</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon- check">check</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon- clock">clock</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon- eye">eye</button> </div>
jQuery Mobile 55 </body> </html> Output Let's carry out the following steps to see how the above code works:  Save above html code as icons_icon_set.html file in your server root folder.  Open this HTML file as http://localhost/icons_icon_set.html and the following output will be displayed. IconPositioning Description You can determine the position of the icon (top, right, left, bottom in the button) using the ui- btn-icon-[value] class. Example Following example describes the use of icon positioning in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Icon Setting</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css">
jQuery Mobile 56 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-icon-home ui-btn-icon-left">Left</a> <a href="" class="ui-btn ui-icon-home ui-btn-icon-right">Right</a> <a href="" class="ui-btn ui-icon-home ui-btn-icon-top">Top</a> <a href="" class="ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</a> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_positioning.html file in your server root folder.  Open this HTML file as http://localhost/icons_positioning.html and the following output will be displayed. IconOnly Description You can display only an icon in the button using the ui-btn-icon-notext class. Example
jQuery Mobile 57 Following example describes the use of displaying only icon in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Displaying only Icon</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-icon-home ui-btn-icon-notext">Delete</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_only_icon.html file in your server root folder.  Open this HTML file as http://localhost/icons_only_icon.html and the following output will be displayed.
jQuery Mobile 58 IconShadow Description You can add an icon shadow in your button using the ui-shadow-icon class. Example Following example describes the use of icon shadow in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Displaying Icon Shadow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-shadow-icon ui-shadow ui-corner-all ui-icon-home ui-btn-icon-notext">Delete</a>
jQuery Mobile 59 </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how above code works:  Save the above html code as icons_shadow_icon.html file in your server root folder.  Open this HTML file as http://localhost/icons_shadow_icon.html and the following output will be displayed. RemovingIconCircle Description You can remove the grey circle around the icon using the ui-nodisc-icon class. Example Following example describes the use of removing icon circle in the jQuery Mobile Framework. <!DOCTYPE html>
jQuery Mobile 60 <head> <title>Displaying Icon Shadow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn- inline ui-icon-delete ui-btn-icon-left">Without Grey Circle</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_removing_circle.html file in your server root folder.  Open this HTML file as http://localhost/icons_removing_circle.html and the following output will be displayed.
jQuery Mobile 61 BlackandWhiteIconSets Description You can change the color of an icon to black using the ui-alt-icon class. By default, all icons are white. Example Following example describes the use of changing icon color in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Black and White Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div>
jQuery Mobile 62 <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui- corner-all">White icon</a> <a href="" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui- corner-all ui-alt-icon">Black icon</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_black_white.html file in your server root folder.  Open this HTML file as http://localhost/icons_black_white.html and the following output will be displayed. Combiningaltandnodisc Description You can combine the alt(ui-alt-icon) and nodisc(ui-nodisc-icon) classes.
jQuery Mobile 63 Example Following example describes the use of combining icon alt and nodisc classes in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Alt and Nodisc Classes</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui- corner-all ui-alt-icon ui-nodisc-icon">Black icon</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_combng_alt_nodisc.html file in your server root folder.
jQuery Mobile 64  Open this HTML file as http://localhost/icons_combng_alt_nodisc.html and the following output will be displayed.
jQuery Mobile 65 It allows to change the property values, which occurs over a specified duration and alters the behavior of an element from one state to another state, by applying different styles for each state. Following table lists down some of the page transitions used in the jQuery Mobile framework. Sr. No. Transition & Description For Pages For Dialogs 1 fade You can make elements fade in and out of visibility. Fade Page Fade Dialog 2 flip Flip the elements from back to front to the next page. Flip Page Flip Dialog 3 pop You can create a popup window. Pop Page Pop Dialog 4 flow Display the next page by keeping the current page away. Flow Page Flow Dialog 5 slide You can slide the page from the right to the left. Slide Page Slide Dialog 6 slidefade Slides the page from the right to the left and fades in the next page. Slidefade Page Slidefade Dialog 7 slideup Slides the page from bottom to up. Slideup Page Slideup Dialog 8 slidedown Slides the page from top to bottom. Slidedown Page Slidedown Dialog 9 turn You can turn to the next page. Turn Page Turn Dialog 10 none You cannot use any transition effect by using this attribute. None Page None Dialog 5. JQUERY MOBILE ─ TRANSITIONS
jQuery Mobile 66 FadePageTransition Description You can make the elements fade in and out of visibility for the pages using the data- transition="fade" attribute. Example Following example describes the use of fading page in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="fade_page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to go page two.</p> <a href="#fade_page2" data-transition="fade">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" id="fade_page2"> <div data-role="header"> <h2>Header</h2>
jQuery Mobile 67 </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#fade_page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as page_fade.html file in your server root folder.  Open this HTML file as http://localhost/page_fade.html and the following output will be displayed.
jQuery Mobile 68 FadeDialogTransition Description You can make the elements fade in and out of visibility for the dialog box using the data- transition="fade" attribute. Example Following example describes the use of fading dialog box in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body>
jQuery Mobile 69 <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to see dialog box.</p> <a href="#page2" data-transition="fade">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>This is Dialog box</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as dialog_fade.html file in your server root folder.
jQuery Mobile 70  Open this HTML file as http://localhost/dialog_fade.html and the following output will be displayed. FlipPageTransition Description You can flip the elements from the back to the front to the next page using the data- transition="flip" attribute. Example Following example describes the use of page flip in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
jQuery Mobile 71 </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to flip the page.</p> <a href="#page2" data-transition="flip">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:
jQuery Mobile 72  Save the above html code as page_flip.html file in your server root folder.  Open this HTML file as http://localhost/page_flip.html and the following output will be displayed. FlipDialogTransition Description You can flip the elements from the back to the front to the next page using the dialog box by setting the data-transition="flip" attribute. Example Following example describes the use of dialog flip in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery Mobile 73 <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to flip the page.</p> <a href="#page2" data-transition="flip">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output
jQuery Mobile 74 Let's carry out the following steps to see how the above code works:  Save the above html code as dialog_flip.html file in your server root folder.  Open this HTML file as http://localhost/dialog_flip.html and the following output will be displayed. PagePopupTransition Description Create a popup window for the page using the data-transition="pop" attribute. Example Following example describes the use of page popup in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to open the popup window.</p> <a href="#page2" data-transition="pop">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div>
jQuery Mobile 75 <div data-role="page" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as page_popup.html file in your server root folder.  Open this HTML file as http://localhost/page_popup.html and the following output will be displayed.
jQuery Mobile 76 DialogPopupTransition Description Create a popup window for the page using the dialog box by setting the data- transition="pop" attribute. Example Following example describes the use of dialog popup in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1">
jQuery Mobile 77 <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to open the popup window using dialog box.</p> <a href="#page2" data-transition="pop">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as dialog_popup.html file in your server root folder.
jQuery Mobile 78  Open this HTML file as http://localhost/dialog_popup.html and the following output will be displayed. PageFlowTransition Description You can display the next page by keeping the current page away by using the data- transition="flow" attribute. Example Following example describes the use of page flow in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
jQuery Mobile 79 </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to throw the current page away and comes in with the next page.</p> <a href="#page2" data-transition="flow">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:
jQuery Mobile 80  Save the above html code as page_flow.html file in your server root folder.  Open this HTML file as http://localhost/page_flow.html and the following output will be displayed. DialogFlowTransition Description You can display the next page by keeping the current page away using the dialog box by setting the data-transition="flow" attribute. Example Following example describes the use of dialog flow in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery Mobile 81 <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2>
jQuery Mobile 82 End of ebook preview If you liked what you saw… Buy it from our store @ https://store.tutorialspoint.com

More Related Content

PDF
Javascript tutorial
byDoeun KOCH
 
PDF
Jqueryui tutorial
byHarikaReddy115
 
PDF
Javascript tutorial
byHarikaReddy115
 
PDF
Asp.net mvc tutorial
byHarikaReddy115
 
PDF
Eclipse tutorial
byHarikaReddy115
 
PDF
Jsf tutorial
byHarikaReddy115
 
PDF
Javafx tutorial
byHarikaReddy115
 
PDF
Design pattern tutorial
byHarikaReddy115
 
Javascript tutorial
byDoeun KOCH
 
Jqueryui tutorial
byHarikaReddy115
 
Javascript tutorial
byHarikaReddy115
 
Asp.net mvc tutorial
byHarikaReddy115
 
Eclipse tutorial
byHarikaReddy115
 
Jsf tutorial
byHarikaReddy115
 
Javafx tutorial
byHarikaReddy115
 
Design pattern tutorial
byHarikaReddy115
 

What's hot

PDF
Spring tutorial
byPhuong Le
 
PDF
Software Engineering Overview
byLGS, GBHS&IC, University Of South-Asia, TARA-Technologies
 
PDF
Ibatis tutorial
byHarikaReddy115
 
PDF
Asp.net
byrajkumar8081
 
PDF
Asp.net tutorial
byHarikaReddy115
 
PDF
Objective c tutorial
byHarikaReddy115
 
PDF
Vb.net tutorial
byYogitaVats2
 
PDF
Nodejs tutorial
byHarikaReddy115
 
PDF
Cprogramming tutorial
byHarikaReddy115
 
PDF
Cprogramming tutorial
by1333sample
 
PDF
Cprogramming tutorial
byعمر عبد
 
PDF
Learn c programming
byAshoka Vanjare
 
Spring tutorial
byPhuong Le
 
Software Engineering Overview
byLGS, GBHS&IC, University Of South-Asia, TARA-Technologies
 
Ibatis tutorial
byHarikaReddy115
 
Asp.net
byrajkumar8081
 
Asp.net tutorial
byHarikaReddy115
 
Objective c tutorial
byHarikaReddy115
 
Vb.net tutorial
byYogitaVats2
 
Nodejs tutorial
byHarikaReddy115
 
Cprogramming tutorial
byHarikaReddy115
 
Cprogramming tutorial
by1333sample
 
Cprogramming tutorial
byعمر عبد
 
Learn c programming
byAshoka Vanjare
 

Similar to Jquery mobile tutorial

PPTX
J query mobile tech talk
bywoliverj
 
PDF
JQuery mobile
byGary Yeh
 
PPT
Intro j query_mobile_mojo
byJeff Tillett
 
PPTX
Chapter3 mo
byPon Tovave
 
PPTX
Jquery mobile book review
byIslam AlZatary
 
PPTX
Jquery mobile
byPredhin Sapru
 
PPTX
jQuery Mobile
bymowd8574
 
PDF
jQuery Mobile Introduction
byJoris Graaumans
 
PDF
Start IoT with jQueryMobile - 기초1
byPark Jonggun
 
PDF
Introduction to jQuery Mobile - Web Deliver for All
byMarc Grabanski
 
PPTX
Jquery mobile
byChris Ward
 
PPT
jQuery Mobile
byDoncho Minkov
 
PDF
Real World Lessons in jQuery Mobile
byKai Koenig
 
PPT
jQuery Mobile with HTML5
bymadhurpgarg
 
PPTX
Introduction to j query mobile framework
byShreerang Patwardhan
 
PPTX
Building jQuery Mobile Web Apps
byOperation Mobile
 
PPTX
jQuery Mobile UI
byLearningTech
 
PPTX
Introduction to jQuery Mobile
byejlp12
 
PPTX
Jquery Mobile
byLogical Minds
 
PPTX
jQuery Mobile
byNaeem Junejo
 
J query mobile tech talk
bywoliverj
 
JQuery mobile
byGary Yeh
 
Intro j query_mobile_mojo
byJeff Tillett
 
Chapter3 mo
byPon Tovave
 
Jquery mobile book review
byIslam AlZatary
 
Jquery mobile
byPredhin Sapru
 
jQuery Mobile
bymowd8574
 
jQuery Mobile Introduction
byJoris Graaumans
 
Start IoT with jQueryMobile - 기초1
byPark Jonggun
 
Introduction to jQuery Mobile - Web Deliver for All
byMarc Grabanski
 
Jquery mobile
byChris Ward
 
jQuery Mobile
byDoncho Minkov
 
Real World Lessons in jQuery Mobile
byKai Koenig
 
jQuery Mobile with HTML5
bymadhurpgarg
 
Introduction to j query mobile framework
byShreerang Patwardhan
 
Building jQuery Mobile Web Apps
byOperation Mobile
 
jQuery Mobile UI
byLearningTech
 
Introduction to jQuery Mobile
byejlp12
 
Jquery Mobile
byLogical Minds
 
jQuery Mobile
byNaeem Junejo
 

More from HarikaReddy115

PDF
Dbms tutorial
byHarikaReddy115
 
PDF
Data structures algorithms_tutorial
byHarikaReddy115
 
PDF
Wireless communication tutorial
byHarikaReddy115
 
PDF
Cryptography tutorial
byHarikaReddy115
 
PDF
Cosmology tutorial
byHarikaReddy115
 
PDF
Control systems tutorial
byHarikaReddy115
 
PDF
Computer logical organization_tutorial
byHarikaReddy115
 
PDF
Computer fundamentals tutorial
byHarikaReddy115
 
PDF
Compiler design tutorial
byHarikaReddy115
 
PDF
Communication technologies tutorial
byHarikaReddy115
 
PDF
Biometrics tutorial
byHarikaReddy115
 
PDF
Behavior driven development_tutorial
byHarikaReddy115
 
PDF
Basics of computers_tutorial
byHarikaReddy115
 
PDF
Basics of computer_science_tutorial
byHarikaReddy115
 
PDF
Basic electronics tutorial
byHarikaReddy115
 
PDF
Auditing tutorial
byHarikaReddy115
 
PDF
Artificial neural network_tutorial
byHarikaReddy115
 
PDF
Artificial intelligence tutorial
byHarikaReddy115
 
PDF
Antenna theory tutorial
byHarikaReddy115
 
PDF
Analog communication tutorial
byHarikaReddy115
 
Dbms tutorial
byHarikaReddy115
 
Data structures algorithms_tutorial
byHarikaReddy115
 
Wireless communication tutorial
byHarikaReddy115
 
Cryptography tutorial
byHarikaReddy115
 
Cosmology tutorial
byHarikaReddy115
 
Control systems tutorial
byHarikaReddy115
 
Computer logical organization_tutorial
byHarikaReddy115
 
Computer fundamentals tutorial
byHarikaReddy115
 
Compiler design tutorial
byHarikaReddy115
 
Communication technologies tutorial
byHarikaReddy115
 
Biometrics tutorial
byHarikaReddy115
 
Behavior driven development_tutorial
byHarikaReddy115
 
Basics of computers_tutorial
byHarikaReddy115
 
Basics of computer_science_tutorial
byHarikaReddy115
 
Basic electronics tutorial
byHarikaReddy115
 
Auditing tutorial
byHarikaReddy115
 
Artificial neural network_tutorial
byHarikaReddy115
 
Artificial intelligence tutorial
byHarikaReddy115
 
Antenna theory tutorial
byHarikaReddy115
 
Analog communication tutorial
byHarikaReddy115
 

Recently uploaded

PDF
History of Department of AIHC and Archaeology_BHU
byBanaras Hindu University
 
PPTX
Capitol Webinar October 2025 Dr. Jha.pptx
byCapitolTechU
 
PDF
Admin Slides for Oct'25 semester - PBO - MC1.pdf
byMark Kor
 
PPTX
Basics for Conducting Bibliometric Analysis - Dr Ahsan Riaz
bySystematic Reviews Network (SRN)
 
PPTX
🧪“Blood Chemistry Tests in Pharmacy Practice: Clinical Laboratory Guide for P...
byBanny S.V
 
PDF
Unofficial Draft by Simanchala Sarab: #GNDU #B.A. B.Ed. (#ITEP) #Pre-Interns...
bySimanchala Sarab, BABed(ITEP Secondary stage) in History student at GNDU Amritsar
 
PPTX
psychoanalytic Theory.pptx, MSc. Nursing
byKomalJaiswal46
 
PDF
1.1 Historical background & development of Profession of Pharmacy.pdf
byMr. SAKHARE R. S.
 
PPTX
Exploring Entrepreneurial Qualities: A Curated Presentation for Grade 11 Busi...
bySamanthaNkoana
 
PDF
Who Owns the Narrative? Data, Disinformation, and the Missing Voice of Academia
byIsmail Fahmi
 
PDF
TUYỂN CHỌN 30 ĐỀ THI CHỌN HỌC SINH GIỎI LỚP 9 CÁC TỈNH NĂM 2024-2025 MÔN TIẾN...
byNguyen Thanh Tu Collection
 
PPTX
Hudson Vitale "AI Essentials: From Tools to Strategies: A 2025 NISO Training ...
byNational Information Standards Organization (NISO)
 
PPTX
THERAPEUTIC ENVIORNMENT.............pptx
byAneetaSharma15
 
PPTX
Capital Budgeting - Risk Analysis Using Sensitivity Analysis
bySundar B N
 
PDF
Total Quality Management : A presentation by a third year student.
byMbalenhle Ndlovu
 
PPTX
Nerve lecture 2:strength-duration curve and an introduction to action potential
bydina merzeban
 
PDF
BUSINESS ETHICS – UNIT I: Introduction to Business Ethics
byD NANEE
 
PPTX
Safety Needs and Prevention of environmental hazards.pptx
byAneetaSharma15
 
PPTX
Agriculture Lesson Note for Grade 11 Chapter 3 & 4.pptx
byNajibMuhidin
 
PPTX
Project Dashboard in Odoo 18 Project
byCeline George
 
History of Department of AIHC and Archaeology_BHU
byBanaras Hindu University
 
Capitol Webinar October 2025 Dr. Jha.pptx
byCapitolTechU
 
Admin Slides for Oct'25 semester - PBO - MC1.pdf
byMark Kor
 
Basics for Conducting Bibliometric Analysis - Dr Ahsan Riaz
bySystematic Reviews Network (SRN)
 
🧪“Blood Chemistry Tests in Pharmacy Practice: Clinical Laboratory Guide for P...
byBanny S.V
 
Unofficial Draft by Simanchala Sarab: #GNDU #B.A. B.Ed. (#ITEP) #Pre-Interns...
bySimanchala Sarab, BABed(ITEP Secondary stage) in History student at GNDU Amritsar
 
psychoanalytic Theory.pptx, MSc. Nursing
byKomalJaiswal46
 
1.1 Historical background & development of Profession of Pharmacy.pdf
byMr. SAKHARE R. S.
 
Exploring Entrepreneurial Qualities: A Curated Presentation for Grade 11 Busi...
bySamanthaNkoana
 
Who Owns the Narrative? Data, Disinformation, and the Missing Voice of Academia
byIsmail Fahmi
 
TUYỂN CHỌN 30 ĐỀ THI CHỌN HỌC SINH GIỎI LỚP 9 CÁC TỈNH NĂM 2024-2025 MÔN TIẾN...
byNguyen Thanh Tu Collection
 
Hudson Vitale "AI Essentials: From Tools to Strategies: A 2025 NISO Training ...
byNational Information Standards Organization (NISO)
 
THERAPEUTIC ENVIORNMENT.............pptx
byAneetaSharma15
 
Capital Budgeting - Risk Analysis Using Sensitivity Analysis
bySundar B N
 
Total Quality Management : A presentation by a third year student.
byMbalenhle Ndlovu
 
Nerve lecture 2:strength-duration curve and an introduction to action potential
bydina merzeban
 
BUSINESS ETHICS – UNIT I: Introduction to Business Ethics
byD NANEE
 
Safety Needs and Prevention of environmental hazards.pptx
byAneetaSharma15
 
Agriculture Lesson Note for Grade 11 Chapter 3 & 4.pptx
byNajibMuhidin
 
Project Dashboard in Odoo 18 Project
byCeline George
 

Jquery mobile tutorial

  • 2.
    jQuery Mobile i AbouttheTutorial JQuery Mobileis a user interface framework, built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses features of both jQuery and jQueryUI to provide API features for mobile web applications. This tutorial will teach you the basics of jQuery Mobile framework. We will also discuss some detailed concepts related to jQuery Mobile. Audience This tutorial has been prepared for beginners to help them understand basic jQuery Mobile framework. After completing this tutorial, you will find yourself at a moderate level of expertise in jQuery Mobile framework from where you can take yourself to the next levels. Prerequisites jQuery Mobile framework is based on JavaScript programming language. Hence, if you have a basic understanding on JavaScript programming, then it will be fun to learn jQuery Mobile framework. Copyright&Disclaimer  Copyright 2017 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@tutorialspoint.com
  • 3.
    jQuery Mobile ii TableofContents About theTutorial....................................................................................................................................i Audience..................................................................................................................................................i Prerequisites............................................................................................................................................i Copyright & Disclaimer.............................................................................................................................i Table of Contents....................................................................................................................................ii 1. JQUERY MOBILE ─ OVERVIEW .............................................................................................1 Why Use jQuery Mobile? ........................................................................................................................1 Features of jQuery Mobile ......................................................................................................................1 Advantages of jQuery Mobile..................................................................................................................2 Disadvantages of jQuery Mobile .............................................................................................................2 2. JQUERY MOBILE ─ SETUP.....................................................................................................3 Download jQuery Mobile ........................................................................................................................3 Download jQuery Library from CDNs.....................................................................................................11 3. JQUERY MOBILE ─ PAGES ..................................................................................................14 Single Page............................................................................................................................................14 Multi-Page Template.............................................................................................................................17 Dialogs Page..........................................................................................................................................19 Basic Dialogs .........................................................................................................................................20 Transitions Dialogs................................................................................................................................22 Closing Dialogs ......................................................................................................................................24 Chaining Dialogs....................................................................................................................................27 Styling & Theming Dialogs.....................................................................................................................30 Dialog Width and Margins.....................................................................................................................33 Prefetching Pages..................................................................................................................................34
  • 4.
    jQuery Mobile iii 4. JQUERYMOBILE ─ ICONS...................................................................................................38 Icon Set .................................................................................................................................................38 Icon Positioning.....................................................................................................................................40 Icon Only...............................................................................................................................................41 Icon Shadow..........................................................................................................................................43 Removing Icon Circle.............................................................................................................................44 Black and White Icon Sets .....................................................................................................................46 Combining alt and nodisc ......................................................................................................................47 5. JQUERY MOBILE ─ TRANSITIONS........................................................................................50 Fade Page Transition.............................................................................................................................51 Fade Dialog Transition...........................................................................................................................53 Flip Page Transition...............................................................................................................................55 Flip Dialog Transition.............................................................................................................................57 Page Popup Transition ..........................................................................................................................58 Dialog Popup Transition........................................................................................................................60 Page Flow Transition.............................................................................................................................62 Dialog Flow Transition...........................................................................................................................64 Page Slide Transition.............................................................................................................................66 Dialog Slide Transition...........................................................................................................................68 Page Slidefade Transition......................................................................................................................70 Dialog Slidefade Transition....................................................................................................................72 Page Slideup Transition.........................................................................................................................74 Dialog Slideup Transition.......................................................................................................................76 Page Slidedown Transition ....................................................................................................................78 Dialog Slidedown Transition..................................................................................................................80 Page Turn Transition .............................................................................................................................82
  • 5.
    jQuery Mobile iv Dialog TurnTransition...........................................................................................................................84 Page None Transition ............................................................................................................................86 Dialog None Transition..........................................................................................................................88 6. JQUERY MOBILE ─ LAYOUTS ..............................................................................................92 Grid Layouts..........................................................................................................................................92 Basic Grid Layouts .................................................................................................................................94 Two-column Grids.................................................................................................................................95 Three-column Grids...............................................................................................................................97 Four-column Grids.................................................................................................................................98 Five-column Grids ...............................................................................................................................100 Multiple Row Grid...............................................................................................................................102 Grid Solo Class.....................................................................................................................................104 Responsive Grids.................................................................................................................................105 Breakpoint Preset ...............................................................................................................................106 Buttons in Grids ..................................................................................................................................109 Basic Buttons in Grids..........................................................................................................................109 Mini-sized Buttons in Grids .................................................................................................................111 Icon Only, Inline Centered Buttons in Grids.........................................................................................113 Responsive Buttons in Grids................................................................................................................115 Alignment Buttons in Grids .................................................................................................................117 Custom Responsive Grid .....................................................................................................................119 7. JQUERY MOBILE ─ WIDGETS............................................................................................122 Buttons ...............................................................................................................................................125 Basic Buttons ......................................................................................................................................126 Rounded Buttons ................................................................................................................................127
  • 6.
    jQuery Mobile v Grouped Buttons.................................................................................................................................129 ShadowButtons..................................................................................................................................131 Inline Buttons......................................................................................................................................132 Mini Button.........................................................................................................................................135 Back Button.........................................................................................................................................136 Icon Position .......................................................................................................................................138 Disabled Button ..................................................................................................................................139 Checkbox Widget ................................................................................................................................141 Checkbox Basic markup.......................................................................................................................143 Checkbox Mini Size .............................................................................................................................144 Checkbox Vertical Group.....................................................................................................................145 Checkbox Horizontal Group.................................................................................................................147 Checkbox Icon Position .......................................................................................................................148 Checkbox Theme.................................................................................................................................150 Checkbox Disabled ..............................................................................................................................151 Checkbox Enhanced ............................................................................................................................153 Radio Widget ......................................................................................................................................154 Basic Radio Widget..............................................................................................................................156 Basic Radio Mini Size Widget...............................................................................................................158 Radio Vertical Group Widget...............................................................................................................159 Radio Horizontal Group Widget ..........................................................................................................161 Radio Icon Position Widget .................................................................................................................162 Radio Widget Theme...........................................................................................................................164 Radio Disabled Widget........................................................................................................................165 Radio Enhanced Widget ......................................................................................................................167 Datapicker Widget ..............................................................................................................................168
  • 7.
    jQuery Mobile vi Collapsible Widget..............................................................................................................................171 Collapsible...........................................................................................................................................172 Basic Collapsible..................................................................................................................................173 Collapsible Theme...............................................................................................................................174 Collapsible Expanded ..........................................................................................................................176 Mini Sized Collapsible..........................................................................................................................177 Collapsible Icons..................................................................................................................................178 Collapsible Icons Positioning ...............................................................................................................180 Collapsible Legend ..............................................................................................................................181 Non-inset Collapsible ..........................................................................................................................183 Collapsible Set.....................................................................................................................................184 Collapsible Pre-rendered Markup........................................................................................................186 Dynamic Collapsible ............................................................................................................................187 Collapsible Set.....................................................................................................................................189 Collapsible Markup .............................................................................................................................191 Collapsible Inset vs. Full Width............................................................................................................192 jQuery Mobile - Listview .....................................................................................................................192 Listview Unordered Widget.................................................................................................................194 Listview Ordered.................................................................................................................................195 Listview Linked....................................................................................................................................197 Listview Inset ......................................................................................................................................198 Listview Filter......................................................................................................................................200 Listview Filter Reveal ..........................................................................................................................201 Listview Dividers .................................................................................................................................202 Listview Autodividers..........................................................................................................................204 Listview Count Bubbles .......................................................................................................................205
  • 8.
    jQuery Mobile vii Listview StandardIcons.......................................................................................................................207 Listview Icons: 16x16...........................................................................................................................208 Listview Thumbnails............................................................................................................................211 Listview Split buttons..........................................................................................................................213 Listview Formatted Content................................................................................................................215 Listview Theme ...................................................................................................................................218 Listview Forms ....................................................................................................................................220 Listview Collapsible.............................................................................................................................223 Grouped Collapsible With Listviews ....................................................................................................224 Full Width Collapsible Listview............................................................................................................229 Mini Collapsible Set.............................................................................................................................236 Collapsible Set Icon .............................................................................................................................237 Collapsible Set Icon Positioning...........................................................................................................239 Collapsible Set Without Rounded Corners...........................................................................................241 Collapsible Set Theme .........................................................................................................................243 Nested Collapsible...............................................................................................................................245 jQuery Mobile ─ Controlgroup Widget ................................................................................................246 Controlgroup Vertical Widget..............................................................................................................247 Controlgroup Horizontal Widget .........................................................................................................249 Controlgroup Minisized Widget...........................................................................................................250 Controlgroup Radio Button .................................................................................................................252 Controlgroup Checkbox.......................................................................................................................255 Controlgroup Selects...........................................................................................................................258 Controlgroup Textinputs .....................................................................................................................261 Controlgroup Pre-Rendered Markup...................................................................................................262 Fliterable Widget.................................................................................................................................263
  • 9.
    jQuery Mobile viii Filterable Basics..................................................................................................................................265 Table Filter ..........................................................................................................................................267 Controlgroup Filter..............................................................................................................................270 Filter Collapsible Set............................................................................................................................271 Filter Collapsible Set & Collapsible Children ........................................................................................274 Filter Anything ....................................................................................................................................276 Filter Styling ........................................................................................................................................278 Filter Reveal ........................................................................................................................................279 Filter Custom Callback.........................................................................................................................281 Filterable Pre-rendering ......................................................................................................................282 Flip Switch Widget ..............................................................................................................................284 Listview Widget...................................................................................................................................288 Listview...............................................................................................................................................290 Listview Unordered Widget.................................................................................................................295 Listview Ordered.................................................................................................................................296 Listview Linked....................................................................................................................................297 Listview Inset ......................................................................................................................................299 Listview Filter......................................................................................................................................300 Listview Filter Reveal ..........................................................................................................................302 Listview Dividers .................................................................................................................................303 Listview Autodividers..........................................................................................................................304 Listview Count bubbles .......................................................................................................................306 Listview Standard Icons.......................................................................................................................307 Listview Icons: 16x16...........................................................................................................................309 Listview Thumbnails............................................................................................................................310 Listview Split Buttons..........................................................................................................................313
  • 10.
    jQuery Mobile ix Listview FormattedContent................................................................................................................316 Listview Theme ...................................................................................................................................318 Listview Forms ....................................................................................................................................320 Listview Collapsible.............................................................................................................................323 Grouped Collapsible With Listviews ....................................................................................................324 Full Width Collapsible Listview............................................................................................................329 Listview Autocomplete........................................................................................................................333 Listview Remote Autocomplete ..........................................................................................................334 Listview Local Data..............................................................................................................................336 Listview Providing Richer Search Content ...........................................................................................339 Listview Remote Autocomplete ..........................................................................................................341 Listview Autodivider Linkbar...............................................................................................................344 Listview Autodivider Selector..............................................................................................................347 Nested Listviews .................................................................................................................................349 Listview Collapsible Item Flat ..............................................................................................................353 Listview Collapsible Item Indented......................................................................................................358 Listview Responsive Grid.....................................................................................................................362 Loader Widget.....................................................................................................................................368 Standard Loader Widget .....................................................................................................................368 Custom HTML Widget .........................................................................................................................370 Theme Widget.....................................................................................................................................372 Navbar Widget....................................................................................................................................373 Navbar Basics......................................................................................................................................375 Navbar Multi-row................................................................................................................................378 Navbars in Headers .............................................................................................................................380 Navbars in Footers ..............................................................................................................................381
  • 11.
    jQuery Mobile x Navbars Persistent..............................................................................................................................382 Navbars Icons......................................................................................................................................386 Navbars Icons Position ........................................................................................................................387 Navbars 3rd Party Icon Sets.................................................................................................................389 Navbars Themes..................................................................................................................................391 Navbars with Button Elements............................................................................................................393 Panels Widget .....................................................................................................................................395 Panels .................................................................................................................................................396 Closing Panel.......................................................................................................................................399 External Panel .....................................................................................................................................401 Fixed Panel Positioning .......................................................................................................................403 Panel Responsive ................................................................................................................................405 Panel Styling........................................................................................................................................408 Panel Swipe.........................................................................................................................................410 Internal and External Panels................................................................................................................412 Popup Widget .....................................................................................................................................414 Basic Popup.........................................................................................................................................415 Basics of Popup ...................................................................................................................................418 Popup Tooltip......................................................................................................................................419 Closing Popups....................................................................................................................................421 Photo Lightbox....................................................................................................................................423 Popup Menu .......................................................................................................................................426 Popup Form ........................................................................................................................................427 Popup Dialog.......................................................................................................................................429 Popup Padding....................................................................................................................................431 Popup Position....................................................................................................................................432
  • 12.
    jQuery Mobile xi Popup Transitions...............................................................................................................................434 Popup Theme......................................................................................................................................436 Popup Arrow.......................................................................................................................................438 Pre-rendered Popup Markup ..............................................................................................................440 Popup Alignment ................................................................................................................................442 Dynamic Popup...................................................................................................................................444 iframes in Popup.................................................................................................................................447 iframe Video .......................................................................................................................................448 Map Popup .........................................................................................................................................451 Scaling Images.....................................................................................................................................454 Popup on Multiple Pages ....................................................................................................................456 Range Slider Widget............................................................................................................................459 Basic Rangeslider ................................................................................................................................461 Rangeslider Step Attribute ..................................................................................................................463 Rangeslider No Highlight.....................................................................................................................464 Rangeslider Theme..............................................................................................................................465 Rangeslider Mini .................................................................................................................................466 Rangeslider Disabled...........................................................................................................................468 Rangeslider Label Hidden....................................................................................................................469 Rangeslider Fieldcontain .....................................................................................................................470 Rangeslider Fieldcontain Mini .............................................................................................................472 Table Widget.......................................................................................................................................473 Column Toggle ....................................................................................................................................474 Column Toggle Heading Groups ..........................................................................................................479 Column Toggle Customization.............................................................................................................484 Table Reflow .......................................................................................................................................487
  • 13.
    jQuery Mobile xii Table ReflowHeading Groups .............................................................................................................491 Table Reflow Stripes and Strokes ........................................................................................................494 Table Reflow Custom Styles ................................................................................................................497 Tabs Widget ........................................................................................................................................501 Use Navbar for Tabs............................................................................................................................502 Tabbed Page Content..........................................................................................................................504 Textinput Widget ................................................................................................................................506 Textinput Text and Textarea ...............................................................................................................509 Textinput Search .................................................................................................................................510 Textinput Number...............................................................................................................................512 Textinput Date, Month, and Week......................................................................................................513 Textinput Time and Color....................................................................................................................515 Textinput Telephone and Email...........................................................................................................517 Textinput URL and Password...............................................................................................................518 Textinput Datetime.............................................................................................................................520 Textinput File ......................................................................................................................................521 Textinput Mini ....................................................................................................................................523 Textinput Placeholder .........................................................................................................................524 Textinput Value/Text ..........................................................................................................................525 Textinput Label Hidden .......................................................................................................................527 Textinput Disabled ..............................................................................................................................528 Textinput Enhanced ............................................................................................................................530 Textinput Fieldcontain ........................................................................................................................531 Textinput Fieldcontain, Mini Size ........................................................................................................533 Toolbar Widget ...................................................................................................................................535 Toolbar................................................................................................................................................536
  • 14.
    jQuery Mobile xiii Toolbar Markup..................................................................................................................................537 Toolbar Theme....................................................................................................................................539 Buttons in Toolbars.............................................................................................................................540 Buttons in Footers...............................................................................................................................541 Adding Back Button to Header ............................................................................................................543 Navbar Widget ....................................................................................................................................545 Navbar Basics......................................................................................................................................546 Navbar Multi-row................................................................................................................................549 Navbars in Headers .............................................................................................................................551 Navbars in Footers ..............................................................................................................................552 Navbars Persistent ..............................................................................................................................554 Navbars Icons......................................................................................................................................557 Navbars Icons Position ........................................................................................................................559 Navbars 3rd Party Icon........................................................................................................................561 Navbars Themes..................................................................................................................................563 Navbars with Button Elements............................................................................................................565 Grouped Buttons.................................................................................................................................567 Adding a Padding ................................................................................................................................568 Dynamic Toolbars................................................................................................................................569 External Toolbars ................................................................................................................................571 Fixed Position Toolbars .......................................................................................................................573 Fullscreen Position Toolbars................................................................................................................577 External Fixed Toolbars.......................................................................................................................582 Persistent Toolbars .............................................................................................................................586 Navbars Persistent ..............................................................................................................................586 Ajax Optimized Toolbars .....................................................................................................................590
  • 15.
    jQuery Mobile xiv Form inToolbar...................................................................................................................................592 8. JQUERY MOBILE ─ EVENTS...............................................................................................598 Mobile Events .....................................................................................................................................598 Touch Events.......................................................................................................................................600 Touch Tap Event..................................................................................................................................601 Touch Taphold Event...........................................................................................................................603 Touch Swipe Event ..............................................................................................................................604 Touch Swipeleft Event.........................................................................................................................606 Touch Swiperight Event.......................................................................................................................607 Scroll Events........................................................................................................................................609 Scrollstart Event..................................................................................................................................609 Scrollstop Event ..................................................................................................................................613 Orientation Event................................................................................................................................616 Page Events.........................................................................................................................................618 Page Initialization Events ....................................................................................................................619 Page Load Events ................................................................................................................................620 Page Transition Events ........................................................................................................................622 9. JQUERY MOBILE ─ FORMS...............................................................................................626 Form Basic...........................................................................................................................................626 Form Structure....................................................................................................................................628 Form Buttons ......................................................................................................................................631 jQuery Mobile ─ Icon Set.....................................................................................................................631 Form Field Container...........................................................................................................................634 Form Inputs.........................................................................................................................................636 Form Select .........................................................................................................................................638
  • 16.
    jQuery Mobile xv Form SelectMenus..............................................................................................................................639 Form Custom Select Menus.................................................................................................................641 Form Multiple Selection......................................................................................................................642 Form Slider..........................................................................................................................................644 Form Slider Controls............................................................................................................................644 Form Flip Toggle Switch ......................................................................................................................646 Refreshing and Auto Initialization of Form Elements...........................................................................648 10. JQUERY MOBILE ─ THEMES .............................................................................................650 Themes Types .....................................................................................................................................651 Styling & Theming Dialogs...................................................................................................................653 Theming Buttons, Icons and Popups ...................................................................................................656 Buttons in Footer ................................................................................................................................658 Navbars Themes..................................................................................................................................660 Theming Panels...................................................................................................................................662 Theming Collapsible Button and Split Buttons.....................................................................................664 Theming Lists and Collapsible Lists......................................................................................................667 Collapsible Forms................................................................................................................................670 11. JQUERY MOBILE ─ CSS CLASSES.......................................................................................672 Global Classes .....................................................................................................................................672 Button Classes.....................................................................................................................................672 Icon Classes.........................................................................................................................................674 Theme Classes.....................................................................................................................................677 Grid Classes.........................................................................................................................................678
  • 17.
    jQuery Mobile xvi 12. JQUERYMOBILE ─ DATA ATTRIBUTES..............................................................................679 Button.................................................................................................................................................679 Checkbox.............................................................................................................................................680 Collapsible...........................................................................................................................................680 Collapsible Set.....................................................................................................................................682 Controlgroup.......................................................................................................................................683 Dialog..................................................................................................................................................683 Enhancement......................................................................................................................................684 Fixed Toolbar ......................................................................................................................................685 Flip Toggle Switch................................................................................................................................686 Footer .................................................................................................................................................686 Header ................................................................................................................................................687 Inputs..................................................................................................................................................688 Link .....................................................................................................................................................688 List ......................................................................................................................................................689 List Item ..............................................................................................................................................690 Navbar ................................................................................................................................................691 Page ....................................................................................................................................................691 Popup..................................................................................................................................................692 Radio Button.......................................................................................................................................693 Select ..................................................................................................................................................693 Slider...................................................................................................................................................694
  • 18.
    jQuery Mobile 17 JQuery Mobileis a user interface framework, which is built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses the features of both jQuery and jQuery UI to provide API features for mobile web applications. It was developed by the jQuery project team in the year 2010 and written in JavaScript. WhyUsejQueryMobile?  It creates web applications that it will work the same way on the mobile, tablet, and desktop devices.  It is compatible with other frameworks such as PhoneGap, Whitelight, etc.  It provides a set of touch-friendly form inputs and UI widgets.  The progressive enhancement brings a unique functionality to all mobile, tablet, and desktop platforms and adds efficient page loads and wider device support. FeaturesofjQueryMobile  It is built on jQuery Core and "write less, do more" UI framework.  It is an open source framework, and cross-platform as well as cross-browser compatible.  It is written in JavaScript and uses features of both jQuery and jQuery UI for building mobile-friendly sites.  It integrates HTML5, CCS3, jQuery and jQuery UI into one framework for creating pages with minimal scripting.  It includes Ajax navigation system that uses animated page transitions. AdvantagesofjQueryMobile  It is easy to learn and develop applications if you have knowledge of HTML5, CSS3 features.  It is cross-platform and cross-browser compatible so you don't have to worry about writing different code for each device resolution. 1. JQUERY MOBILE ─ OVERVIEW
  • 19.
    jQuery Mobile 18  Youcan create the custom theme using ThemeRoller without writing the line of code. It supports all HTML5 browsers.  It uses HTML5 along with JavaScript for easy development of web applications.  It is built in a way that allows the same code to automatically scale from the mobile screen to desktop screen. DisadvantagesofjQueryMobile  There are limited options for CSS themes, so sites can look similar which are built by these themes.  Applications which are developed using jQuery Mobile are slower on mobiles.  It becomes more time consuming when you combine jQuery mobile with other mobile frameworks.  Difficult to provide complete customized visual design.  All the features in a device cannot be accessed by JavaScript in a browser.
  • 20.
    jQuery Mobile 19 In thischapter, we will discuss how to install and set up jQuery Mobile. DownloadjQueryMobile When you open the link jquerymobile.com/, you will see there are two options to download jQuery mobile library.  Custom Download - Click this button to download a customized version of library.  Latest Stable - Click this button to get the stable and latest version of jQuery mobile library. Custom Download with Download Builder Using Download Builder, you can create a custom build including only the portions of the library that you need. When you download this new customized version of jQuery Mobile, you will see the following screen. 2. JQUERY MOBILE ─ SETUP
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
    jQuery Mobile 25 You canselect the libraries according to your need and click the Build My Download button. Stable Download Click the Stable button, which leads directly to a ZIP file containing the CSS and JQuery files, for the latest version of jQuery mobile library. Extract the ZIP file contents to a jQuery mobile directory. This version contains all files including all dependencies, a large collection of demos, and even the library's unit test suite. This version is helpful to getting started.
  • 27.
    jQuery Mobile 26 DownloadjQueryLibraryfromCDNs A CDN(Content Delivery Network) is a network of servers designed to serve files to the users. If you use a CDN link in your webpage, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of jQuery mobile from the same CDN, it won't have to be re-downloaded. You can include the following CDN files into the HTML document. //The jQuery Mobile CSS theme file (optional, if you are overriding the default theme) <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> //The jQuery core JavaScript file <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> //The jQuery Mobile core JavaScript file <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> We are using the CDN versions of the library throughout this tutorial. We use AMPPS (AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples. Example Following is a simple example of jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header">
  • 28.
    jQuery Mobile 27 <h1>Header Text</h1> </div> <divdata-role="main" class="ui-content"> <h2>Welcome to TutorialsPoint</h2> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html> Details of the above code are:  This code is specified inside the head element. <meta name="viewport" content="width=device-width, initial-scale=1"> o The viewport is used to specify (by the browser) to display the page zoom level and dimension. o content="width=device-width" is used to set the pixel width of the page or screen device. o initial-scale=1 sets the initial zoom level, when the page is loaded for the first time.  Include the following CDNs <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>  Content inside the <body> tag is a page displayed in the browser. <div data-role="page"> ...
  • 29.
    jQuery Mobile 28 </div>  data-role="header"creates the header at the top of the page.  data-role="main" is used to define the content of the page.  data-role="footer" creates the footer at the bottom of the page.  class="ui-content" includes padding and margin inside the page content. Output Let's carry out the following steps to see how the above code works:  Save the above html code as simple_example.html file in your server root folder.  Open this HTML file as http://localhost/simple_example.html and the following output will be displayed.
  • 30.
    jQuery Mobile 29 The usercan interact with jQuery Mobile pages, which groups the content into logical views and page views. Page view can be animated using page transitions. Multiple pages can be created using HTML document and therefore, there is no need of requesting the content from the server. Following table demonstrates the types of pages in detail. Sr. No. Types & Description 1 Single Page A single page is created in HTML document using a standard way of writing a template. 2 Multi-Page Template Multiple pages can be included in the single HTML document, which loads together by adding multiple divs with data-role="page". 3 Dialogs Page Modal dialogs open content in an interactive overlay above the page. SinglePage Description A standard format is used to create pages many times without changing it. The following standard format is used to create a single page in the jQuery mobile. <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div> 3. JQUERY MOBILE ─ PAGES
  • 31.
    jQuery Mobile 30 <div data-role="footer"> <h4>PageFooter</h4> </div> </div> Example The following example demonstrates the use of Single Page in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Single Page</h1> </div> <div data-role="main" class="ui-content"> <h2>Welcome to TutorialsPoint</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p> </div>
  • 32.
    jQuery Mobile 31 <div data-role="footer"> <h1>FooterText</h1> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save above html code as single_page.html file in your server root folder.  Open this HTML file as http://localhost/single_page.html and the following output will be displayed.
  • 33.
    jQuery Mobile 32 Multi-PageTemplate Description Multiple pagescan be included in the single jQuery mobile document which loads together by adding multiple divs with the attribute data-role="page". The div with data- role="page" should consist of unique id to link internally between the pages. Example Following example demonstrates the use of multi page in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p> For more information <a href="#page2">click here</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>
  • 34.
    jQuery Mobile 33 <div data-role="page"id="page2"> <div data-role="header"> <h1>Header Text</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1">Back to previous page</a></p> </div> <div data-role="footer"> <h4>Footer Text</h4> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as multiple_page.html file in your server root folder.  Open this HTML file as http://localhost/multiple_page.html and the following output will be displayed.
  • 35.
    jQuery Mobile 34 DialogsPage Description Modal dialogsopen content in an interactive overlay above the page. Following table demonstrates the types of dialogs pages in detail. Sr. No. Types & Description 1 Basic Dialogs Include attribute data-dialog="true" to any page to display a dialog. 2 Transitions The transition plugin provides a simple transition effect. 3 Closing Dialogs The closing button can be set at the right side by adding data-close-btn="right" to the dialog container.
  • 36.
    jQuery Mobile 35 4 Chaining Dialogs Thedata-rel="back" attribute is used to navigate to go back to the previous dialog. 5 Styling & theming Different styling and theming can be applied to a dialog. 6 Dialog width and margins By default, the dialog width and margin is set. BasicDialogs Description Include the attribute data-dialog="true" to any page to display a dialog. By default, the dialog box will also have a close button, if the dialog header is included. When the dialog attribute is included, then the framework adds styles to it, i.e. rounded corner, margin, etc. Example The following example demonstrates the use of basic dialogs in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header">
  • 37.
    jQuery Mobile 36 <h2>Header</h2> </div> <div role="main"class="ui-content"> <p><a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn- inline">Open dialog</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as basic_dialogs.html file in your server root folder.  Open this HTML file as http://localhost/basic_dialogs.html and the following output will be displayed.
  • 38.
    jQuery Mobile 37 TransitionsDialogs Description The transitionplugin provides a simple transition effect. The data-transition attribute is used to apply a different transition on the dialog as per choice. Example The following example demonstrates the use of transition in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div>
  • 39.
    jQuery Mobile 38 <div role="main"class="ui-content"> <a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data- transition="slidedown">SlideDown Dialog</a> <a href="#page3" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data- transition="flip">Flip Dialog</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="right" id="page2"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="none" id="page3"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div>
  • 40.
    jQuery Mobile 39 </body> </html> Output Let's carryout the following steps to see how the above code works:  Save the above html code as transition.html file in your server root folder.  Open this HTML file as http://localhost/transition.html and the following output will be displayed. ClosingDialogs Description The closing button can be set at the right side by adding data-close-btn="right" to the dialog container. By default, the close button is present on the left in the dialog box, when the attribute dialog is included. If you don't need the close button in the dialog box, then you can add data-close-btn="none" to the dialog container.
  • 41.
    jQuery Mobile 40 Setting theClose Button Text  Through the dialog's data-attribute, the close button text can be set.  It is an important accesibility feature as the close button text can be modified for translating into different languages.  By default, it displays an icon-only button.  The text is invisible on the screen but the screen reader can read it.  The data-attribute data-close-btn-text is set to configure the text from your markup.  The property $.mobile.dialog.prototype.options.closeBtnText can be set to a particular string and you can configure for all dialogs by binding to the mobileinit event. Example The following example demonstrates the use of closing dialogs in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Close Button</a> <a href="#page3" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">No Close Button</a>
  • 42.
    jQuery Mobile 41 </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <divdata-role="page" data-dialog="true" data-close-btn="right" id="page2"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> <div data-role="page" data-dialog="true" data-close-btn="none" id="page3"> <div data-role="header"> <h1>Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p><a href="#page1" class="ui-btn ui-corner-all">Back</a></p> </div> </div> </body> </html> Output
  • 43.
    jQuery Mobile 42 Let's carryout the following steps to see how the above code works:  Save the above html code as closing_dialogs.html file in your server root folder.  Open this HTML file as http://localhost/closing_dialogs.html and the following output will be displayed. ChainingDialogs Description The data-rel="back" attribute is used to navigate to go back to the previous dialog. When one dialog is chained to the second dialog box and the second dialog is chained to the third, then using the data-rel="back" on the third dialog you can navigate to the second dialog box. Example Following example demonstrates the use of chaining dialogs in jQuery Mobile. <!DOCTYPE html> <html>
  • 44.
    jQuery Mobile 43 <head> <meta name="viewport"content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <a href="#page2" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Open Dialog</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h1>First Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a href="#page3" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Open Second Dialog</a> </div> </div>
  • 45.
    jQuery Mobile 44 <div data-role="page"data-dialog="true" data-close-btn="none" id="page3"> <div data-role="header"> <h1>Second Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a href="#page1" class="ui-btn ui-corner-all" data-rel="back">Back to First Dialog </a> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as chaining_dialogs.html file in your server root folder.  Open this HTML file as http://localhost/chaining_dialogs.html and the following output will be displayed.
  • 46.
    jQuery Mobile 45 Styling&ThemingDialogs Description Different stylingand theming can be applied to a dialog. Following are the ways to apply themes and styles to a dialog:  Themes can be included in the dialog by adding the attribute data-theme to any containers such as header, footer, or content.  Include data-corners="false" to remove the rounded corner of the dialog as by default the corners are set as rounded.  data-overlay-theme attribute sets the overlay to any pattern letter.  Multiple button can also be used in the dialogs. The dialog can be fixed to the top by including {margin-top:0} to the class specified for the page .ui-dialog.my-dialog .ui-dialog-contain
  • 47.
    jQuery Mobile 46 Example Following exampledemonstrates the use of styling and theming dialogs in the jQuery Mobile. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> <style> .ui-dialog.dialog-actionsheet .ui-dialog-contain { margin-top: 0; } </style> </head> <body> <div data-role="page" id="page1"> <div data-role="header" data-theme="b"> <h2>Header</h2> </div> <div role="main" class="ui-content"> <a href="#page2" class="ui-btn ui-corner-all ui-btn-inline">Open Dialog</a> <a href="#page3" class="ui-btn ui-corner-all ui-btn-inline">Photos Dialog</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>
  • 48.
    jQuery Mobile 47 <div data-role="page"data-dialog="true" id="page2" data-corners="false" data- overlay-theme="b"> <div data-role="header"> <h1>First Dialogs</h1> </div> <div role="main" class="ui-content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a data-rel="back" class="ui-btn ui-corner-all ui-btn-inline">Back</a> </div> </div> <div data-role="page" class="dialog-actionsheet" data-dialog="true" id="page3"> <div role="main" class="ui-content"> <h3>Share Photos</h3> <a href="#page4" data-transition="slidedown" class="ui-btn ui-shadow ui- corner-all ui-btn-b">Email</a> <a href="#page4" data-transition="slidedown" class="ui-btn ui-shadow ui- corner-all ui-btn-b">Share on Facebook</a> <a href="#page4" data-transition="slidedown" class="ui-btn ui-shadow ui- corner-all ui-btn-b">Tweet photo</a> <a data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn- a">Cancel</a> </div> </div> <div data-role="page" class="dialog-actionsheet" data-dialog="true" id="page4"> <div role="main" class="ui-content"> <h3>Photos uploaded successfully</h3> <a href="#page1" class="ui-btn ui-shadow ui-corner-all ui-btn-a">View photo page</a> <a href="#page1" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Done</a> </div> </div> </body>
  • 49.
    jQuery Mobile 48 </html> Output Let's carryout the following steps to see how the above code works:  Save the above html code as style_theming.html file in your server root folder.  Open this HTML file as http://localhost/style_theming.html and the following output will be displayed. DialogWidthandMargins By default, the dialog width and margin is set in the jQuery mobile. The default width of dialog is 92.5%. On the larger screens, the dialog top margin is set larger, i.e. 10% top margin but it gets collapsed on the small screen to a small margin. This style can be overriden in your stylesheet when needed. .ui-dialog-contain { width: 92.5%;
  • 50.
    jQuery Mobile 49 max-width: 500px; margin:10% auto 15px auto; padding: 0; position: relative; top: -15px; } Conventions, Not Requirements  The data-role attribute elements such as the header, footer, page, and content are used to provide the basic format and structure of a page.  For single page documents, the page wrapper was required for auto-initialization is set as optional.  The structural element can be excluded for a webpage with custom layout.  To manage pages, the page wrapper is injected by the framework when it is not included by the markup. Prefetching Pages Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. For more information click here. PrefetchingPages Description Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. It helps to link those points to the page. After the primary page is loaded, the target page is loaded in the background and the pagecreate event is triggered. Using the pagecontainer widget's load() method, we can prefetch a page alternatively. $( ":mobile-pagecontainer" ).pagecontainer( "load", pageUrl, { showLoadMsg: false } ); Example The following example demonstrates the use of Prefetching Pages in the jQuery Mobile. <!DOCTYPE html> <html>
  • 51.
    jQuery Mobile 50 <head> <meta name="viewport"content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <h2>Welcome to Tutorialspoint!!! </h2> <a href="#page2" data-prefetch="true" class="ui-btn ui-btn-inline">Next Page</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1" class="ui-btn">Back to Previous Page</a> </div> <div data-role="footer">
  • 52.
    jQuery Mobile 51 <h2>Footer</h2> </div> </div> </body> </html> Output Let's carryout the following steps to see how the above code works:  Save the above html code as prefetching_page.html file in your server root folder.  Open this HTML file as http://localhost/prefetching_page.html and the following output will be displayed. DOM Cache When the browser memory gets full in DOM, then it slow downs the mobile browser or might crash due to loading of multiple pages. There is a simple method to keep the DOM tidy:  When a page is loaded via ajax, then it indicates to remove the page from DOM when you redirect to another page.  The previous page which you have visited can be retrived from the cache when you revisit it.
  • 53.
    jQuery Mobile 52  Insteadof removing the pages, you can tell jQuery mobile to keep it in DOM by using the following line: $.mobile.page.prototype.options.domCache = true;  Set the domCache option as true on the page plugin to keep all the pages in the DOM, which was visited previously. pageContainerElement.page({ domCache: true });
  • 54.
    jQuery Mobile 53 jQuery Mobileprovides a set of built-in icons, which can be used with buttons, listview buttons which will make the buttons more attractive. Following table lists down some of the icons used in the jQuery Mobile framework. Sr. No. Icon Area & Description 1 Icon Set It sets the icon in the button. 2 Positioning Icons It specifies the position of the icon in the button. 3 Icon-only It displays only an icon in the button. 4 Icon shadow It adds an icon shadow in your button. 5 Removing Circle It removes the grey circle around the icon. 6 Black and White Icons It changes the color of icons to black or white. 7 Combining alt and nodisc It combines the alt and nodisc classes to the icon. IconSet Description You can set the icon in the button using ui-icon class and ui-btn-icon-pos_name class for specifying the position for icon. 4. JQUERY MOBILE ─ ICONS
  • 55.
    jQuery Mobile 54 Example Following exampledescribes the use of icon setting in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn ui-btn-icon-left ui-icon-grid">Grid Button</a> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-r">arrow-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-u">arrow-u</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-audio">audio</button> <button class="ui-btn ui-btn-icon-left ui-icon-calendar">calendar</button> <button class="ui-btn ui-btn-icon-left ui-icon-camera">camera</button> <button class="ui-btn ui-btn-icon-left ui-icon-carat-l">carat-l</button> <button class="ui-btn ui-btn-icon-left ui-icon-carat-r">carat-r</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon- check">check</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon- clock">clock</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon- eye">eye</button> </div>
  • 56.
    jQuery Mobile 55 </body> </html> Output Let's carryout the following steps to see how the above code works:  Save above html code as icons_icon_set.html file in your server root folder.  Open this HTML file as http://localhost/icons_icon_set.html and the following output will be displayed. IconPositioning Description You can determine the position of the icon (top, right, left, bottom in the button) using the ui- btn-icon-[value] class. Example Following example describes the use of icon positioning in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Icon Setting</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css">
  • 57.
    jQuery Mobile 56 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-icon-home ui-btn-icon-left">Left</a> <a href="" class="ui-btn ui-icon-home ui-btn-icon-right">Right</a> <a href="" class="ui-btn ui-icon-home ui-btn-icon-top">Top</a> <a href="" class="ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</a> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_positioning.html file in your server root folder.  Open this HTML file as http://localhost/icons_positioning.html and the following output will be displayed. IconOnly Description You can display only an icon in the button using the ui-btn-icon-notext class. Example
  • 58.
    jQuery Mobile 57 Following exampledescribes the use of displaying only icon in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Displaying only Icon</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-icon-home ui-btn-icon-notext">Delete</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_only_icon.html file in your server root folder.  Open this HTML file as http://localhost/icons_only_icon.html and the following output will be displayed.
  • 59.
    jQuery Mobile 58 IconShadow Description You canadd an icon shadow in your button using the ui-shadow-icon class. Example Following example describes the use of icon shadow in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Displaying Icon Shadow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-shadow-icon ui-shadow ui-corner-all ui-icon-home ui-btn-icon-notext">Delete</a>
  • 60.
    jQuery Mobile 59 </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let'scarry out the following steps to see how above code works:  Save the above html code as icons_shadow_icon.html file in your server root folder.  Open this HTML file as http://localhost/icons_shadow_icon.html and the following output will be displayed. RemovingIconCircle Description You can remove the grey circle around the icon using the ui-nodisc-icon class. Example Following example describes the use of removing icon circle in the jQuery Mobile Framework. <!DOCTYPE html>
  • 61.
    jQuery Mobile 60 <head> <title>Displaying IconShadow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn- inline ui-icon-delete ui-btn-icon-left">Without Grey Circle</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_removing_circle.html file in your server root folder.  Open this HTML file as http://localhost/icons_removing_circle.html and the following output will be displayed.
  • 62.
    jQuery Mobile 61 BlackandWhiteIconSets Description You canchange the color of an icon to black using the ui-alt-icon class. By default, all icons are white. Example Following example describes the use of changing icon color in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Black and White Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div>
  • 63.
    jQuery Mobile 62 <div data-role="main"class="ui-content"> <a href="" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui- corner-all">White icon</a> <a href="" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui- corner-all ui-alt-icon">Black icon</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_black_white.html file in your server root folder.  Open this HTML file as http://localhost/icons_black_white.html and the following output will be displayed. Combiningaltandnodisc Description You can combine the alt(ui-alt-icon) and nodisc(ui-nodisc-icon) classes.
  • 64.
    jQuery Mobile 63 Example Following exampledescribes the use of combining icon alt and nodisc classes in the jQuery Mobile Framework. <!DOCTYPE html> <head> <title>Alt and Nodisc Classes</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <a href="" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui- corner-all ui-alt-icon ui-nodisc-icon">Black icon</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as icons_combng_alt_nodisc.html file in your server root folder.
  • 65.
    jQuery Mobile 64  Openthis HTML file as http://localhost/icons_combng_alt_nodisc.html and the following output will be displayed.
  • 66.
    jQuery Mobile 65 It allowsto change the property values, which occurs over a specified duration and alters the behavior of an element from one state to another state, by applying different styles for each state. Following table lists down some of the page transitions used in the jQuery Mobile framework. Sr. No. Transition & Description For Pages For Dialogs 1 fade You can make elements fade in and out of visibility. Fade Page Fade Dialog 2 flip Flip the elements from back to front to the next page. Flip Page Flip Dialog 3 pop You can create a popup window. Pop Page Pop Dialog 4 flow Display the next page by keeping the current page away. Flow Page Flow Dialog 5 slide You can slide the page from the right to the left. Slide Page Slide Dialog 6 slidefade Slides the page from the right to the left and fades in the next page. Slidefade Page Slidefade Dialog 7 slideup Slides the page from bottom to up. Slideup Page Slideup Dialog 8 slidedown Slides the page from top to bottom. Slidedown Page Slidedown Dialog 9 turn You can turn to the next page. Turn Page Turn Dialog 10 none You cannot use any transition effect by using this attribute. None Page None Dialog 5. JQUERY MOBILE ─ TRANSITIONS
  • 67.
    jQuery Mobile 66 FadePageTransition Description You canmake the elements fade in and out of visibility for the pages using the data- transition="fade" attribute. Example Following example describes the use of fading page in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="fade_page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to go page two.</p> <a href="#fade_page2" data-transition="fade">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" id="fade_page2"> <div data-role="header"> <h2>Header</h2>
  • 68.
    jQuery Mobile 67 </div> <div data-role="main"class="ui-content"> <p>Click the link to go page one.</p> <a href="#fade_page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as page_fade.html file in your server root folder.  Open this HTML file as http://localhost/page_fade.html and the following output will be displayed.
  • 69.
    jQuery Mobile 68 FadeDialogTransition Description You canmake the elements fade in and out of visibility for the dialog box using the data- transition="fade" attribute. Example Following example describes the use of fading dialog box in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body>
  • 70.
    jQuery Mobile 69 <div data-role="page"id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to see dialog box.</p> <a href="#page2" data-transition="fade">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>This is Dialog box</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as dialog_fade.html file in your server root folder.
  • 71.
    jQuery Mobile 70  Openthis HTML file as http://localhost/dialog_fade.html and the following output will be displayed. FlipPageTransition Description You can flip the elements from the back to the front to the next page using the data- transition="flip" attribute. Example Following example describes the use of page flip in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
  • 72.
    jQuery Mobile 71 </head> <body> <div data-role="page"id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to flip the page.</p> <a href="#page2" data-transition="flip">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:
  • 73.
    jQuery Mobile 72  Savethe above html code as page_flip.html file in your server root folder.  Open this HTML file as http://localhost/page_flip.html and the following output will be displayed. FlipDialogTransition Description You can flip the elements from the back to the front to the next page using the dialog box by setting the data-transition="flip" attribute. Example Following example describes the use of dialog flip in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  • 74.
    jQuery Mobile 73 <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <divdata-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to flip the page.</p> <a href="#page2" data-transition="flip">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output
  • 75.
    jQuery Mobile 74 Let's carryout the following steps to see how the above code works:  Save the above html code as dialog_flip.html file in your server root folder.  Open this HTML file as http://localhost/dialog_flip.html and the following output will be displayed. PagePopupTransition Description Create a popup window for the page using the data-transition="pop" attribute. Example Following example describes the use of page popup in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to open the popup window.</p> <a href="#page2" data-transition="pop">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div>
  • 76.
    jQuery Mobile 75 <div data-role="page"id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as page_popup.html file in your server root folder.  Open this HTML file as http://localhost/page_popup.html and the following output will be displayed.
  • 77.
    jQuery Mobile 76 DialogPopupTransition Description Create apopup window for the page using the dialog box by setting the data- transition="pop" attribute. Example Following example describes the use of dialog popup in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1">
  • 78.
    jQuery Mobile 77 <div data-role="header"> <h2>Header</h2> </div> <divdata-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to open the popup window using dialog box.</p> <a href="#page2" data-transition="pop">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" data-dialog="true" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:  Save the above html code as dialog_popup.html file in your server root folder.
  • 79.
    jQuery Mobile 78  Openthis HTML file as http://localhost/dialog_popup.html and the following output will be displayed. PageFlowTransition Description You can display the next page by keeping the current page away by using the data- transition="flow" attribute. Example Following example describes the use of page flow in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
  • 80.
    jQuery Mobile 79 </head> <body> <div data-role="page"id="page1"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Welcome to Tutorialspoint!!! Click the link to throw the current page away and comes in with the next page.</p> <a href="#page2" data-transition="flow">Page Two</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h2>Header</h2> </div> <div data-role="main" class="ui-content"> <p>Click the link to go page one.</p> <a href="#page1">Page One</a> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html> Output Let's carry out the following steps to see how the above code works:
  • 81.
    jQuery Mobile 80  Savethe above html code as page_flow.html file in your server root folder.  Open this HTML file as http://localhost/page_flow.html and the following output will be displayed. DialogFlowTransition Description You can display the next page by keeping the current page away using the dialog box by setting the data-transition="flow" attribute. Example Following example describes the use of dialog flow in the jQuery Mobile Framework. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  • 82.
  • 83.
    jQuery Mobile 82 End ofebook preview If you liked what you saw… Buy it from our store @ https://store.tutorialspoint.com