BlackBerry Jam Europe - JAM 329 - In-depth look at jQuery Mobile

In-depth look at jQuery Mobile JAM329 Ralph Whitbeck – appendTo
- @RedWolves Jason Scott – BlackBerry - @JsonScott 5 – 6 February, 2013

  jQuery Mobile Team – Developer   Web Platform Team
- BlackBerry Jason Scott 2

  jQuery Board Member   jQuery Mobile Team - Developer
Relations   Modern Web Advocate at appendTo   Project Lead for the jQuery Mobile Cookbook http://jquerymobilecookbook.com Ralph Whitbeck 3

jQuery Mobile 4

Graded Device Support 5 See full device list at http://jquerymobile.com/gbs

Getting Started 6 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,
initial-scale=1"> <link href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></ script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.js"></script> </head> <body> </body> </html>

Anatomy of a page 7 <div data-role="page"> <div data-role="header"> <h1>My
Title</h1> </div> <div data-role="content"> <p>Hello world</p> </div> <div data-role="footer"> <p>Footer</p> </div> </div>

Multiple pages in one file 8 <div id="page-1" data-role="page"> <div
data-role="header"><h1>Page 1</h1></div> <div data-role="content"> <a href="#page-2" data-role="button">Next Page</a> </div> </div> <div id="page-2" data-role="page"> <div data-role="header"><h1>Page 2</h1></div> <div data-role="content"> <a href="#page-1" data-role="button">Previous Page</a> </div> </div>

Adding Components 9 <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html"
data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>

Adding Components 10 <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html"
data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>

Adding Components 11

Documentation 12

jQuery Mobile & Backbone.js Tips   Disable jQuery Mobile’s Page
Navigation features, let backbone.js handle routing   When jQuery Mobile isn’t handling page navigation you’ll need to manually remove pages from the DOM 13

jQuery Mobile & Backbone.js 14 $(document).bind("mobileinit", function () { //
Disable jQuery Mobile page navigation $.mobile.ajaxEnabled = false; $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.pushStateEnabled = false; });

jQuery Mobile & Backbone.js 15 // Remove page from DOM
when it's being replaced $(document).on('pagehide', 'div[data-role="page"]’, function (event, ui) { $(event.currentTarget).remove(); });

Tutorial   Sample Contact App   Tutorial/Code at https://github.com/appendto/bb10-jqm- sample-app
16

State of jQuery Mobile February 2013 17

Release Milestones   November 16, 2011 – 1.0.0   January
26, 2012 – 1.0.1   April 13, 2012 – 1.1.0   July 12, 2012 – 1.1.1   October 2, 2012 – 1.2.0   January 14, 2013 – 1.3.0 Beta 18

Popularity http://www.google.com/trends/explore#q=jQuery%20Mobile 19

Thriving Ecosystem 20

Codiqa 21

jQuery Mobile 1.2.0 What’s New 22

jQuery Mobile 1.2.0   New: Popup Widget   New Auto
dividers in Listview mode   Collapsible Listviews are now supported   A Download builder (Alpha) 23

Popup 24 <a href="#simplepopup" data-rel="popup">Open Popup</a> <div data-role="popup" id="simplepopup"> <p>This
is a completely basic popup, no options set.</p> </div>

Popup Menu 25 <a href="#menu" data-rel="popup" data-role="button">Menu</a> <div data-role="popup" id="menu"
data-theme="a"> <ul data-role="listview" data-theme="c" data-inset="true"> <li data-role="divider" data-theme="a">My Menu</li> <li>Unlinked</li> <li><a href="methods.html">Linked</a></li> <li> <a href="methods.html">With count <span class="ui-li-count">42</span> </a> </li> </ul> </div>

Popup Menu 26

Collapsible Popup Menu 27

Popup Form 28

Popup Positioning 29   By Default: Popups Center over object
that triggered it   Add attribute data-position-to="window"   This centers the popup in the center of the window

Popup Overlays 30   Overlay: Background of the popup but
overlays the page   Theme the overlay to a dark shade. With the default swatches we can use the a swatch   Set the overlay theme with data- attribute: data-overlay- theme   data-overlay-theme="a"

