jQuery Mobile and JavaScript

jQuery Mobile part 2
Gary
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, jQuery
Mobile 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 touchOverflowEnabled
is 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 jqmRemoveData
should be used in place of jQuery core's data and removeData
methods , 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:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
// obj.hrefNoHash: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
// obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
// obj.domain: http://jblas:password@mycompany.com:8080
// obj.protocol: http:
// obj.authority: jblas:password@mycompany.com: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-content
var obj = $.mobile.path.parseUrl(http://jblas:password@mycompany.com: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
<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
• 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).

jQuery Mobile and JavaScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to jQuery Mobile and JavaScript (20)

Recently uploaded (20)

jQuery Mobile and JavaScript