Jquery mobile
16
Abed MAATALLA
-
Upload
abed-maatalla -
Category
Engineering
-
view
36 -
download
2
Transcript of Jquery mobile
Abed MAATALLA
Cross platform
JQuery Mobile
JQuery Mobile
Cross PlatformWhy JQuery mobile?limits.How far JQuery mobile will take you?Where you start? Demo
JQuery Mobile
Why jquery mobile Widest cross platform Provides native look & feelNo need to learn native languagesEasy layout & themingTouch friendly user interface componentsTried & tested ( whole team working on it)
JQuery Mobile
limitsPerformance.Restricted access to device resources.Network dependency.Not a silver bullet ( may not be perfect).
JQuery Mobile
Layout
data-* attributes data-role data-role = "listview"data-role = "button"
JQuery Mobile
data-theme = "d"data-rel = "close"data-icon = "bars"data-position = "fixed"
JQuery Mobile
data-role = page data-role = header data-role = content data-role = footer
Code Slide / High contrast
HTML<!doctype html><html>
<head><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="apple-mobile-web-app-capable" content="yes" />
</head><body>
<div data-role=”page”><div data-role=”header”> … </div><div data-role=”content”> … </div><div data-role=”footer”> … </div>
</div></body>
Code Slide / High contrast
HTML<!doctype html><html>
<head><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="apple-mobile-web-app-capable" content="yes" />
</head><body>
<div data-role=”page”><div data-role=”header”> … </div><div data-role=”content”> … </div><div data-role=”footer”> … </div>
</div></body>
JQuery Mobile
Requirements:- JQuery - HTML- CSS
JQuery Mobile
Sublime Server to host application locally
- On mac anvil- On windows iis ( internet information service)
JQuery Mobile
We are going to build a simple Jquery mobile.Application called DOOZ. DOOZ is for recipes.Sidebar menu with all recipes.Search in sidebar menu.A nice content display.
JQuery Mobile
Demo
JQuery Mobile
Jquerymobile.com
l GDG Chlef l Devfest 2014
