jquery mobile introduction ( demo on ezoapp )
DESCRIPTION
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~ )TRANSCRIPT
What is jQuery Mobile？
jQuery + Mobile
jQuery Mobile
=
So simple, we all know it!
But, What is jQuery Mobile? Can we eat it?
Features
Powerful Ajax-powered navigation system
HTML5 Markup-driven configuration
Built on jQuery core
Responsive designProgressive enhancement
Touch and mouse event support
Lightweight size
Compatible with all major mobile, tablet, e-reader & desktop platforms
Unified UI widgets
However, I heard that jQuery Mobile is fat
jQuery Mobile Version 1.4.3Significantly improved performance than ever
Let’s Learn jQuery Mobile！
Let’s GO !
<link rel="stylesheet" href="jquery.mobile.min.css" /> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>
jQuery Mobile preloaded program
<head> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.js"></script></head><body>
<div data-role="page"> <div data-role="header"> <h1>header</h1> </div>
<div class="ui-content"> <p>content</p> </div> <div data-role="footer"> <h4>footer</h4> </div></div> </body>
First step
<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 pageHowever, only one of which is displayed, page id must be separated
page
★ 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
pagetransition
<a href="#pageID" data-transition="效果 "></a>
★ You can also use javascript to do the switch★ $.mobile.changePage('#PageID');★ $.mobile.changePage('#PageB' , {'transition':'Effect'} );
● default● fade● flip● flow● pop● slide● slidefade● slideup● slidedown● turn● none
<a href="#pageID" data-transition="effect"></a>
example：http://goo.gl/xwIR0F
pagetransition
Button<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
Use the "class" generate button style
<a href="#" class="ui-btn ui-btn-inline">Anchor</a><button class="ui-btn ui-btn-inline">Button</button>
ButtonICON
<button class="ui-btn ui-btn-icon-left ui-icon-action">action</button><button class="ui-btn ui-btn-icon-left ui-icon-alert">alert</button><button class="ui-btn ui-btn-icon-up ui-icon-arrow-d">arrow-d</button><button class="ui-btn ui-btn-icon-right ui-icon-arrow-d-l">arrow-d-l</button><button class="ui-btn ui-btn-icon-bottom ui-icon-arrow-d-r">arrow-d-r</button><button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
example：http://goo.gl/TQxnvm
Use the "class" generate button style
Grid<div class="ui-grid-b">
<div class="ui-block-a">Block A</div><div class="ui-block-b">Block B</div><div class="ui-block-c">Block C</div></div>
Use "class" generates Grid, you can put the Grid in Grid
ui-grid-a : 2 columns， ui-grid-b： 3 columnsui-grid-c： 4 columns， ui-grid-d： 5 columns
example:http://goo.gl/AizA2f
Input <div class="ui-field-contain"> <label for="#text_id">Title</label> <input type="text" name="" id="#text_id"></div><div class="ui-field-contain"> <label for="#textarea_id">Title</label> <textarea name="" id="#textarea_id"></textarea></div><div class="ui-field-contain"> <label for="#search_id">Title</label> <input type="search" name="" id="#search_id"></div>
example:http://goo.gl/XOXJPH
theme Use "class" have different themes按鈕：<a href="#" class="ui-btn ui-btn-a">Theme A</a><a href="#" class="ui-btn ui-btn-b">Theme B</a>navbar：<div data-role="navbar"> <ul> <li><a data-theme="a">Theme A</a></li> <li><a data-theme="b">Theme B</a></li> </ul></div>
example:http://goo.gl/E8QcW9
Some examples of the above, we see that "class" is very important
You must think
Of course ! The second is also very important: data attribute
2
What is data attribute？
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 attributehttp://api.jquerymobile.com/data-attribute/
Header&
Footer
<div data-role="header" data-position="fixed"> <h1>header</h1></div>
<div data-role="footer" data-position="fixed"> <h4>footer</h4></div>
example: http://goo.gl/YpuDEY
Navbar <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> </ul></div>
example: http://goo.gl/3nwwe1
Radiobutton
<form><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal:</legend> <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked"> <label for="radio-choice-h-2a">One</label> <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off"> <label for="radio-choice-h-2b">Two</label> <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other"> <label for="radio-choice-h-2c">Three</label></fieldset></form>
example: http://goo.gl/Vh67Vf
Checkbox
<form> <fieldset data-role="controlgroup"> <legend>Vertical:</legend> <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"> <label for="checkbox-v-2a">One</label> <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"> <label for="checkbox-v-2b">Two</label> <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"> <label for="checkbox-v-2c">Three</label> </fieldset></form>
example: http://goo.gl/x7vfGr
Flip switch
<form> <label for="flip-2">Flip toggle switch:</label> <select name="flip-2" id="flip-2" data-role="flipswitch" data-theme="b"> <option value="off">Off</option> <option value="on">On</option> </select></form>
example: http://goo.gl/83Mn0z
Listview<ul data-role="listview" data-inset="true" data-divider-theme="a"> <li data-role="list-divider">Mail</li> <li><a href="#">Inbox</a></li> <li><a href="#">Outbox</a></li> <li data-role="list-divider">Contacts</li> <li><a href="#">Friends</a></li> <li><a href="#">Work</a></li></ul>
Use "data-role" to easily create "listview (filter)"
example: http://goo.gl/XjmWug
Popup <a href="#popupID" data-rel="popup" class="ui-btn"
data-transition="pop">Popup</a>
<div data-role="popup" id="popupID">
<p>popup 內容 </p>
</div>
example: http://goo.gl/7rcO1C
Table<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke"> <thead>
內容省略 </thead> <tbody> 內容省略 </tbody></table>
http://goo.gl/pMJlkP
(columntoggle / Reflow)
SlidePanel
<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
How to make "jQuery Mobile" work?
How ?
EventsPage
(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
$('#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
EventsTouch
$(window).on('orientationchange', function (event) {});
Detect rotation event for mobile devices
http://goo.gl/HnE1Fe
Eventsorientationchange
After a series of presentations Everyone should understand a little jQuery Mobile
right?
? ? ? ? ?
Let's look at some examples of jQuery Mobile
The above is a basic introduction to jQuery Mobile If you are interested, you can learn more on the official website
http://jquerymobile.com/
Thank you