This is a Presentation about jQueryMobile.
http://www.slideshare.net/EZoApp/jquery-mobile-introduction-demo-on-ezoapp
Sample description of each element has a corresponding, you can tap or drag structural elements observed in the sample code inside, and learning on WYSIWYG~ ^ _ ^
( Demo on EZoApp, click the preview button and enjoy it~ )
6. Features
Powerful Ajax-powered
navigation system
HTML5 Markup-driven
configuration
Built on jQuery core
Responsive design
Progressive enhancement
Touch and mouse
event support
Lightweight size
Compatible with all major mobile,
tablet, e-reader & desktop platforms
Unified UI widgets
13. <div id="page1" data-role="page">
<div role="main" class="ui-content"></div>
</div>
<div id="page2" data-role="page">
<div role="main" class="ui-content"></div>
</div>
<div id="page3" data-role="page">
<div role="main" class="ui-content"></div>
</div>
JQuery Mobile is usually a multiple page
However, only one of which is displayed,
page id must be separated
page
15. â Use <href>, switch directly to the specified "Page Id"
â Using "data-transition" set the transition effect
â Set data-rel = "back" to return with the same effect
page
transition
<a href="#pageID" data-transition="ææ"></a>
â You can also use javascript to do the switch
â $.mobile.changePage('#PageID');
â $.mobile.changePage('#PageB' , {'transition':'Effect'} );
26. The data-* attributes is used to store custom data private to
the page or application.
The data-* attributes gives us the ability to embed custom
data attributes on all HTML elements.
jQuery Mobile data attribute
http://api.jquerymobile.com/data-attribute/
35. Slide
Panel
<div id="left-menu" data-role="panel" data-position="left">
left menu
</div>
<div id="right-menu" data-role="panel" data-
position="right">
right menu
</div>
It is like App slider menu
example:
http://goo.gl/jM6sU3
37. Events
Page
(function (){
$(document).on( "pageinit" , "#pageID" , function(){
// Page first loads will be executed
});
})()
(function (){
$(document).on( "pageshow" , "#pageID" , function(){
// Will be executed after the page is displayed
});
})()
http://goo.gl/0Zwgnd
38. $('#id').on('tap', function () {});
$('#id').on('taphold', function () {});
$('#id').on('swipe', function () {});
$('#id').on('swipeleft', function () {});
$('#id').on('swiperight', function () {});
Five kinds of pages touch events
http://goo.gl/S5bJNq
Events
Touch