jQuery Mobile

jQuery Mobile What is jQuery Mobile? How to use it? Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it

Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Mobile Overview What is jQuery Mobile?

jQuery Mobile Overview ,[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Mobile Overview (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Responsive Layout Media Queries And Stuff...

Responsive Layout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Orientation Classes ,[object Object],[object Object],[object Object],.portrait { /* portrait orientation changes go here! */ } .landscape { /* landscape orientation changes go here! */ }

Min/Max Width Breakpoint Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],.myelement { float: none; } .min-width-480px .myelement { float: left; }

Min/Max Width Breakpoint Classes (2) ,[object Object],[object Object],[object Object],label.ui-input-text { display: block; } .min-width-480px label.ui-input-text { display: inline-block; }

Adding Width Breakpoints ,[object Object],[object Object],[object Object],[object Object],//add a min/max class for 1200 pixel widths $.mobile.addResolutionBreakpoints(1200); //add min/max classes for 1200, and 1440 pixel widths $.mobile.addResolutionBreakpoints([1200, 1440]);

Running Media Queries ,[object Object],[object Object],[object Object],[object Object],//test for screen media type $.mobile.media("screen"); //test a min-width media query $.mobile.media("screen and (min-width: 480px)");

Data-* Attributes What Is Data-role?

Data-* Attributes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],$("#list").data("role","header");

Data-roles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Mobile Data-* How to use data-* with jQuery Mobile?

Pages in jQuery Mobile ,[object Object],[object Object],[object Object],[object Object]

Pages ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mobile Page Structure ,[object Object],[object Object],[object Object],[object Object]

Example jQuery Mobile Site <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="http://code.jquery. com/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="http://code.jquery. com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"> </script> </head> <body> ... </body> </html>

Pages in jQuery Mobile ,[object Object],[object Object],<div data-role="page"> ... </div> ,[object Object],[object Object],[object Object],[object Object]

Example of Full Single Page <!DOCTYPE html> <html> <head> <title>Page Title</title> . . . </head> <body> < section data-role=" page "> < header data-role=" header "> <h1>Some Title</h1> </ header > < article data-role=" content "> <h1>The Content</h1> </ article > < footer data-role=" footer "> <h1>Some Footer</h1> </ footer > </ section > </body></html> Page The Page Header The Page Content The Page Footer

Single-Paged jQuery Mobile Live Demo

Multi-page jQuery Mobile File ,[object Object],[object Object],[object Object],[object Object],<section data-role="page" id="firstPage">… <article data-role="content"> <a href="#secondPage"> go to second Page</a> </article>… </section> <section data-role="page" id="secondPage">… <article data-role="content"> <a href="#firstPage"> go to second Page</a> </article>… </section>

Multi-page jQuery Mobile Live Demo

Page Transitions ,[object Object],[object Object],[object Object],[object Object],<a href="#secondPage" data-transition="pop">to go second Page</a> ,[object Object],[object Object]

Dialogs ,[object Object],[object Object],[object Object],[object Object],[object Object],<a href="#dialogPage" data-rel="dialog" data-transition="fade"> Open dialog </a>

Page and Dialog Transitions Live Demo

Buttons ,[object Object],[object Object],[object Object],[object Object],[object Object],<div data-role="button"> div with data-role="button"</div> <a href="http://www.minkov.it" data-role="button"> anchor with data-role="button"</a> <img src="images/ClosedBucket.png" width="50" alt="img" data-role="button"/>

Buttons (2) ,[object Object],[object Object],<div data-role="controlgroup" data-type="vertical"> <a href="http://nakov.com" data-role="button">nakov.com</a> <a href="http://minkov.it" data-role="button">minkov.it</a> <a href="http://nikolay.it" data-role="button">nikolay.it</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="http://nakov.com" data-role="button">nakov.com</a> <a href="http://minkov.it" data-role="button">minkov.it</a> <a href="http://nikolay.it" data-role="button">nikolay.it</a> </div>

Buttons (3) ,[object Object],[object Object],[object Object],[object Object],bottom Below the text, centered left Left side of button notext Hides the text, displaying only the icon right Right side of button top Above text, centered

jQuery Mobile Buttons Live Demo

Listviews ,[object Object],[object Object],[object Object],<ul data-role="listview"> <li> <a href="#firstPage">go to first Page</a> </li> <li> <a href="#secondPage">go to second Page</a> </li> <li> <a href="#thirdPage">go to third Page</a> </li> <li> <a href="#fourthPage">go to fourth Page</a> </li> </ul>

Forms in jQuery Mobile ,[object Object],[object Object],[object Object]

Sliders in jQuery Mobile Live Demo

HTML5 Form Validation Live Demo

jQuery Mobile Events Touch, Orientation, Page

Events in jQuery Mobile ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Touch Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Orientation Change Event ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Scroll events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Page show/hide events ,[object Object],[object Object],[object Object],[object Object],[object Object]

Page show/hide events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Page show/hide events ,[object Object],[object Object],[object Object],[object Object],$('div').live('pageshow', function(event, ui){ alert('This page was just hidden: '+ ui.prevPage); }); $('div').live('pagehide', function(event, ui){ alert('This page was just shown: '+ ui.nextPage); });

Page Show/Hide Events Live Demo

Page initialization events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Page initialization events ,[object Object],[object Object],[object Object]

Page initialization events ,[object Object],[object Object],$('#aboutPage').live('pagebeforecreate', function(event){ alert('This page was just inserted into the dom!'); }); ,[object Object],[object Object],$('#aboutPage').live('pagecreate',function(event){ alert('This page was just enhanced by jQuery Mobile!'); });

Page initialization events ,[object Object],[object Object],$('#aboutPage').live('pagebeforecreate', function(event){ //run your own enhancement scripting here... return false; });

jQuery Mobile Init Events Live Demo

Features of jQuery Mobile What to Expect?

Features of jQuery Mobile ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Features of jQuery Mobile ,[object Object],[object Object],[object Object],[object Object],[object Object]

Features of jQuery Mobile ,[object Object],[object Object],[object Object],[object Object]

Supported Platforms ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Homework ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Mobile

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à jQuery Mobile

Similaire à jQuery Mobile (20)

Plus de Doncho Minkov

Plus de Doncho Minkov (20)

Dernier

Dernier (20)

jQuery Mobile