• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
04 jQuery Mobile
 

04 jQuery Mobile

on

  • 2,755 views

 

Statistics

Views

Total Views
2,755
Views on SlideShare
2,434
Embed Views
321

Actions

Likes
2
Downloads
74
Comments
0

6 Embeds 321

http://mobileweb.ynonperek.com 172
http://ynonperek.com 132
http://www.ynonperek.com 7
http://localhost 6
http://www.linkedin.com 2
http://amplytix.com 2

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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