View
185
Download
29
Category
Preview:
DESCRIPTION
Citation preview
JSCon 2011
JavaScript Conference 2011By
Take your JS skills to the next level with
jQuery and jQuery Mobile
Anis uddin AhmadMohammad Zakir Hossain Raju
JSCon 2011
Absolute beginner? Please check: http://www.slideshare.net/anisniit/jquery-from-the-very-beginning
jQuery?
Javascript Library
Simplifies Interaction with DOM Traversing Event Handling Animating Ajax Interactions
Chan
ge th
e way
that
you
writ
e
Java
Script
JSCon 2011
Why jQuery?
Cross Browser Support IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome
Lightweight About 31KB
CSS3 Complaint Supports CSS 1-3
JSCon 2011
So... What's Special?
JSCon 2011
We're using jQuery!
Still there's something
Fastest learning curve Just 30 mins for basics!
Plugins
Community
JSCon 2011
http://docs.jquery.com/Downloading_jQuery
Let's Start
JSCon 2011
Embed In Your Page
<html> <head>
<script src=“path/to/jquery-x.x.js"></script> [Or <script src=“http://cdn/url.js"></script>]
</head> <body> … </body>
</html>
JSCon 2011
How It Works?
$(“div”).addClass(“xyz”);
Find Some Elements
Do something with them
{ }jQuery Object
JSCon 2011
Start Coding jQuery
<html> <head>
<script src=“path/to/jquery-x.x.js"></script> <script>
$(document).ready(function(){// Start here
}); </script></head> <body> … </body>
</html>
JSCon 2011
Basic Selectors
Selecting By Id $(“#header”)
Selecting By Class $(“.updated”)
Selecting by tag name $(“table”)
Combine them $(“table.user-list”) $(“#footer ul.menu li”)
JSCon 2011
Using Filters
Basic Filters :first, :last, :even, :odd, …
Content Filters: :empty , :contains(text), :has(selector), …
Attribute Filters: [attribute], [attribute=value], [attribute!=value], ...
Forms :input, :text, :submit, :password, … :enabled, :disabled, :checked, …..
JSCon 2011
$(“#std tr:even”).css(“background-color”, “#dde”);$(“#std td.comment:empty”).text(“No Comment”);$(“#std td[align=‘center']").addClass(“ocean”);
Example for tag, id, class and filter
Selecting Example
Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3 No Comment
Mizan XII 5 No Comment
Karim VI 2 Satisfactory
JSCon 2011
Actions - DOM Manipulating
DOM Manipulation before(), after(), append(), appendTo(), …
JSCon 2011
Attributes and Contents
DOM Manipulation before(), after(), append(), appendTo(), …
Attributes css(), addClass(), attr(), html(), val(), text()…
JSCon 2011
Attributes Example
Getting
var allignment = $(“img.logo”).attr(“align”);
var copyright = $(“p.copyright”).html();
• var username = $(“input#name”).val();
Setting
$(“img.logo”).attr(“align”, “left”);
$(“p.copyright”).html(“© 2009 ajaxray”);
• $(“input#name”).val(“Spiderman”);
JSCon 2011
Actions - Handling Events
DOM Manipulation before(), after(), append(), appendTo(), …
Attributes css(), addClass(), attr(), html(), val(), text()…
Events click(), bind(), unbind(), live(), …
JSCon 2011
Handling Events
Bind all interactions on events.
$(document).ready(function(){
$(“#message”).click(function(){$(this).hide();
});});
<span id=“message” onclick=“…”> blah blah </span>
JSCon 2011
jQuery Events
Events Helpers click() dblclick() focus() blur() keydown() keyup() mouseover() mouseout() All onxyz events + more
Special functions
bind(type, data, fn)
unbind(type, data)
hover(over, out)
toggle(fn, fn1)
one(type, data, fn)
ready(fn)
live()
die()
More...
JSCon 2011
Actions - Handling Events
DOM Manipulation before(), after(), append(), appendTo(), …
Attributes css(), addClass(), attr(), html(), val(), text(), …
Events click(), bind(), unbind(), live(), …
Effects hide(), fadeOut(), toggle(), slideUp, animate(), ...
JSCon 2011
jQuery Effects
show(), hide(), toggle()
slideUp(), slideDown(), slideToggle()
fadeIn(), fadeOut(), fadeTo()
$("#showdown").click(function(){ $("#my-div").animate({
width: "70%", opacity: 0.4
}, 1200 ); });
You can make Animation!
But there are helpers too..
JSCon 2011
Actions - Ajax
DOM Manipulation before(), after(), append(), appendTo(), …
Attributes css(), addClass(), attr(), html(), val(), text(), …
Events click(), bind(), unbind(), live(), …
Effects hide(), fadeOut(), toggle(), slideUp, animate(), …
Ajax load(), get(), post(), getJSON(), serialize(), ...
JSCon 2011
We'll write some <html>
$(document).ready(function(){ // And then the JavaScript/jQuery here});
Format selective elements if required
Let's Do Some Practice
JSCon 2011
Facebook Hidden Optionbar
JSCon 2011
<textarea id="status"></textarea>
<div id="status-options"> <a href="#">a link</a> <a href="#">another link</a></div>
$("#status").focus(function(){ $("#status-options").slideDown("slow");});
#status-options{ display: none;
...}
Facebook Hidden Optionbar
JSCon 2011
Twitter Character Count
JSCon 2011
$("#status").keyup(function(e){ var statusLength = $("#status").val().length; $("#char-count").text(140 - statusLength);});
<textarea id="status"></textarea><span id="char-count"></span>
Twitter Character Count
JSCon 2011
$("#status").keyup(function(e){ var statusLength = $("#status").val().length; $("#char-count").text(140 – statusLength);
if(statusLength > 120) { $("#char-count").css('color', 'red'); } else { $("#char-count").css('color', 'black'); }});
<textarea id="status"></textarea><span id="char-count"></span>
Twitter Character Count
JSCon 2011
http://ajaxload.info/
Working Behind...
JSCon 2011
<a href="#" id="load-details">Show Details</a><div id="target"></div>
$("#load-details").click(function(){ $("#target").show() .html("<img src='i/loading.gif'" />");
$("#target").get('server/url?id=3', function(data){ $("#target").html(data); }); });
#target{ display: none;}
Working Behind...
JSCon 2011
Gmail Content Filtering
JSCon 2011
Gmail Content Filtering
$("ul#side-menu li a").click(function(e){e.preventDefault();
$("#"+ $(this).attr("rel")).load($(this).attr("href")
);});
<ul id="side-menu"> <li><a href="path?param=1" rel="main">inbox</a></li> <li><a href="path?param=2" rel="main">draft</a></li></ul><div id="main"></div>
JSCon 2011
Facebook See More
JSCon 2011
$("p.long-p").each(function() {if($(this).text().length > 200){
var content = $(this).text();//@todo: Move extra content to a span
//@todo: Add a link to show hidden span}
});
//@todo: Hide extra spans//@todo: Activate the link to show hidden span
<p class="long-p">Lot of texts...</p>
Facebook See More
JSCon 2011
$(this).html(content.substr(0, 199)) .append("<span class='extra'>" + content.substr(199) + "</span>")
.append(" <a href='#' class='more'>See More</a>");
<p class="long-p">First 200 chars are here <span class=”extra”>Rest of the content</span> <a href='#' class='more'>See More</a></p>
Move extra content to a span and add link:
The HTML will become:
Facebook See More
JSCon 2011
$("p span.extra").hide();
$("p a.more").click(function(){$(this).prev().show();$(this).remove();
});
Hide spans and activate link:
<p class="long-p">First 200 chars are here <span class=”extra”>Rest of the content</span> <a href='#' class='more'>See More</a></p>
Facebook See More
JSCon 2011
$("p.long-p").each(function() {if($(this).text().length > 200){
var content = $(this).text(); $(this).html(content.substr(0, 199)) .append("<span class='extra'>" + content.substr(199) + "</span>")
.append(" <a href='#' class='more'>See More</a>");}
});
$("p span.extra").hide();$("p a.more").click(function(){
$(this).prev().show();$(this).remove();
});
<p class="long-p">Lot of texts...</p>
JSCon 2011
Why Mobile Development?
• Accessible
• Number of devices
• Reach
• Easier Development
• Money
JSCon 2011
Why jQuery Mobile?
• Cross Device
• Built on top of old friend jQuery
• Low learning
• A full mobile UI framework
• Progressive Enhancement
• & Graceful Degradation
JSCon 2011
What if not supported?
JSCon 2011
Features
• Touch Optimized
• HTML5 & CSS3
• Theming
• UI components
• Accessibilities
JSCon 2011
Lightweight
jQuery Core – 31KB
jQuery Mobile CSS – 7KB
jQuery Mobile Javascript – 21KB
Framework Images – 80KB
JSCon 2011
Example!
JSCon 2011
Anatomy of a page
<!DOCTYPE html> <html>
<head> <meta name="viewport” content="width=device-width, initial-scale=1”>
</head><body></body>
</html>
JSCon 2011
Including library files
<head><link rel="stylesheet" href="jquery.mobile.min.css" /><script src="jquery.min.js"></script><script type=“text/javascript”>
//override here</script><script src="jquery.mobile.min.js"></script>
</head>
JSCon 2011
Single page
<div data-role=“page” id=“home”> Content goes here</div>
JSCon 2011
Header & Footer
<div data-role="page" id="home"> <div data-role="header"> <h1>Header</h1> </div>
<div data-role="content"> <p>Inside contents</p> </div>
<div data-role="footer"> <p>Footer</p> </div></div>
JSCon 2011
Single page
<div data-role="page" id="home"> <div data-role="header”> <a data-icon="home” href=“”>Home</a> <h1>Header</h1> <a data-icon="back" data-rel="back”>Back</a> </div>.….……</div>
JSCon 2011
Page Content - Lists
<div data-role="content"> <ul data-role="listview" data-inset="true"> <li>Item one</li> <li>Item two</li> <li>Item three</li>
</ul></div>
JSCon 2011
Local Pages?
Goes source order
ID for navigation
Can be used a dialog box too
JSCon 2011
Local Pages
<div data-role=“page” id=“home”><p>Home Page</p>
</div>
<div data-role=“page” id=“secondpage”><p>second page</p>
</div>
JSCon 2011
Local Pages
JSCon 2011
Navigation
<div data-role=“page” id=“home”><a href=“#secondpage”>Go to 2nd Page</a>
</div>
<div data-role=“page” id=“secondpage”><a href=“about.html”>About Us</a>
</div>
JSCon 2011
Dialog box
<a href="#pagedialog" data-rel="dialog” data-transition="pop">Open Dialog</a>
<div data-role="page" id="dialog"> This is a modal dialog box</div>
JSCon 2011
Theming
• data-theme attribute • CSS3 rounded corners, gradient etc.• Multiple color swatches• Sprite icon sets• Themeroller coming
JSCon 2011
Mobile Events
ready()ready()
pagecreate()pagecreate()
JSCon 2011
Mobile Events
Swipe Override•scrollSupressionThreshold•durationThreshold•horizontalDistanceThreshold•verticalDistanceThreshold
JSCon 2011
Mobile Events
Page Events•pagebeforeshow•pagebeforehide•pageshow•pagehide•pagecreate
JSCon 2011
Binding Events
• Bind()• Live()
$(‘#page2).bind(‘pageshow’, function(e){ //do something});
JSCon 2011
Responsive Layout
• Orientation .portrait { //css here}
.landscape { //css here }
JSCon 2011
Responsive Layout
<style type=“text/css”>.portrait #ortest{
display: none;}.landscape #ortest{
display: block;}
</style> <p id="ortest”>Landscape View</p>
JSCon 2011
Testing
• Desktop Browsers• Simulators• Devices
JSCon 2011
Move Faster...
Ajax
Animation and Effects
Browser Tweaks
Data
DOM
Drag-and-Drop
Events
Forms
Integration
JavaScript
jQuery Extensions
Layout
Media
Menus
Metaplugin
Navigation
Tables
User Interface
Utilities
Widgets
Windows and Overlays
http://plugins.jquery.com/
JSCon 2011
Beautification is easy
http://jqueryui.com/
Coming for mobile soon...
JSCon 2011
Talk With Others
http://forum.jquery.com/
http://forum.jquery.com/jquery-mobile
JSCon 2011
Dig more…
• Jquery.com• jquerymobile.com• Visual jQuery (www.visualjquery.com)• Jqapi (www.jqapi.com)• Book: jQuery Mobile First Look by Giulio Bai• Book: Master Mobile Web Apps with jQuery
Book: Mobile by Matt Doyle
JSCon 2011
We are..
Anis uddin AhmadCo-Founder
WNeeds Ltd.
http://ajaxray.com
Md. Zakir Hossain RajuWeb Application Developer
somewherein.com
http://hungrycoder.xenexbd.com
JSCon 2011
QUESTIONS?
?
Recommended