jQuery Mobile

82fe3950bdbb0b1048e870fa04c89cfd?s=47 ynonperek
October 11, 2011

jQuery Mobile

82fe3950bdbb0b1048e870fa04c89cfd?s=128

ynonperek

October 11, 2011
Tweet

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