Dialogs   Combine Positioning and Overlays on a Pop-up 31

Download builder 32

Themes 33

Overview   Uses CSS3 Properties   Multiple Color “Swatches”  
Sprited Icon Set   Default Theme come with 5 swatches a-e   If no swatch is specified by default:   a swatch for headers/footers   c swatch for content 34

Mixing Swatches 35 <ul data-role="listview" data-theme="a"> <li><a href="#">Theme Inherit</a></li> <li
data-theme="b"><a href="#">Theme b</a></li> <li data-theme="c"><a href="#">Theme c</a></li> <li data-theme="d"><a href="#">Theme d</a></li> <li data-theme="e"><a href="#">Theme e</a></li> </ul>

Mixing Swatches 36

ThemeRoller 37

Third-Party Themes   iOS Theme   http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/   Windows Phone
7.5 Metro Theme   http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm- public-demo/index.html 38

BlackBerry 10 jQuery Mobile Theme 39

Getting Started with the Theme 40

Download the code https://github.com/blackberry/jQueryMobile-BB10-Theme http://bit.ly/YsesyH Getting Started with the Theme
41

Add the <script> tags ... 42 <!DocType HTML> <html> <head>
.... <link rel="stylesheet" href=”BlackBerry-JQM-all.min.css" /> <script src=”BlackBerry-JQM-all.min.js"></script> </head> .... </html>

Where Did the Meta Tag Go?   jQuery Mobile normally
recommends this <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> </head> 43

Meta Tag Substitution <head> <script> var meta = document.createElement("meta"); meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/ window.devicePixelRatio) + ',user- scalable=no'); document.getElementsByTagName('head') [0].appendChild(meta); </script> </head> View http://bit.ly/R5zC20 for more info 44

jQuery Mobile & BlackBerry 10   Supports all of the
jQuery Mobile Controls   New widgets   Action bar   Overflow Menus (Panels)   Gridview   Progress bars   Input validator   Drop down Menu   New Transition   Cover 45

jQuery Mobile Controls 46

Action Bars 47   Buttons and Tabs   Provides up
to 5 slots for commonly used actions   Built in “Back” button (if no tabs)

Overflow Menu (Panels) 48   Action Overflow Menu   More
actions button   Add secondary actions   Tab Overflow Menu   Space for additional Tabs

Grid Lists 49   Provides layout of image data  
Declare your items in groups and rows   Optional headers for groups   1:1 or 16:9 image formats   Sizes images based on number of items per row   Optional title overlays

Progress Indicators 50   Show progress of a running action
  Set the min, max and value   Normal and Paused states   Simply add an HTML5 progress element to your screen

  Provide the user with immediate form validation   Uses
the standard HTML5 form validation Input Validation 51

  Drop down menus exist in jQuery Mobile   But
not like this! Drop down Menu 52

  Transition to the new page by covering the old
page Transition: Cover 53

Q10 54

jQuery Mobile 1.3.0 What’s New 55

Panel 56

Panel 57 <div data-role="page"> <div data-role="panel" id="mypanel">  </div>    </div>

Panel Options   data-position   Right   left   data-display
  reveal   overlay   push 58

Range Slider 59

Range Slider 60 <div data-role="rangeslider"> <label for="range-1a">Rangeslider:</label> <input name="range-1a" id="range-1a"
min="0" max="100" value="0" type="range" /> <label for="range-1b">Rangeslider:</label> <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" /> </div>

More…   Responsive Tables   Responsive Grids   Responsive Web
Design Documentation   Much more 61

THANK YOU JAM329 Ralph Whitbeck – appendTo - @RedWolves Jason
Scott – BlackBerry - @JsonScott 5 – 6 February, 2013

BlackBerry Jam Europe - JAM 329 - In-depth look...

BlackBerry Jam Europe - JAM 329 - In-depth look at jQuery Mobile

More Decks by Ralph Whitbeck

Other Decks in Technology

Featured

Transcript