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?
?
Top Related