Started with jQuery Mobile •Grab the code •Getting up and running •Single-page template •Multi-page template •Ajax navigation •Transitions •Buttons •Header buttons •Exercise #1: Creating a Disney mobile site ! ! •Segmented control •Toolbars •Tab bars •Popups •Lists •Basic list •Inset list •List dividers •List with thumbnails •List with icons •List with split buttons •List badges (count bubbles) •List filtering •Fixed lists •Dynamic lists •Exercise #2: Creating a list of Disney Parks •Forms •Select menu •Radio buttons •Checkboxes •Flipswitch •Switch •Grids •Basic grids •Multi-row grids •Uneven grids Collapsible content blocks Collapsible content sets •Themes •List example •Themeroller •Theme defaults and inheritance •Exercise #3: Creating a custom theme ! •Configuring jQuery Mobile •jQuery Mobile methods •jQuery Mobile events diagram •What’s new in jQuery Mobile 1.3 •Exercise #4: Sliding drawer & responsive grid •Responsive Patterns •Performance tips •Debugging •Maps integration •Client-side Twitter integration •Backbone and Require.JS •PhoneGap •Bar and Pie Charts
The sequence of the CSS and JavaScript files must appear in the order as listed in template.html. The order is necessary to properly initialize the dependencies before they are referenced by jQuery Mobile.
can asynchronously load pages into the DOM by adding the data-prefetch=”true” attribute on any link. The prefetched links will get loaded in the background after the active page is shown. <body> ! <div data-role="header"> <h1>Prefetch</h1> </div> ! <a href="contact.html" data-prefetch="true">Contact Us</a> ! </body>
recommended to leverage the single-page model and dynamically append popular pages to the DOM in the background. We can achieve this behavior by adding the data-prefetch attribute to any link we want to dynamically load: ! <a href=”page2.html” data-prefetch=”true”></a> ! This hybrid approach allows us to selectively choose which links we want to load and cache. Again, this pattern is only recommended for pages that are accessed very frequently because this behavior will trigger an additional HTTP request to load the page dynamically Book: p20
all pages are loaded via Ajax. This behavior can be disabled: $.mobile.ajaxEnabled = false; NOTE: The “from” and “to” page will both be cached in the DOM to enable transitions.
will not be used for situations where you load an external link: <!-- Ajax navigation will be ignored when loading a page with a rel="external" or target attribute --> <a href="multi-page.html" rel=”external”>Home</a> <!-- Ajax navigation will be ignored --> <a href="multi-page.html" target=”_blank”>Home</a> Under these conditions, normal HTTP request processing will occur. Furthermore, CSS transitions will not be applied. As mentioned earlier, the framework is able to achieve smooth transitions by dynamically loading the "from" and "to" pages into the same DOM and then applying a smooth CSS transition. Without Ajax navigation the transition will not appear as smooth and the default loading message will not be shown during the transition.
linking to a page that contains multiple pages, you must add rel="external" to its link. <!-- Must include rel="external" when linking to multi-page documents --> <a href="multi-page.html" rel="external">Home</a> <!-- May optionally use the target attribute --> <a href="multi-page.html" target="_blank">Home</a> This will perform a full-page refresh. It is required because jQuery Mobile cannot load a multi-page document into the DOM of an active page. It would cause a namespace collision with how jQuery Mobile leverages the URL hash (#). jQuery Mobile leverages the hash value to identify internal pages within a multi-page document. However, there is a plugin available to make this possible: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
set a “backward” transition by adding data-direction=”reverse” to your links. For instance, a reverse transition is applied by default when transitioning back in history. However, if you have a “home” link on your header you will need to apply the data-direction=”reverse” attribute otherwise the default “forward” effect would occur: ! <a href=”home.html” data-direction=”reverse” class=”ui-btn ui-btn-right ui-icon- home ui-btn-icon-notext”></a> <a href="#" class=“ui-button" data-transition="slide">slide</a>
ch4/icon-buttons-standard.html • ch4/icon-only-buttons.html • ch4/icon-positioning.html • ch4/icon-buttons-custom.html • ch4/dynamic-buttons.html (optional) Book: p64 TIP: If you want buttons to sit side-by-side and consume the entire width of the screen, us a 2-column grid. We will explore flexible grid layouts in more detail tomorrow. TIP: The image src for the custom button icon was loaded with the data URI scheme. This can be a performant alternative to loading small images externally because we eliminate an HTTP request: background: url(data:image/png;base64,iVBORw0KG...);
want to disable the automatic initialization of buttons or any other control, you may add the data-role=”none” attribute to the element and jQuery Mobile will not enhance the control: <button data-role=”none”>Button element</button> TIP: To fix a truncated header see ch3/truncation-fixed.html
above. 2) Link the “Disney Parks” button to the “Disney parks coming soon...” page on the right using a “slide” transition. 3) Add a home icon in the header that links (reverse transition) back to the home page. 4)The solution for the exercise can be found at bonus/exercises/ex1/index.html. Exercise #1 - Disney mobile site 40
Mobile is an excellent framework for building applications that display responsively across mobile, tablet, and desktop browsers. While the header and footer components provide a "native" feel on mobile devices they translate poorly when viewed on the desktop. If your jQuery Mobile application is targeted for a diverse set of browser sizes you may prefer to omit the header and footer components. As an alternative, you may find it more beneficial to add custom header or footer markup directly within the content section.
image icons are available in bonus/ exercises/ex2/images. 2)The solution for the exercise can be found at bonus/exercises/ex2/index.html. Exercise #2 - Disney Parks List 55
can be found at http:/ /dev.jtsage.com/jQM-DateBox2/ <input name="mydate" type="date" data- role="datebox" data-options='{ "mode":"calbox", "themeDateToday":"a", "themeDatePick":"b", "useFocus":true, "afterToday":true, // blackout past days "maxDays":365}'> // blackout days > 365 TIP: The original size of the day buttons were 30 X 36 px. I increased them to 40 X 40 px to make them more touch friendly.
Prefer native select menus for best performance. TIP: Prefer custom select menus when you want your users to select multiple otptions (select-menu-custom.html).
radio buttons or checkboxes will wrap if their container is not wide enough to display them on a single row. You may reduce their font size if wrapping is an issue: .ui-controlgroup-horizontal .ui-radio label {font-size: 13px !important;}
labels in an accessible way attach the ui-hidden-accessible style to the element. For instance, we applied this technique to the search field. This will gracefully hide the label while preserving 508 compliance: ! <label for="search" class="ui-hidden-accessible">Search</label> <input type="search" id="search" placeholder="Search" />
forms it is recommended to semantically associate each form field with its corresponding label. The label's for attribute and the input's id attribute establish this relationship: <label for=”first-name”>First name:</label> <input type=”text” name=”first-name” id=”first-name” value=”” /> This association creates 508-compliant applications that are accessible to assistive technologies. Accessibility is often required by government or state agencies. You can test your mobile application for compliance with the WAVE3 tool (see http:/ /wave.webaim.org/).
are a performant alternative to images because they consume zero HTTP requests and their payload is only a few characters of text. Unfortunately, Emoji icons are currently only supported in iOS. Data URIs are a platform neutral alternative.
content blocks have several advantages when compared to an inline page structure. First, we can collapse content into segmented groups to make them all visible within a single view. And secondly, our users will be more efficient because we have eliminated scrolling from the user experience.
plan to style your entire jQuery Mobile application with custom themes it is recommended to use the structure-only CSS file from jQuery Mobile’s download site (http:/ /jquerymobile.com/download). This is a lightweight alternative for applications that do not need the default themes and it simplifies the management of the custom themes.
default, the minimum height of the content container will only stretch the height of the components inside. This is an issue when the theme of the content is different than the theme of its page container. We can remedy this issue with CSS. For instance, we can set the minimum height of our content container to the height of the screen (see min-height.html): .ui-content { min-height:inherit; }
(delete buttons). When complete, the solution should appear as shown above. In Themeroller, complete the following tasks: 1) Import the existing custom-theme.css file. 2) Create a new red color for the “c” swatch. 3) Export the new theme, import it into your exercise and set the new red swatch for all dangerous buttons. 4) The CSS solution for the exercise can be found at bonus/exercises/ex3/css/custom-theme- solution.css Exercise #3 - Creating a custom theme 73
$(document).on("mobileinit", function(){ $.mobile.ajaxEnabled = false; // Disable ajax $.mobile.defaultPageTransition = "slide"; $.mobile.loader.prototype.options.text = "Loading..."; }); TIP: To load scripts dynamically by page see bonus/config/js/load-scripts-dynamically.js TIP: To manually remove cached pages from the DOM see bonus/config/js/backbone.js
The drawer will contain the navigational menu for the site. 2)Add a two-column responsive grid to your existing Disney home page. These two blocks will contain promotional text with an optional image. 3)The solution for the exercise can be found at bonus/exercises/ex4/index.html. Ex #4 - Sliding drawer & responsive grid 86
view all the data elements that are available from Twitter's search API, launch this string in your browser: “http:/ /search.twitter.com/ search.json?q=xmen”. This is the basic search API where the value of the “q” parameter is our searchable keyword(s). In this case, we are searching Twitter for any tweets with the keyword “xmen” in them.
sites have a public API for accessing their data: Twitter: http:/ /dev.twitter.com LinkedIn: http:/ /developer.linkedin.com/rest Facebook: http:/ /developers.facebook.com
backbone and require.js for client-side MVC integration. • How to use the multi-page template to load all pages in a single request. • How to load data from Twitter's Restful API. • How to cache the Twitter resultset in localStorage. Backbone and Require.JS 104
bbroulik
kkamegawa
kongmingstrap
cybozuinsideout
rayuron
yuj1osm
axelmizu
nenonaninu
murashotaro
naoki_0531
nullpo_head
miichan
tomoki10
skipperchong
addyosmani
michaelherold
garrettdimon
brad_frost
cassininazir
speakerdeck
phodgson
rocio
irinanazarova
tanoku
![Training @BradBroulik BradBroulik.blogspot.com [email protected] Express Slides: bit.ly/training-jqm](https://files.speakerdeck.com/presentations/1b2c68403a75013064b61231391e4167/slide_0.jpg){kind=link}
