jquery mobile
TRANSCRIPT
jQuery Mobile part 1Gary
2013/11/19
Outline
• Introduction of JQuery Mobile
• Build JQuery Mobile Web Page
• JQuery Mobile Widgets
• Navigation of jQuery Mobile
Introduction of JQuery Mobile
• jQuery• Extremely simplified syntax
• Powerful processing capabilities
• Cross-browser
• Problem• On Mobile device, there’re differences between browser and operating system
• jQuery Mobile• Web application programmers can use the same technique to produce a set
of web applications across all mobile devices
• supports HTML5 data-bound label
Introduction of JQuery Mobile
• To develop a native applications(Native App) cross mobile devices is not easy
• Web page is a better way to lift restrictions on the use of different mobile devices
• Web application interface at past is not suitable for today’s mobile devices• Screen is too large • Too much content to load• Browsing way
• jQuery Mobile hopes to unify the mobile device user interface system
Introduction of JQuery Mobile
• Main feature• Use jQuery core
• Automatic switching layout
• Support mouse and touch events
• WAI-ARIA
• Theme system
• Support for ASP.NET MVC
• Support most mobile devices
• Harmonization of frames
• Variety of UI
Introduction of JQuery Mobile
• One of jQuery Mobile’s feature is “automatically reduced capacity”
• Automatically turn off the function that devices don’t support
• Due to mobile platforms and browser versions diverse and constant innovation, it is suggested that developers read the support list
• http://jquerymobile.com/gbs/
Environment
• Development tools• Aptana studio 3
• Test tools• Firefox addons – User Agent Switcher
• A large, regularly updated import list of user agents is available from http://techpatterns.com/forums/about304.html
• You can also use • Windows Phone Emulator
• Opera Mobile Emulator
• MobiOne Studio
Build JQuery Mobile Web Page
• Use library via two ways
• 1. Download library from jQuery and jQuery Mobile official website
• 2. Use CDN
<link rel="stylesheet“ href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Build JQuery Mobile Web Page
• CDN
• Content Delivery Network or Content Distribution Network
• A large distributed system of servers deployed in multiple data centers across the Internet
• The goal of a CDN is to serve content to end-users with high availability and high performance
Build JQuery Mobile Web Page
• Setting screen size
• viewport• The area filled with page
• width=device-width• Visible area is the same width as screen of mobile device
• initial-scale=1.0• The initial size of the screen
• user-scalable=no• Let user can’t change scale
<meta name="viewport" content="width=device-width; initial-scale=1.0, user-scalable=no">
Build JQuery Mobile Web Page
• JQuery Mobile use unobtrusive way to define the content of web app
• Labeling through standard HTML code to define the “roles”
• Why jQuery Mobile can do this? Because HTML5 provides custom data attributes function, without affecting the markup legitimacy
• Even on browser which is not compatible with HTML5, web app can work without serious problem
Build JQuery Mobile Web Page
• Page structure
<div data-role="page"><div data-role="header">
Here is header</div> <div data-role="content">
Here is content</div> <div data-role="footer">
Here is footer</div>
</div>
Page
Header
Footer
Content
<head>
<body>
Build JQuery Mobile Web Page
• Page structure
JQuery Mobile Widgets
• Text Input
<input type="text" name="name" id="basic" value="" />
JQuery Mobile Widgets
• Input Slider
<input type="range" name="slider" id="slider-0"value="25" min="0" max="100" step="5" />
Firefox Fennec 10.0.1(maemo arm)
Opera
JQuery Mobile Widgets
• Flip Switch<select name="slider" id="flip-a" data-role="slider">
<option value="off">Off</option><option value="on">On</option>
</select>
JQuery Mobile Widgets
• Radio Button
<fieldset data-role="controlgroup"><legend>Choose a pet:</legend><input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /><label for="radio-choice-1">Cat</label><input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /><label for="radio-choice-2">Dog</label><input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" /><label for="radio-choice-3">Hamster</label><input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" /><label for="radio-choice-4">Lizard</label>
</fieldset>
Navigation of jQuery Mobile
• The navigation of pages is achieve by the standard a element. JQueryMobile would handle it
• The hyperlinks is classified into 4 types• Internal links
• External links
• Absolute external links
• Mobile special links• Call or send SMS
Navigation of jQuery Mobile
• Internal links
• A jQuery Mobile document can contain many pages(called multipage document)
• Pages are children element of the body element<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="header" >Here is header 1
</div> <div data-role="content">
<p>Here is content 1</p><p>go to <a href="#page2">page2</a></p>
</div></div>
Navigation of jQuery Mobile
Header
Footer
Content
<head>
<body> Page
Header
Footer
Content
Page
Header
Footer
Content
Page
Header
Footer
Content
Page
→#second
←back
Navigation of jQuery Mobile
Navigation of jQuery Mobile
• External links• If we don’t want to put pages in the same document, or if we want to
dynamically generate content(like using PHP or other server’s code)
• Pages must exist in the same domain
• jQuery Mobile framework would use AJAX to request the other document, and parse its content. Prefetch the page to the current DOM(Document Object Model)
• To those browsers which is incompatible with this framework, the external links work as HTML links. It’s the power of progressive enhancement
Header
Footer
Content
Page
→#second
Navigation of jQuery Mobile
Header
Footer
Content
PageHeader
Footer
Content
Page
Header
Footer
Content
Page Header
Footer
Content
Page
Header
Footer
Content
Page
Header
Footer
Content
Page←back
Header
Footer
Content
<head>
<body> Page
→#second
Navigation of jQuery Mobile
• External links
• Destination must be • A jQuery Mobile document
• Same domain
• One page document
• End with Slash(/)if URL is point to a directory
Navigation of jQuery Mobile
• Absolute external links
• Sometimes we want to link to the other website, or documents which aren’t belongs to jQuery Mobile
• Regard the link as absolute external link by• Define clearly by add data-rel=“external”
• The links are not in the same domain
• There is no back button in the new page
• The new page would have a new jQuery Mobile instance
<a href=http://jquerymobile.com/ data-rel=“external”>jquerymobile</a>
Future Work
• jQuery Mobile and JavaScript
• Themes
• A Complete Webapp