04 jQuery Mobile
Upcoming SlideShare
Loading in...5

04 jQuery Mobile






Total Views
Views on SlideShare
Embed Views



6 Embeds 324

http://mobileweb.ynonperek.com 174
http://ynonperek.com 133
http://www.ynonperek.com 7
http://localhost 6
http://www.linkedin.com 2
http://amplytix.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    04 jQuery Mobile 04 jQuery Mobile Presentation Transcript

    • jQuery Mobile Design “native” mobile appsWednesday, October 31, 12
    • jQuery Mobile A Mobile UI framework Implements native looking UI componentsWednesday, October 31, 12
    • Real World jQM http://c.dric.be/ http://m.anticocasalediscansano.it/en/Wednesday, October 31, 12
    • Real World jQM Gallery: allery.com/ http:/ /www.jqmg http://c.dric.be/ http://m.anticocasalediscansano.it/en/Wednesday, October 31, 12
    • jQuery Mobile Dark Side Needs jQuery jQM way or the highway PerformanceWednesday, October 31, 12
    • jQM When Use for Mobile Subdomain Use for landing pages Use for small static mobile web siteWednesday, October 31, 12
    • jQuery Mobile Bright Side Page layout UI Controls jQM API ThemingWednesday, October 31, 12
    • Page LayoutWednesday, October 31, 12
    • 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
    • Page Layout a page is just a div with data-role=”page” a jQM page has: header content footerWednesday, October 31, 12
    • 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
    • Hello jQM DemoWednesday, October 31, 12
    • 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
    • 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
    • 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
    • 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
    • jQuery Mobile Page layout UI Controls jQM API ThemingWednesday, October 31, 12
    • 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
    • Toolbars A header with data-position=”fixed” Implements fixed position using JavaScriptWednesday, October 31, 12
    • 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
    • Toolbars Careful not to put too many buttons - looks badWednesday, October 31, 12
    • Toolbars Footer can have as many buttons as you wish Add class=”ui-bar” to get padding DemoWednesday, October 31, 12
    • Toolbars Again, don’t put too many buttons or it’ll look badWednesday, October 31, 12
    • 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
    • Buttons An anchor tag with data-role=”button” will look like a button Any normal form button will automatically be convertedWednesday, October 31, 12
    • Button Icons data-icon attribute allows using icons on a buttonWednesday, October 31, 12
    • 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
    • Icon Positions data-iconpos determines the icon position possible values: right, top, bottom, notextWednesday, October 31, 12
    • Inline Buttons Dialog buttons are usually placed side-by- side This is called inline, and achieved via data-inline=”true”Wednesday, October 31, 12
    • Buttons DemoWednesday, October 31, 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • Split List Having two links in the same item creates a split listWednesday, October 31, 12
    • Inset Lists A list that is embedded in a page is called inset use data-inset=”true” to get the effectWednesday, October 31, 12
    • Exercise Implement the following home screenWednesday, October 31, 12
    • 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
    • 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
    • Bottom Nav Bar Put the above code in the footer to get bottom nav bar Recommended in standalone appsWednesday, October 31, 12
    • 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
    • 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
    • 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
    • Forms Mobile optimized controlsWednesday, October 31, 12
    • 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
    • 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
    • Refresh Form controls can be set programmatically Must call “refresh” to refresh the ui Use $(‘#fld-radio’).checkboxradio(“refresh”);Wednesday, October 31, 12
    • Form Elements Text Inputs Sliders Buttons Select Menu Submitting FormsWednesday, October 31, 12
    • 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
    • Slider input type=”range” creates a slider attributes: value, min, max refresh with .slider(‘refresh’);Wednesday, October 31, 12
    • 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
    • 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
    • Buttons - Radio Add data-type=”horizontal” to fieldset to get the horizontal radio buttons Refresh with .checkboxradio(‘refresh’);Wednesday, October 31, 12
    • CheckBoxesWednesday, October 31, 12
    • 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
    • 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
    • Submitting Forms AJAX is used to submit the forms No Ajax forms are created with data-ajax=falseWednesday, October 31, 12
    • Q & A - FormsWednesday, October 31, 12
    • 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
    • jQuery Mobile Page layout UI Controls jQM API ThemingWednesday, October 31, 12
    • jQM API Default configurations jQM Events Methods & UtilitiesWednesday, October 31, 12
    • 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
    • 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
    • jQM Events tap scrollstart taphold scrollstop swipe pageshow swipeleft pagehide swiperight pagecreate orientationchange pageinitWednesday, October 31, 12
    • 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
    • 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
    • Exercise (2) Modify previously implemented “switching cards” to use swipe gesturesWednesday, October 31, 12
    • jQuery Mobile Page layout UI Controls jQM API ThemingWednesday, October 31, 12
    • 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
    • Default ThemeWednesday, October 31, 12
    • 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
    • Q&AWednesday, October 31, 12
    • Thank You Ynon Perek ynonperek@yahoo.com ynonperek.comWednesday, October 31, 12