Jquery Mobile

Unified Web and Mobile Web
Applications with
MVC 3 and jQuery Mobile
Presented by Ivan Farkas
Challenges
 Building websites with shrinking resources
 Making websites available for many devices
 PCs
 Tablets
 Smartphones
Worldwide Mobile Browsers – 3/10/10 – 3/11/11
US Mobile Browsers – 3/10/10 – 3/11/11
Different contexts,
same expectations
Goals, philosophy & approach
 Unified system
 Universal access
 Unified mobile experience
 Easy development
jQuery Mobile
 A touch optimized HTML 5
Framework for building
mobile websites and apps.
 Currently in Alpha 4. Not
all features are
implemented yet or stable.
 Unified mobile experience
Supported now
Coming by Beta
Touch Optimized
 UI Controls need to be big enough to touch.

 Minimize the need for typing
 No mouseover, mousemove events, instead you
have events like swipe, swipeleft, swiperight,
orientationchange, tap, taphold, etc.
 Optomized Form Controls
What’s in jQuery Mobile?
 Pages & Dialogs

 Toolbars (Header & Footer bars)
 Button’s (Including a set of stock icons)
 Form Controls (Slider’s, Toggles, enhanced radio,
checkbox, etc.)
 List View Control
Built on HTML
+ progressive enhancement
Anatomy of a jQuery Mobile Page
HTML 5 document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Page</title>
</head>
<body>
</body>
</html>
jQuery, jQuery Mobile + Theme CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Page</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js">
</script>
</head>
data-role
jQuery Mobile uses an HTML 5 custom data attribute

called: data-role to associate an element with a widget.
 data-role=”page”
 data-role=”header”
 data-role=”footer”
 data-role=”navbar”
 data-role=”button”
 data-role=”listview”
 data-role=”controlgroup”
 data-role=”fieldcontain”
data-role="page"
A HTML document can consist of multiple pages.
Pages are linked together via a link to #pageElementID
<body>
<div data-role="page" id="home">

</div>
<div data-role="page" id=“profile">

</div>

</body>
Page data-roles
<body>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
</body>
Page data-roles
Simple content
<body>
<div data-role="page">
<h1>Welcome</h1>
</div>
<p>Hello world</p>
</div>
</div>
</body>
Basic list
<p>Hello world</p>
<ul>
<li>Products</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>
</div>

Add listview role
<p>Hello world</p>
<ul data-role="listview"
data-inset="true">
<li>Products</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>
</div>

Link each item

<p>Hello world</p>
<ul data-role="listview" data-inset="true">
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

Theme swatches
data-theme swatch

<div data-role="content" data-theme="a">
<p>Hello world</p>
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="products.html">Products</a></li>
</ul>
</div>

data-transition="pop"

<div data-role="content" data-theme="a">
<p>Hello world</p>
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="products.html“ data-transition="pop“
>Products</a></li>
</ul>
</div>

data-rel="dialog"
Dialogs = Not in history
<li><a href="List.htm" data-rel="dialog">Dialog</a></li>

Icons, Buttons
Icons
Link styled as a button

<a href="index.html" data-role="button">Link button</a>
Other markup options
Icon position
data-iconpos="left“
data-iconpos="right“
data-iconpos="top“
data-iconpos="bottom“
data-iconpos="no text"
Button groups
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
Horizontal groups
<div data-role="controlgroup" data-type="horizontal">

<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
Inline buttons
<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-
theme="b">Save</a>
</div>
Theme inheritance
Header toolbar
Links in header are automatically turned into buttons
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check" data-
theme="b">Save</a>
</div>
Footer
<div data-role="footer">
icon="delete">Remove</a>
icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-
u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-
d">Down</a>
</div>
Navbar
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>

Navbar with icons
Working with Forms
Form elements should be wrapped in a div with a

datarole=“fieldcontain” attribute.
<form>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider"
value="0" min="0" max="100" />
</div>
</form>
And a lot more other features
Kick the tires, explore, be creative!
We’ve just scratched the surface of what you can do with
jQuery Mobile.
Demo
 How to use jQuery Mobile in an MVC 3 project?
 Multipurpose Views (for traditional and Mobile
browsers).
 Same page - different Views, same Controller.
 Same page - different Views, different Controllers.
Useful Links
 MVC 3 - http://www.asp.net/mvc/mvc3
 jQuery Mobile - http://jquerymobile.com
 Demos & Docs - jquerymobile.com/demos/1.0a3
 Test - jquerymobile.com/test
 Stat Counter - http://gs.statcounter.com
 Ivan Farkas, 3D HD Soft, LLC – 3DHDSoft.com
 Ivan Farkas blog – Blog.3DHDSoft.com
 Demo – http://Demo.3DHDSoft.com
 Demo Src – http://Demo.3DHDSoft.com/Mobile.zipx

Jquery Mobile

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Jquery Mobile

Hochgeladen von

Copyright:

Verfügbare Formate

Unified Web and Mobile Web

 UI Controls need to be big enough to touch.

 Pages & Dialogs

jQuery Mobile uses an HTML 5 custom data attribute

Dialogs = Not in history

<li><a href="List.htm" data-rel="dialog">Dialog</a></li>

Link styled as a button

<div data-role="controlgroup" data-type="horizontal">

Links in header are automatically turned into buttons

Form elements should be wrapped in a div with a

Das könnte Ihnen auch gefallen