• Like
04 jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

04 jQuery Mobile

  • 2,267 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,267
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
76
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery Mobile Design “native” mobile appsWednesday, October 31, 12
  • 2. jQuery Mobile A Mobile UI framework Implements native looking UI componentsWednesday, October 31, 12
  • 3. Real World jQM http://c.dric.be/ http://m.anticocasalediscansano.it/en/Wednesday, October 31, 12
  • 4. Real World jQM Gallery: allery.com/ http:/ /www.jqmg http://c.dric.be/ http://m.anticocasalediscansano.it/en/Wednesday, October 31, 12
  • 5. jQuery Mobile Dark Side Needs jQuery jQM way or the highway PerformanceWednesday, October 31, 12
  • 6. jQM When Use for Mobile Subdomain Use for landing pages Use for small static mobile web siteWednesday, October 31, 12
  • 7. jQuery Mobile Bright Side Page layout UI Controls jQM API ThemingWednesday, October 31, 12
  • 8. Page LayoutWednesday, October 31, 12
  • 9. Using jQM <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/ jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.1.1/ jquery.mobile-1.1.1.min.js"> </script> Copied From http://jquerymobile.com/download/Wednesday, October 31, 12
  • 10. Page Layout a page is just a div with data-role=”page” a jQM page has: header content footerWednesday, October 31, 12
  • 11. Page Example <div data-role="page"> <div data-role="header">...</div> ! <div data-role="content">...</div> ! <div data-role="footer">...</div> </div>Wednesday, October 31, 12
  • 12. Hello jQM DemoWednesday, October 31, 12
  • 13. 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”Wednesday, October 31, 12
  • 14. Using transitions Transitions are determined via the data-transition attribute <p><a href="#about" data-transition="slideup">About this app</a></p>Wednesday, October 31, 12
  • 15. 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).Wednesday, October 31, 12
  • 16. 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, flipWednesday, October 31, 12
  • 17. jQuery Mobile Page layout UI Controls jQM API ThemingWednesday, October 31, 12
  • 18. jQM UI Controls jQM provides ready-made UI controls for our app that “look” native. This rich library includes: Toolbars Buttons Forms & ListsWednesday, October 31, 12
  • 19. Toolbars A header with data-position=”fixed” Implements fixed position using JavaScriptWednesday, October 31, 12
  • 20. 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>Wednesday, October 31, 12
  • 21. Toolbars Careful not to put too many buttons - looks badWednesday, October 31, 12
  • 22. Toolbars Footer can have as many buttons as you wish Add class=”ui-bar” to get padding DemoWednesday, October 31, 12
  • 23. Toolbars Again, don’t put too many buttons or it’ll look badWednesday, October 31, 12
  • 24. Toolbar Exercise Implement a mockup for a mail reader application Top toolbar button: Logout bottom toolbar buttons: Compose, delete, forward, reply.Wednesday, October 31, 12
  • 25. Buttons An anchor tag with data-role=”button” will look like a button Any normal form button will automatically be convertedWednesday, October 31, 12
  • 26. Button Icons data-icon attribute allows using icons on a buttonWednesday, October 31, 12
  • 27. Button Icons arrow-l minus grid arrow-r check star arrow-u gear alert arrow-d refresh info delete forward home plus back searchWednesday, October 31, 12
  • 28. Icon Positions data-iconpos determines the icon position possible values: right, top, bottom, notextWednesday, October 31, 12
  • 29. Inline Buttons Dialog buttons are usually placed side-by- side This is called inline, and achieved via data-inline=”true”Wednesday, October 31, 12
  • 30. Buttons DemoWednesday, October 31, 12
  • 31. 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 backgroundWednesday, October 31, 12
  • 32. 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>Wednesday, October 31, 12
  • 33. 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>Wednesday, October 31, 12
  • 34. 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>Wednesday, October 31, 12
  • 35. Thumbnail Lists Insert an img tag as the first child in the anchor to get a thumbnail Image is automatically scaled by jQMWednesday, October 31, 12
  • 36. Split List Having two links in the same item creates a split listWednesday, October 31, 12
  • 37. Inset Lists A list that is embedded in a page is called inset use data-inset=”true” to get the effectWednesday, October 31, 12
  • 38. Exercise Implement the following home screenWednesday, October 31, 12
  • 39. 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 -->Wednesday, October 31, 12
  • 40. Top Nav Bar Put the above code in the header to get top nav bars They are recommended for mobile apps running inside the browserWednesday, October 31, 12
  • 41. Bottom Nav Bar Put the above code in the footer to get bottom nav bar Recommended in standalone appsWednesday, October 31, 12
  • 42. 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/Wednesday, October 31, 12
  • 43. 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>Wednesday, October 31, 12
  • 44. 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/Wednesday, October 31, 12
  • 45. Forms Mobile optimized controlsWednesday, October 31, 12
  • 46. 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”Wednesday, October 31, 12
  • 47. jQuery vs. Normal Wrap a lab e/input pai with data-r r in a div ole=”fieldc to get the c ontain” ool thin lineWednesday, October 31, 12
  • 48. Refresh Form controls can be set programmatically Must call “refresh” to refresh the ui Use $(‘#fld-radio’).checkboxradio(“refresh”);Wednesday, October 31, 12
  • 49. Form Elements Text Inputs Sliders Buttons Select Menu Submitting FormsWednesday, October 31, 12
  • 50. Text Inputs Available input types: text, password, number, email, url, tel, search textarea provides multi-line text triggers ‘create’ event on creationWednesday, October 31, 12
  • 51. Slider input type=”range” creates a slider attributes: value, min, max refresh with .slider(‘refresh’);Wednesday, October 31, 12
  • 52. 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>Wednesday, October 31, 12
  • 53. 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>Wednesday, October 31, 12
  • 54. Buttons - Radio Add data-type=”horizontal” to fieldset to get the horizontal radio buttons Refresh with .checkboxradio(‘refresh’);Wednesday, October 31, 12
  • 55. CheckBoxesWednesday, October 31, 12
  • 56. 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>Wednesday, October 31, 12
  • 57. 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 textWednesday, October 31, 12
  • 58. Submitting Forms AJAX is used to submit the forms No Ajax forms are created with data-ajax=falseWednesday, October 31, 12
  • 59. Q & A - FormsWednesday, October 31, 12
  • 60. Forms Exercise Implement a 2 page registration from using jQM with the following fields: Page 1 Page 2 username (text) gender (m/f) favorite colors (red, blue or green) password (pass) can have more than one phone number comments (text area) emailWednesday, October 31, 12
  • 61. jQuery Mobile Page layout UI Controls jQM API ThemingWednesday, October 31, 12
  • 62. jQM API Default configurations jQM Events Methods & UtilitiesWednesday, October 31, 12
  • 63. The mobileinit Event bind to mobileinit event $(document).bind("mobileinit", function(){ //apply overrides here }); Note: this event triggers immediately upon loading jqmWednesday, October 31, 12
  • 64. The mobileinit Event Overriding defaults is simply changing object attributes $(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition = ‘slide’; }); Full list of configurable options at: http://jquerymobile.com/demos/1.0b2/docs/api/ globalconfig.htmlglobalconfig.htmlWednesday, October 31, 12
  • 65. jQM Events tap scrollstart taphold scrollstop swipe pageshow swipeleft pagehide swiperight pagecreate orientationchange pageinitWednesday, October 31, 12
  • 66. 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.htmlWednesday, October 31, 12
  • 67. 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 styleWednesday, October 31, 12
  • 68. Exercise (2) Modify previously implemented “switching cards” to use swipe gesturesWednesday, October 31, 12
  • 69. jQuery Mobile Page layout UI Controls jQM API ThemingWednesday, October 31, 12
  • 70. 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,eWednesday, October 31, 12
  • 71. Default ThemeWednesday, October 31, 12
  • 72. jQM Customize Theme To customize a theme: Edit jQM css Copy a swatch definitions as a new swatch Change the swatch letter Make your changesWednesday, October 31, 12
  • 73. Q&AWednesday, October 31, 12
  • 74. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.comWednesday, October 31, 12