Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013

TM

Touch & Mobile Friendly
Websites with jQuery Mobile

Brett Adler
FieldSync Mobile Solutions
www.FieldSyncMobile.com
3/16/2013 1

TM

What is jQuery Mobile?

An open-source framework that makes building
touch-friendly sites quicker and easier.

A single JavaScript file (.js)
A single Cascading Style Sheet (.css)

3/16/2013 2

TM

Core Features/Benefits
• Broad cross browser support
• Touch-friendly user interface
• Themable and customizable
• AJAX navigation
• Animated transitions
• Events & Methods
• Open source
• Based on jQuery and jQuery UI
• Lightweight

3/16/2013 3

TM

Example – FieldSync App

3/16/2013 source: www.FieldSyncMobile.com 4

TM

Example – Boise Valley Tech

3/16/2013 source: www.BoiseValleyTech.com 5

TM

Example – Beacon Guides

3/16/2013 source: www.BeaconGuides.com 6

TM

Examples

3/16/2013 source: www.jqmgallery.com 7

TM

Examples

3/16/2013 source: www.jqmgallery.com 8

TM

Getting Started
Simply add this to the <head> of your HTML page and you’re ready to start using it…

<!– jQuery Mobile CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<!– jQuery -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<!– jQuery Mobile JavaScript -->
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

(you can also download the files and host them locally)

3/16/2013 9

TM

Minimal Markup For Mobile/Touch
Step #1: Define Type Step #2: Set Attributes

data-role = “listview” data-theme = “b”
data-role = “button” data-inset = “true”
data-role = “navbar” data-iconpos = “bottom”
data-role = “popup” data-icon = “delete”
etc.... etc…

3/16/2013 10

TM

Minimal Markup

3/16/2013 11

TM

Minimal Markup

3/16/2013 12

TM

Header Bars

3/16/2013 13

TM

Navigation Bars

3/16/2013 14

TM

Buttons

3/16/2013 15

TM

Lists

3/16/2013 16

TM

Forms

3/16/2013 17

TM

Accordions

3/16/2013 18

TM

Side Panel

3/16/2013 19

TM

Responsive Tables

3/16/2013 20

TM

Responsive Grids

3/16/2013 21

TM

Search with Autocomplete

3/16/2013 22

TM

Popups

3/16/2013 23

TM

Photo Lightbox

3/16/2013 24

TM

Themable

3/16/2013 25

TM

Events
jQuery Mobile provides a variety of events to help with development.

• Tap / Taphold
• Swipe / Swipe Left / Swipe Right
• Mouse Over / Mouse Up / Mouse Down
• Orientation Change
• Scroll Start / Scroll Stop
• Page Hide / Page Show
• Page Load / Page Before Load / Page Load Failed
• Page Change / Page Before Change / Page Change Failed
• Page Create / Page Before Create / Page Init

3/16/2013 26

TM

Event Examples
Before the Page is Created After the Page Shows
$("#Home").live( 'pagebeforecreate',function(event){ $("#Home").live( 'pageshow',function(event){

var html = „<ul id=“participantList” showStatus(„Loading…‟);
data-role=“listview”></ul>‟;
var dataSet = getData();
$(„#Home‟).html(html); var listElements = „‟;

}); $.each( dataSet, function(index, row) {
listElements += „<li>‟ + row.title + „</li>‟;
});

$(„#participantList‟).html(listElements ).listview(„refresh‟);

hideStatus();

});

3/16/2013 27

TM

Event Examples
Swipes & Taps
$(“#Home").bind("swiperight",function(){
$.mobile.changePage("participant_info.html“, {transition: ”fade”});
});

$(“#Home").bind("swiperight",function(){
$.mobile.changePage(“logs.html“, {transition: ”slide”});
});

$(“#Home").bind(“tap",function(){
$.mobile.changePage(“participant_info.html“, {transition: ”slideup”});
});

$(“#Home").bind(“taphold",function(){
$.mobile.changePage(“logs.html“, {transition: ”none”});
});

3/16/2013 28

TM

Resources
• www.jQueryMobile.com
• api.jquerymobile.com
• view.jquerymobile.com/1.3.0

3/16/2013 29

TM

Brett Adler
Software Developer

Work
Brett.Adler@FieldSyncMobile.com
www.FieldSyncMobile.com

Personal
Brett@BeaconGuides.com
www.BeaconGuides.com

Get this presentation:

http://slidesha.re/111jfw5

http://www.slideshare.net/BrettAdler1/touchmobile-websites-with-jquery-mobile-boise-code-camp-2013

3/16/2013 30

Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (17)

Similar a Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013

Similar a Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013 (20)

Último

Último (20)

Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013