is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build...
Transcript of is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build...
![Page 1: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/1.jpg)
jQuery Mobile
is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices
provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions
![Page 2: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/2.jpg)
jQuery Mobile
super easy to useuses a declarative stylesimilar to writing regular HTMLbuilds on HTML / JQuery / jQuery UIStarted in August 2010has lightweight codehas a flexible, easily theme-oriented design
![Page 3: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/3.jpg)
jQuery Mobile Gallery
All pages can be stored in a single HTML file– each mobile screen is represented by a "div" element with
attribute data-role="page”– each mobile screen has a “div” with data-role="content” – screens (pages) can have "header" and "footer”
jQueryMobile relies on attributes data-role=“page”
#ID is used for navigation between screens (pages)
![Page 4: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/4.jpg)
jQuery Mobile
• Handles navigation for mobile sites/apps
• Offers mobile-focused widgets, toolbars, page transitions, effects…Powerful CSS-based theme engine
• Uses HTML5 custom data-* attributes to specify structure of internal pages
![Page 5: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/5.jpg)
jQuery Mobile
pagescontentheaderfooter
page transitionsslide, slideup, slidedown, pop, fade, flip, etc.
lists (collapsible lists)formstables (columns)eventsnavigation bars (accordions)
![Page 6: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/6.jpg)
jQuery Mobile
All pages can be stored in a single HTML file– each mobile screen is represented by a "div" element with
attribute data-role="page”– each mobile screen has a “div” with data-role="content” – screens (pages) can have "header" and "footer”
jQueryMobile relies on attributes data-role=“page”
#ID is used for navigation between screens (pages)
![Page 7: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/7.jpg)
jQuery Mobile
automatically takes care of internal navigation using properly structured pages with data-role attributes
Pages can be linked:• internally with #page1 and #page2• externally (page3.html)
Examples: JQM8_pages.html & page3.html– page3.html is linked externally– jQuery Mobile extracts the first data-role="page" element from it
and injects that on screen
![Page 8: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/8.jpg)
jQuery Mobile
<section data-role="page" id="page1"><header data-role="header"><h1>This is page one</h1>
</header><section data-role="content"><p><a href="#page2">Link to page 2</a></p>
</section><footer data-role="footer"><p>footer</p>
</footer></section>
![Page 9: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/9.jpg)
http://demos.jquerymobile.com/1.4.5/
![Page 10: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/10.jpg)
jQuery Mobile – link to the library and the CSS
<!DOCTYPE html> <html> <head>
<title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" /><script src="http://code.jquery.com/jquery-[version].min.js"></script><script src="http://code.jquery.com/mobile/[version]/jquery.mobile-
[version].min.js"></script>
</head>
![Page 11: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/11.jpg)
jQuery Mobile
<body> <div data-role="page”>
<div data-role="header"><h1>My Title</h1>
</div><!-- /header à<div data-role="content">
<p>content should be here</p></div><!-- /content à
<div data-role="footer"><p>footer</p>
</div><!-- /footerà</div><!-- /page à</body></html>
![Page 12: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/12.jpg)
jQuery Mobile
<section data-role="page" id="page1"> internal linking<header data-role="header"><h1>This is page one</h1>
</header><section data-role="content"><p><a href="#page2">Link to page 2</a></p>
</section><footer data-role="footer"><p>footer</p>
</footer></section>
<section data-role="page" id="page2"><header data-role="header"><h1>This is page two</h1>
</header><section data-role="content"><p><a href="#page1">Link to page 1</a></p>
</section>
![Page 13: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/13.jpg)
jQuery Mobile Page Transitions
Page TransitionsSlideSlideupSlidedownPopfadeflip
<li><a href=“2.html" data-transition="flip”>example page</a></li>
![Page 14: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/14.jpg)
jQuery Mobile Page Transitions
Some browsers have issues with jQM page transitions
Workaround:
.ui-page { -webkit-backface-visibility: hidden; }
![Page 15: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/15.jpg)
jQuery Mobile Events- JQM8_events.html
Touch eventstaptapholdswipeswipeleftswiperight
Orientation change eventorientationchange
Page show/hide events pagebeforeshowpagebeforehidepageshowpagehide
Page initialization events pagebeforecreatepagecreate
![Page 16: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/16.jpg)
jQuery Mobile Resources
Page TransitionsSlideSlideupSlidedownPopfadeflip
<li><a href=“2.html" data-transition="flip”>example page</a></li>
![Page 17: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/17.jpg)
jQuery Mobile Design
User Interface SystemMobile Web ApplicationsHTML5 based
One single app or siteAll popular mobile device platformsTested on a large set of devices and platforms
![Page 18: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/18.jpg)
jQuery Mobile Design
easy to useSemantic markupUse regular HTML with data--* attributes
flexibleThemesCSS stylesScripting
![Page 19: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/19.jpg)
jQuery Mobile
JQM_datarolls.html
simple page
header - data-role="header"
Footer - data-role="footer"
Content - data-role="content"
![Page 20: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/20.jpg)
jQuery Mobile
JQM3_pages.html
Dialog - data-rel="dialog”
Back button - data-add-back-btn="true”
![Page 21: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/21.jpg)
jQuery Mobile
JQM4_listviews.html
Listviews typically used for navigation between pages<ul> and <li> elements
Listviews- data-role="listview”inset appearance: data-inset="true”data-filter="true”
Listheaders– data--divider--theme (on the <ul> element)Divider - data-role="divider”<span class="ui-li-count">7</span>
![Page 22: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/22.jpg)
jQuery Mobile
JQM5_buttons.html
Buttons data-role="button" data-inline="true"data-theme="a”data-icon="gear
<div data-role="controlgroup" data-type="horizontal">
![Page 23: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/23.jpg)
jQuery Mobile
JQM6_formelements.htmlForms
regular HTML5 Formsstyling– data-role="fieldcontain”
Group a set of controls– data-role="controlgroup"
![Page 24: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/24.jpg)
jQuery Mobile
JQM6_formelements.htmlFormsSearch - <input type="search" name="search" id="search" value="" /Textfield -<input type="text" name="name" id="plain"
placeholder="Hidden Label"/>Radio button - <input type="radio" name="radio" id="radio1"
value="1" checked="checked" />Checkbox - <input type="checkbox" name="checkbox-1"
id="checkbox-1" />Slider - <input type="range" name="slider" id="slider" value="75"
min="0" max="100" step="5" data-highlight="true" data-mini="true" />
![Page 25: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/25.jpg)
jQuery Mobile
JQM6_toolbars.html
Navigation bar - data-role="navbar”
Transitions between pagesdata-transition="slide”Different transition types (pop, slide, etc)
![Page 26: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/26.jpg)
jQuery Mobile
JQM7_content_formatting.html
Collapsible menu<div data-role="collapsible"><h3>Header</h3><p>Content</p></div>
![Page 27: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/27.jpg)
jQuery Mobile
Navigation
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions.
AJAX – Asynchronous JavaScript and XMLClient side technique that allows the browser to make a request to the server “behind the scenes” without changing the URL of the page and without blocking the UI while loading.
![Page 28: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/28.jpg)
jQuery Mobile
Hijax
jQuery Mobile makes AJAX requests between page navigations, requesting the whole target HTML document as plain text for later parsing while still having a normal HTML link in the markup.
This pattern is known as Hijaxit includes the use of progressive enhancement techniques to make it work
![Page 29: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/29.jpg)
jQuery Mobile transitions
http://demos.jquerymobile.com/1.4.5/transitions/
test
try
![Page 30: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/30.jpg)
jQuery Mobile Lab
Comes with implemented stylesDesigners have their own styles
Goal: implement scripting in our custom web pageswithout changing our styles
![Page 31: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/31.jpg)
Sliders
only one page is visible Touch in order to move between pages
![Page 32: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/32.jpg)
Sliders
Swiperwww.idangero.us/swiper/
![Page 33: is the easiest way to build sites and apps that are …jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices](https://reader033.fdocuments.net/reader033/viewer/2022053001/5f05bfe17e708231d414839e/html5/thumbnails/33.jpg)
Sliders
Swiperwww.idangero.us/swiper/ > download
Test
Try