Quick Intro to JQuery and JQuery Mobile
1,171 views
19 slides
Oct 02, 2013
Slide 1 of 19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
About This Presentation
No description available for this slideshow.
Slide Content
JQuery'+'JQuery'Mobile'
Jussi'Pohjolainen'
Tampere'University'of'Applied'Sciences'
Jussi'Pohjolainen'
Tampere'University'of'Applied'Sciences'
Overview'
• JQuery'
– Most'popular'JavaScript'library'to'simplify'clientAside'scripBng'
– DOM'Handling,'animaBons,'events,'AJAX'
– Hides'browser'differences!'
• JQuery'UI'
– Desktop'widgets,'such'as'date'picker,'dialog,'progress'bar,'tabs…'
– Built&on&top&of&JQuery&
• JQuery'Mobile'
– Mobile'app'framework,'mainly'touch'UI'widgets'
– Support'for'all'mobile'operaBng'systems'
– Built&on&top&of&JQuery&
• Possible'to'mix:'JQuery'(dom'handling)'+'JQuery'Mobile'(UI).'
• JQuery'
– Most'popular'JavaScript'library'to'simplify'clientAside'scripBng'
– DOM'Handling,'animaBons,'events,'AJAX'
– Hides'browser'differences!'
• JQuery'UI'
– Desktop'widgets,'such'as'date'picker,'dialog,'progress'bar,'tabs…'
– Built&on&top&of&JQuery&
• JQuery'Mobile'
– Mobile'app'framework,'mainly'touch'UI'widgets'
– Support'for'all'mobile'operaBng'systems'
– Built&on&top&of&JQuery&
• Possible'to'mix:'JQuery'(dom'handling)'+'JQuery'Mobile'(UI).'
PhoneGap?'
• PhoneGap'(Adobe)'framework'allows'to'build'hybrid'
apps'for'mobile'plaTorms'
• Hybrid'apps?'
– Web'apps'(HTML5+JS)'that'are'wrapped'inside'of'naBve'
WebView'widget'
• Benefits'
– Can'be'sold'in'app'stores'
– Can'access'naBve'APIs'
• One'possible'stack'for'building'cross'plaTorm'apps:'
– JQuery'for'DOM'and'AJAX'Handling'
– JQuery'Mobile'for'User'Interface'
– PhoneGap'for'wrapping'the'app'as'naBve'
• PhoneGap'(Adobe)'framework'allows'to'build'hybrid'
apps'for'mobile'plaTorms'
• Hybrid'apps?'
– Web'apps'(HTML5+JS)'that'are'wrapped'inside'of'naBve'
WebView'widget'
• Benefits'
– Can'be'sold'in'app'stores'
– Can'access'naBve'APIs'
• One'possible'stack'for'building'cross'plaTorm'apps:'
– JQuery'for'DOM'and'AJAX'Handling'
– JQuery'Mobile'for'User'Interface'
– PhoneGap'for'wrapping'the'app'as'naBve'
JQUERY'
Quick'Start'
• Download'JQuery'file'(h\p://jquery.com/)'
– 1.x'
– 2.x'
• Smaller'and'faster,'but'does'not'support'ie6,'7'or'8.'
• Windows'Phone'8'plaTorm'supports'IE10.'
• Make'your'(x)html'page'and'reference'to'the'
file'in'script'block'
• Make'your'code'and'use'JQuery'funcBons!'
• Download'JQuery'file'(h\p://jquery.com/)'
– 1.x'
– 2.x'
• Smaller'and'faster,'but'does'not'support'ie6,'7'or'8.'
• Windows'Phone'8'plaTorm'supports'IE10.'
• Make'your'(x)html'page'and'reference'to'the'
file'in'script'block'
• Make'your'code'and'use'JQuery'funcBons!'
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>
Some'Basic'Syntax'
• JQuery'can'be'used'in'two'ways:'
– JQuery()
– Or'
– $()
• $'is'an'alias'to'JQuery()!'$'more'commonly'
used'
• JQuery'can'be'used'in'two'ways:'
– JQuery()
– Or'
– $()
• $'is'an'alias'to'JQuery()!'$'more'commonly'
used'
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>
// USING ANONYMOUS FUNCTIONS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>
// EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>
Ge\ers'in'the'TradiBonal'Way'
• getElementsById
• getElementsByTagName
• getAttribute
• getElementsById
• getElementsByTagName
• getAttribute
JQuery'and'Selectors'
• Select'all'h1'elements'
– $(“h1”)
• Select'the'first'one'
– $(“h1”)[0]
• Add'contents'
– $(“h1”)[0].innerHTML = “hello!”;
• Lot'of'different'selectors'
– http://api.jquery.com/category/selectors/
• Select'all'h1'elements'
– $(“h1”)
• Select'the'first'one'
– $(“h1”)[0]
• Add'contents'
– $(“h1”)[0].innerHTML = “hello!”;
• Lot'of'different'selectors'
– http://api.jquery.com/category/selectors/
CreaBng'Elements'in'TradiBonal'Way'
• createElement
• createTextNode
• setAttribute
• appendChild
• removeChild
• createElement
• createTextNode
• setAttribute
• appendChild
• removeChild
JQuery'Insert'
$().ready(function(){
$("a").click(function(event){
// Insert the new element after element with id here
$("<p>New Element</p>").insertAfter("#here");
event.preventDefault();
});
});
$().ready(function(){
$("a").click(function(event){
// Insert the new element after element with id here
$("<p>New Element</p>").insertAfter("#here");
event.preventDefault();
});
});
ManipulaBon'FuncBons'
• .addClass()
• .after()
• .append()
• .css()
• …'
• See: http://api.jquery.com/category/
manipulation/
• .addClass()
• .after()
• .append()
• .css()
• …'
• See: http://api.jquery.com/category/
manipulation/
Some'Effects:'Lot'of'Anim'FuncBons'
$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});
$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});
JQUERY'MOBILE'
JQuery'Mobile'
• UI'for'all'popular'mobile'device'plaTorms'
– h\p://jquerymobile.com/'
• Built'on'top'of'JQuery'
• Themes'can'be'changed'
• See'demo:'
– h\p://view.jquerymobile.com/1.3.2/dist/demos/'
• UI'for'all'popular'mobile'device'plaTorms'
– h\p://jquerymobile.com/'
• Built'on'top'of'JQuery'
• Themes'can'be'changed'
• See'demo:'
– h\p://view.jquerymobile.com/1.3.2/dist/demos/'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-dividertheme="b">
<li data-role="list-divider">Options</li>
<li><a href="option1.html">Option 1</a></li>
<li><a href="option2.html">Option 2</a></li>
<li><a href="option3.html">Option 3</a></li>
<li><a href="option4.html">Option 4</a></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2013</h4>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-dividertheme="b">
<li data-role="list-divider">Options</li>
<li><a href="option1.html">Option 1</a></li>
<li><a href="option2.html">Option 2</a></li>
<li><a href="option3.html">Option 3</a></li>
<li><a href="option4.html">Option 4</a></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2013</h4>
</div>
</div>
</body>
</html>
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,171
- Slides 19
- Age 4447 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views