Embed Size (px)
Citation preview
jQuery Mobile part 2Gary
2014/1/8
Outline
• jQuery Mobile and JavaScript• Document Event
• Configuration
• Method and Utility
• Theme
• App Package
Document Event
• Unlike other jQuery projects, such as jQuery and jQuery UI, jQueryMobile automatically applies many markup enhancements as soon as it loads
• The sequence of document event• mobileinit
• ready
• load<script src="jquery.js"></script><script>$(document).bind('mobileinit', function(){
$.mobile.ajaxEnabled=false;});</script><script src="jquery-mobile.js"></script>
Configuration
• Global• UI
• AJAX
• Regionalization
• Touch overflow
• Page• Page loading
• Widget
Configuration - UI
• activeBtnClass string, default: "ui-btn-active"• The CSS class used for "active" button state.
• activePageClass string, default: "ui-page-active"• The CSS class used for the page currently in view or in a transition.
• minScrollBack integer, default: 250• Minimum scroll distance that will be remembered when returning to a page.
• defaultDialogTransition string, default: 'pop'• Set the default transition for dialog changes that use Ajax. Set to 'none' for no
transitions.
Configuration - AJAX
• When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if $.mobile.allowCrossDomainPages is set to true.
• jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for $.mobile.allowCrossDomainPages is set to false.
Configuration - Regionalization
• Hard-coded
//Global String$.mobile.loadingMessage = “loading”;$.mobile.pageLoadErrorMessage = “Error Loading Page”//Widget String$.mobile.page.prototype.options.backBtnText = “Back”;$.mobile.dialog.prototype.options.closeBtnText = “Close”;
//Global String$.mobile.loadingMessage = “cargando”;$.mobile.pageLoadErrorMessage = “Error Cargando Página”//Widget String$.mobile.page.prototype.options.backBtnText = “Atrás”;$.mobile.dialog.prototype.options.closeBtnText = “Cerrar”;
Deprecated
$( document ).bind( 'mobileinit', function(){$.mobile.loader.prototype.options.text = "loading";$.mobile.loader.prototype.options.textVisible = false;$.mobile.loader.prototype.options.theme = "a";$.mobile.loader.prototype.options.html = "";
});
Configuration– Touch Overflow
• A feature called touchOverflowEnabledis designed to leverage the upcoming wave of browsers that support overflow scrolling in CSS.
Page
Header
Footer
Content
<head>
<body>
<script>$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;});</script>
Deprecated
Scrolling area
Configuration - Page
• Configuration of page
• Configuration of loading page• Whenever loading external pages using AJAX, some default attributes are
applied
• Change loading page attributes once, not every time
$(document).bind(‘mobileinit’, function(){$.mobile.page.prototype.options.addbackbtn = true;$.mobile.page.prototype.options.backBtnTheme = “e”;$.mobile.page.prototype.options.headerTheme = “b”;$.mobile.page.prototype.options.footerTheme = “d”;
});
$.mobile.loadPage.defaults
$.mobile.changePage
Configuration - Widgets
• Every widget in jQuery Mobile has its own default configuration
• We can modify the option objects of widget’s prototype
• Every widget supports theme default attributes
$(document).bind(‘mobileinit’, function(){$.mobile.listview.prototype.filter = true;$.mobile.selectmenu.prototype.nativeMenu = false;
});
Method and Utility
• Data-*
• Page
• Platform
• Path
• UI
Method and Utility – Data-*
• $.fn.jqmData(), $.fn.jqmRemoveData()
• When working with jQuery Mobile, jqmData and jqmRemoveDatashould be used in place of jQuery core's data and removeDatamethods , as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).
• In jQuery
• In jQuery Mobile
$("div[data-role='page']")
$("div:jqmData(role='page')") $("div[data-"+ $.mobile.ns +"role='page']")
Method and Utility – Page
• $.mobile.activePage() • Reference to the page currently in view.
• $.mobile.changePage() • Programmatically change from one page to another. This method is used
internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.
$.mobile.changePage(“external.html”);
$mobile.changePage($(“#pageId”));
Method and Utility – Page
• The second non-essential argument
$.mobile.changePage($(“#page2”), {transition: “slide”,reverse: true
});
<script>function viewProduct(idProduct){
$.mobile.changePage(“productdetail.php”, {method: “post”,data: {
action: ‘getproduct’,id: idProduct
},transition: “fade”
});}</script>
Method and Utility – Platform
• The framework provides some platform utilities to web development
function clickbtn2(){$gradeA2 = $.mobile.gradeA();$getScreenHeight2 = $.mobile.getScreenHeight();$getGradeA = $("#show").val("id");$getGradeA.html($getScreenHeight2);if ($gradeA2){alert("it's true");}}
Method and Utility – Platform
• $.mobile.path.parseUrl() • Utility method for parsing a URL and its relative variants into an object that makes accessing the
components of the URL easy. When parsing relative variants, the resulting object will contain empty string values for missing components (like protocol, host, etc).
// Parsing the Url below results an object that is returned with the// following properties:// obj.href: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content// obj.hrefNoHash: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread// obj.hrefNoSearch: http://jblas:[email protected]:8080/mail/inbox// obj.domain: http://jblas:[email protected]:8080// obj.protocol: http:// obj.authority: jblas:[email protected]:8080// obj.username: jblas// obj.password: password// obj.host: mycompany.com:8080// obj.hostname: mycompany.com// obj.port: 8080// obj.pathname: /mail/inbox// obj.directory: /mail/// obj.filename: inbox// obj.search: ?msg=1234&type=unread// obj.hash: #msg-contentvar obj = $.mobile.path.parseUrl(http://jblas:[email protected]:8080/mail/inbox?msg=1234);
Method and Utility - UI
• $.mobile.silentScroll() • Scroll to a particular Y position without triggering scroll event listeners.
• $.mobile.showPageLoadingMsg()• Show the page loading message, which is configurable via $.mobile.loadingMessage
• $.mobile.hidePageLoadingMsg()• Hide the page loading message, which is configurable via $.mobile.loadingMessage.
$.mobile.showPageLoadingMsg();setTimeout(function() {
$.mobile.hidePageLoadingMsg();}, 2000);
$.mobile.loading('show');setTimeout(function() {
$.mobile.loading(‘hide');}, 2000);
Deprecated
Theme
• The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements:
• CSS3 properties• rounded corners, box and text shadow and gradients • lightweight and reducing server requests.
• Multiple color "swatches" — each consisting of • a header bar, content body, and button states• make richer designs possible.
• Open-ended theming• 26 unique swatches per theme
• CSS3 gradients• reduce file size and number of server requests.
• Simplified icon set• reduce image weight.
Theme
• The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.
• If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize contrast between the both.
Theme
swatch color selector
Palette pane
Preview Pane
Theme
Theme
Theme
<link rel="stylesheet" href="css/themes/test.css" /><link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />…<div data-role="page" id="pagetwo" data-theme="c">
App Package
• Native app• Installed through an application store (such as Google Play or Apple’s App Store)• Developed specifically for one platform• Can take full advantage of all the device features
• Web app• Not real apps• Websites that, in many ways, look and feel like native applications.• Run by a browser and typically written in HTML5
• Hybrid app• Part native apps, part web apps.• Live in an app store• Rely on HTML being rendered in a browser
App Package – Native App
• Pros• Be able to access all the features of the phone (GPS, camera, etc.)• Better run speed, performance and overall user experience• Support for offline work• Rich graphics and animation• Can be found easily at app store• The app icons are shown on the screen• Download an app need to pay
• Cons• More limits (specific operating system)• Unknown deployment time (app store approval process)• Content Restrictions (app store restrictions)• User must update manually
App Package – Web App
• Pros• Wide range of devices (almost all smart phones)• Low development costs• Deploy quickly and easily• No content restrictions• Users always access to the latest version
• Cons• Poorer performance and user experience• Poor graphics and animation support• Does not apply to the app store• Have to connect with Internet• Restrict some functions (GPS, camera, etc.)
App Package – Hybrid App
• Pros• Support multi-platform access
• Phone functions are accessible
• Suitable for applications store
• Partial support offline
• Cons• Unknown deployment time
• User experience is not as good as using native apps
• Not very mature technology
App Package
• Phonegap• a free and open source framework that allows you to create mobile apps
using standardized web APIs for the platforms you care about.
• appMobi• Cross platform push messaging, app promotion, in-app purchasing, integrated
analytics and more, for all applications and deployed in any environment.
App Package
• Need adobe or github account
App Package
App Package
• Run on Android phone
Conclusion
• PhoneGap is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores.
• Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser).
