jQuery Mobile

Transcript

1. jQuery Mobile Design “native” mobile apps Sunday, October 9, 2011
2. jQuery Mobile A Mobile UI framework Implements native looking UI components Sunday, October 9, 2011
3. Real World jQM http://c.dric.be/ http://m.anticocasalediscansano.it/en/ Sunday, October 9, 2011
4. Real World jQM http://c.dric.be/ http://m.anticocasalediscansano.it/en/ Gallery: http://www.jqmgallery.com/ Sunday, October 9, 2011
5. jQuery Mobile Dark Side Almost Final Dependent on jQuery Size: ~130k (before jQuery) jQM way or the highway Sunday, October 9, 2011
6. jQuery Mobile Bright Side Page layout UI Controls jQM API Theming Sunday, October 9, 2011
7. Page Layout Sunday, October 9, 2011
8. Page Layout a page is just a div with data-role=”page” a jQM page has: header content footer Sunday, October 9, 2011
9. Page Example <div data-role="page"> <div data-role="header">...</div> ! <div data-role="content">...</div> ! <div data-role="footer">...</div> </div> Sunday, October 9, 2011
10. Hello jQM Demo Sunday, October 9, 2011
11. Multi Page Layout Multiple pages can be specified in the same .html file Each page is identified with an id attribute Navigation is performed using a tags Back button is generated for pages that have data-add-back-btn=”true” Sunday, October 9, 2011
12. Multi Page Demo Sunday, October 9, 2011
13. Using transitions Transitions are determined via the data-transition attribute <p><a href="#about" data-transition="slideup">About this app</a></p> Sunday, October 9, 2011
14. Page Transitions Effect Name Description slide slide right-to-left. This is the default slideup slide from bottom-to-top slidedown slide from top-to-bottom pop expand the new page (dialog pop-up style) fade fade the new page in flip flip pages (like cards). Sunday, October 9, 2011
15. Exercise Write a mobile website with four pages. First page: text and link. Second page: back button and an image. Third and fourth pages: simple texts Create transition effects using: slide, pop, fade, flip Sunday, October 9, 2011
16. jQuery Mobile Page layout UI Controls jQM API Theming Sunday, October 9, 2011
17. jQM UI Controls jQM provides ready-made UI controls for our app that “look” native. This rich library includes: Toolbars Buttons Forms & Lists Sunday, October 9, 2011
18. Toolbars A header with data-position=”fixed” Implements fixed position using JavaScript Sunday, October 9, 2011
19. Toolbars We can add buttons to toolbars simply by writing them in the bar header bar can have 2 buttons Use inside header: <a href=”#” data-role=”button”>Add</a> Sunday, October 9, 2011
20. Toolbars Careful not to put too many buttons - looks bad Sunday, October 9, 2011
21. Toolbars Footer can have as many buttons as you wish Add class=”ui-bar” to get padding Demo Sunday, October 9, 2011
22. Toolbars Again, don’t put too many buttons or it’ll look bad Sunday, October 9, 2011
23. Toolbar Exercise Implement a mockup for a mail reader application Top toolbar button: Logout bottom toolbar buttons: Compose, delete, forward, reply. Sunday, October 9, 2011
24. Buttons An anchor tag with data-role=”button” will look like a button Any normal form button will automatically be converted Sunday, October 9, 2011
25. Button Icons data-icon attribute allows using icons on a button Sunday, October 9, 2011
26. Button Icons arrow-l arrow-r arrow-u arrow-d delete plus minus check gear refresh forward back grid star alert info home search Sunday, October 9, 2011
27. Icon Positions data-iconpos determines the icon position possible values: right, top, bottom, notext Sunday, October 9, 2011
28. Inline Buttons Dialog buttons are usually placed side-by- side This is called inline, and achieved via data-inline=”true” Sunday, October 9, 2011
29. Buttons Demo Sunday, October 9, 2011
30. Button Exercise Implement a jQM app with three buttons titled: red, blue and green App background color should change when a user presses a button Bonus: use gradients as background Sunday, October 9, 2011
31. Basic List <ul data-role="listview" data-theme="g"> ! <li><a href="acura.html">Acura</a></li> ! <li><a href="audi.html">Audi</a></li> ! <li><a href="bmw.html">BMW</a></li> </ul> Sunday, October 9, 2011
32. Numbered List <ol data-role="listview" data-theme="g"> ! <li><a href="acura.html">Acura</a></li> ! <li><a href="audi.html">Audi</a></li> ! <li><a href="bmw.html">BMW</a></li> </ol> Sunday, October 9, 2011
33. Count Bubble List Wrap the number in an element with ui-li-count to get the “count bubble” <li> <a href=”#”>Inbox <span class=”ui-li-count”>12</span> </a> </li> Sunday, October 9, 2011
34. Thumbnail Lists Insert an img tag as the first child in the anchor to get a thumbnail Image is automatically scaled by jQM Sunday, October 9, 2011
35. Split List Having two links in the same item creates a split list Sunday, October 9, 2011
36. Inset Lists A list that is embedded in a page is called inset use data-inset=”true” to get the effect Sunday, October 9, 2011
37. Exercise Implement the following home screen Sunday, October 9, 2011
38. Navigation Bars Navigation elements at the top or bottom of the page Sometimes referred as “tab bars” <div data-role="footer"> ! <div data-role="navbar"> ! ! <ul> ! ! ! <li><a href="#" class="ui-btn- active">One</a></li> ! ! ! <li><a href="#">Two</a> </li> ! ! </ul> ! </div><!-- /navbar --> </div><!-- /footer --> Sunday, October 9, 2011
39. Top Nav Bar Put the above code in the header to get top nav bars They are recommended for mobile apps running inside the browser Sunday, October 9, 2011
40. Bottom Nav Bar Put the above code in the footer to get bottom nav bar Recommended in standalone apps Sunday, October 9, 2011
41. Tab Bars (ala iPhone) Use data-icon to get icons in the nav bars above the text Custom icons are also allowed Free iOS Style Icons: http://glyphish.com/ Sunday, October 9, 2011
42. Icon Grids divs can be lines up in columns (or grid) <div class=”ui-grid-b”> <div class=”ui-block-a”> </div> <div class=”ui-block-b”> </div> <div class=”ui-block-c”> </div> </div> Sunday, October 9, 2011
43. Exercise Implement the following App is 2 tabs: Home and Image Gallery Home includes text info on eating vegetables Gallery has photos of vegetables (use google images) Solution at: http://apps.ynonperek.com/mobileweb/jqm/vegapp/ Sunday, October 9, 2011
44. Forms Mobile optimized controls Sunday, October 9, 2011
45. Mobile Optimized Forms jQuery mobile provides a complete set of finger friendly form elements Most form elements are automatically initialized by jQM Prevent auto initialization with data-role=”none” Sunday, October 9, 2011
46. jQuery vs. Normal Wrap a labe/input pair in a div with data-role=”fieldcontain” to get the cool thin line Sunday, October 9, 2011
47. Refresh Form controls can be set programmatically Must call “refresh” to refresh the ui Use $(‘#fld-radio’).checkboxradio(“refresh”); Sunday, October 9, 2011
48. Form Elements Text Inputs Sliders Buttons Select Menu Submitting Forms Sunday, October 9, 2011
49. Text Inputs Available input types: text, password, number, email, url, tel, search textarea provides multi-line text triggers ‘create’ event on creation Sunday, October 9, 2011
50. Slider input type=”range” creates a slider attributes: value, min, max refresh with .slider(‘refresh’); Sunday, October 9, 2011
51. Buttons - Flip Switch <div data-role="fieldcontain"> ! <label for="slider">Select slider:</label> ! <select name="slider" id="slider" data-role="slider"> ! ! <option value="off">Off</option> ! ! <option value="on">On</option> ! </select> </div> Sunday, October 9, 2011
52. Buttons - Radio <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> ! <legend>Choose a pet:</legend> ! <input type="radio" id="radio-choice-1" value="choice-1" name=”pet” checked="checked" /> ! <label for="radio-choice-1">Cat</label> ! <input type="radio" id="radio-choice-2" value="choice-2" name=”pet” /> ! <label for="radio-choice-2">Dog</label> ! <input type="radio" id="radio-choice-3" value="choice-3" name=”pet” /> ! <label for="radio-choice-3">Hamster</label> ! <input type="radio" id="radio-choice-4" value="choice-4" name=”pet” /> ! <label for="radio-choice-4">Lizard</label> </fieldset> </div> Sunday, October 9, 2011
53. Buttons - Radio Add data-type=”horizontal” to fieldset to get the horizontal radio buttons Refresh with .checkboxradio(‘refresh’); Sunday, October 9, 2011
54. CheckBoxes Sunday, October 9, 2011
55. CheckBoxes <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many snacks as you like</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">Cheetos</label> <input type="checkbox" name="checkbox-2" id="checkbox-2" /> <label for="checkbox-2">Doritos</label> <input type="checkbox" name="checkbox-3" id="checkbox-3" /> <label for="checkbox-3">Fritos</label> <input type="checkbox" name="checkbox-4" id="checkbox-4" /> <label for="checkbox-4">Sun Chips</label> </fieldset> </div> Sunday, October 9, 2011
56. CheckBoxes Use data-role=”horizontal” for horizontal checkboxes Remember the outer div with data- role=”fieldcontain” so jQM can outline the field CheckBoxes & Radio Buttons both use a legend for the question text Sunday, October 9, 2011
57. Submitting Forms AJAX is used to submit the forms No Ajax forms are created with data-ajax=false Sunday, October 9, 2011
58. Q & A - Forms Sunday, October 9, 2011
59. Forms Exercise Implement a 2 page registration from using jQM with the following fields: Page 1 Page 2 username (text) gender (m/f) password (pass) favorite colors (red, blue or green) can have more than one phone number comments (text area) email Sunday, October 9, 2011
60. jQuery Mobile Page layout UI Controls jQM API Theming Sunday, October 9, 2011
61. jQM API Default configurations jQM Events Methods & Utilities Sunday, October 9, 2011
62. The mobileinit Event bind to mobileinit event Note: this event triggers immediately upon loading jqm $(document).bind("mobileinit", function(){ //apply overrides here }); Sunday, October 9, 2011
63. The mobileinit Event Overriding defaults is simply changing object attributes Full list of configurable options at: http://jquerymobile.com/demos/1.0b2/docs/api/ globalconfig.htmlglobalconfig.html $(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition = ‘slide’; }); Sunday, October 9, 2011
64. jQM Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop pageshow pagehide pagecreate pageinit Sunday, October 9, 2011
65. jQM Methods $.mobile.changePage(to, options) $.mobile.silentScroll Full list at: http://jquerymobile.com/demos/1.0b2/docs/api/ globalconfig.html#/demos/1.0b2/docs/api/ methods.html Sunday, October 9, 2011
66. Exercise (1) Implement a jQM app that has two pages First page keeps a combo box with values: slide, flip; and a “go” button When a user clicks “go”, app moves to the second page in the selected transition style Sunday, October 9, 2011
67. Exercise (2) Implement a “switching cards” display - create 3 divs and allow user to switch visible div by sliding left or right - Yahoo Style. Sunday, October 9, 2011
68. jQuery Mobile Page layout UI Controls jQM API Theming Sunday, October 9, 2011
69. jQM Themes The theme controls how elements look on the page Each theme has swatches for color play Default theme has 5 swatches marked a,b,c,d,e Sunday, October 9, 2011
70. Default Theme Sunday, October 9, 2011
71. jQM Customize Theme To customize a theme: Edit jQM css Copy a swatch definitions as a new swatch Change the swatch letter Make your changes Sunday, October 9, 2011
72. Q & A Sunday, October 9, 2011
73. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com Sunday, October 9, 2011