Download to read offline
Uploaded byGary Yeh
JQuery mobile
jQuery Mobile is a JavaScript framework that makes it easier to develop mobile web sites and apps. It allows developers to use standard HTML and CSS to build interfaces that work across various mobile device platforms. Some key features include automatically adapting layouts for different screens, supporting touch and mouse events, and providing common mobile widgets like sliders and flip switches. Navigation between pages is handled using internal links, and jQuery Mobile can fetch and integrate external pages using AJAX to provide a native-like experience.
More Related Content
JQuery mobile
- 1. jQuery Mobile part1 Gary 2013/11/19
- 2. Outline • Introduction ofJQuery Mobile • Build JQuery Mobile Web Page • JQuery Mobile Widgets • Navigation of jQuery Mobile
- 3. Introduction of JQueryMobile • 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
- 4. Introduction of JQueryMobile • 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
- 5. Introduction of JQueryMobile • 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
- 6. Introduction of JQueryMobile • 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/
- 7. 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
- 9. Build JQuery MobileWeb 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>
- 10. Build JQuery MobileWeb 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
- 11. Build JQuery MobileWeb 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">
- 12. Build JQuery MobileWeb 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
- 13. Build JQuery MobileWeb 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>
- 14. Build JQuery MobileWeb Page • Page structure
- 15. JQuery Mobile Widgets •Text Input <input type="text" name="name" id="basic" value="" />
- 16. 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
- 17. 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>
- 18. 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>
- 19. Navigation of jQueryMobile • The navigation of pages is achieve by the standard a element. JQuery Mobile would handle it • The hyperlinks is classified into 4 types • Internal links • External links • Absolute external links • Mobile special links • Call or send SMS
- 20. Navigation of jQueryMobile • 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>
- 21. Navigation of jQueryMobile Header Footer Content <head> <body> Page Header Footer Content Page Header Footer Content Page Header Footer Content Page →#second ←back
- 22. Navigation of jQueryMobile
- 23. Navigation of jQueryMobile • 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
- 24. Header Footer Content Page →#second Navigation of jQueryMobile Header Footer Content Page Header 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
- 25. Navigation of jQueryMobile • External links • Destination must be • A jQuery Mobile document • Same domain • One page document • End with Slash(/)if URL is point to a directory
- 26. Navigation of jQueryMobile • 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>
- 27. Future Work • jQueryMobile and JavaScript • Themes • A Complete Webapp