jquery & jquery mobile

67
JSCon 2011 JavaScript Conference 2011 By Take your JS skills to the next level with jQuery and jQuery Mobile Anis uddin Ahmad Mohammad Zakir Hossain Raju

Upload: mohammad-raju

Post on 27-Jan-2015

184 views

Category:

Technology


29 download

DESCRIPTION

 

TRANSCRIPT

Page 1: jQuery & jQuery Mobile

JSCon 2011

JavaScript Conference 2011By

Take your JS skills to the next level with

jQuery and jQuery Mobile

Anis uddin AhmadMohammad Zakir Hossain Raju

Page 2: jQuery & jQuery Mobile

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

Page 3: jQuery & jQuery Mobile

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

Page 4: jQuery & jQuery Mobile

JSCon 2011

So... What's Special?

Page 5: jQuery & jQuery Mobile

JSCon 2011

We're using jQuery!

Still there's something

Fastest learning curve Just 30 mins for basics!

Plugins

Community

Page 6: jQuery & jQuery Mobile

JSCon 2011

http://docs.jquery.com/Downloading_jQuery

Let's Start

Page 7: jQuery & jQuery Mobile

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>

Page 8: jQuery & jQuery Mobile

JSCon 2011

How It Works?

$(“div”).addClass(“xyz”);

Find Some Elements

Do something with them

{ }jQuery Object

Page 9: jQuery & jQuery Mobile

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>

Page 10: jQuery & jQuery Mobile

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”)

Page 11: jQuery & jQuery Mobile

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, …..

Page 12: jQuery & jQuery Mobile

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

Page 13: jQuery & jQuery Mobile

JSCon 2011

Actions - DOM Manipulating

DOM Manipulation before(), after(), append(), appendTo(), …

Page 14: jQuery & jQuery Mobile

JSCon 2011

Attributes and Contents

DOM Manipulation before(), after(), append(), appendTo(), …

Attributes css(), addClass(), attr(), html(), val(), text()…

Page 15: jQuery & jQuery Mobile

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(“&copy; 2009 ajaxray”);

• $(“input#name”).val(“Spiderman”);

Page 16: jQuery & jQuery Mobile

JSCon 2011

Actions - Handling Events

DOM Manipulation before(), after(), append(), appendTo(), …

Attributes css(), addClass(), attr(), html(), val(), text()…

Events click(), bind(), unbind(), live(), …

Page 17: jQuery & jQuery Mobile

JSCon 2011

Handling Events

Bind all interactions on events.

$(document).ready(function(){

$(“#message”).click(function(){$(this).hide();

});});

<span id=“message” onclick=“…”> blah blah </span>

Page 18: jQuery & jQuery Mobile

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...

Page 19: jQuery & jQuery Mobile

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(), ...

Page 20: jQuery & jQuery Mobile

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..

Page 21: jQuery & jQuery Mobile

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(), ...

Page 22: jQuery & jQuery Mobile

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

Page 23: jQuery & jQuery Mobile

JSCon 2011

Facebook Hidden Optionbar

Page 24: jQuery & jQuery Mobile

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

Page 25: jQuery & jQuery Mobile

JSCon 2011

Twitter Character Count

Page 26: jQuery & jQuery Mobile

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

Page 27: jQuery & jQuery Mobile

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

Page 28: jQuery & jQuery Mobile

JSCon 2011

http://ajaxload.info/

Working Behind...

Page 29: jQuery & jQuery Mobile

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...

Page 30: jQuery & jQuery Mobile

JSCon 2011

Gmail Content Filtering

Page 31: jQuery & jQuery Mobile

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>

Page 32: jQuery & jQuery Mobile

JSCon 2011

Facebook See More

Page 33: jQuery & jQuery Mobile

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

Page 34: jQuery & jQuery Mobile

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

Page 35: jQuery & jQuery Mobile

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

Page 36: jQuery & jQuery Mobile

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>

Page 37: jQuery & jQuery Mobile

JSCon 2011

Why Mobile Development?

• Accessible

• Number of devices

• Reach

• Easier Development

• Money

Page 38: jQuery & jQuery Mobile

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

Page 39: jQuery & jQuery Mobile

JSCon 2011

What if not supported?

Page 40: jQuery & jQuery Mobile

JSCon 2011

Features

• Touch Optimized

• HTML5 & CSS3

• Theming

• UI components

• Accessibilities

Page 41: jQuery & jQuery Mobile

JSCon 2011

Lightweight

jQuery Core – 31KB

jQuery Mobile CSS – 7KB

jQuery Mobile Javascript – 21KB

Framework Images – 80KB

Page 42: jQuery & jQuery Mobile

JSCon 2011

Example!

Page 43: jQuery & jQuery Mobile

JSCon 2011

Anatomy of a page

<!DOCTYPE html> <html>

<head> <meta name="viewport” content="width=device-width, initial-scale=1”>

</head><body></body>

</html>

Page 44: jQuery & jQuery Mobile

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>

Page 45: jQuery & jQuery Mobile

JSCon 2011

Single page

<div data-role=“page” id=“home”> Content goes here</div>

Page 46: jQuery & jQuery Mobile

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>

Page 47: jQuery & jQuery Mobile

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>

Page 48: jQuery & jQuery Mobile

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>

Page 49: jQuery & jQuery Mobile

JSCon 2011

Local Pages?

Goes source order

ID for navigation

Can be used a dialog box too

Page 50: jQuery & jQuery Mobile

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>

Page 51: jQuery & jQuery Mobile

JSCon 2011

Local Pages

Page 52: jQuery & jQuery Mobile

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>

Page 53: jQuery & jQuery Mobile

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>

Page 54: jQuery & jQuery Mobile

JSCon 2011

Theming

• data-theme attribute • CSS3 rounded corners, gradient etc.• Multiple color swatches• Sprite icon sets• Themeroller coming

Page 55: jQuery & jQuery Mobile

JSCon 2011

Mobile Events

ready()ready()

pagecreate()pagecreate()

Page 56: jQuery & jQuery Mobile

JSCon 2011

Mobile Events

Swipe Override•scrollSupressionThreshold•durationThreshold•horizontalDistanceThreshold•verticalDistanceThreshold

Page 57: jQuery & jQuery Mobile

JSCon 2011

Mobile Events

Page Events•pagebeforeshow•pagebeforehide•pageshow•pagehide•pagecreate

Page 58: jQuery & jQuery Mobile

JSCon 2011

Binding Events

• Bind()• Live()

$(‘#page2).bind(‘pageshow’, function(e){ //do something});

Page 59: jQuery & jQuery Mobile

JSCon 2011

Responsive Layout

• Orientation .portrait { //css here}

.landscape { //css here }

Page 60: jQuery & jQuery Mobile

JSCon 2011

Responsive Layout

<style type=“text/css”>.portrait #ortest{

display: none;}.landscape #ortest{

display: block;}

</style> <p id="ortest”>Landscape View</p>

Page 61: jQuery & jQuery Mobile

JSCon 2011

Testing

• Desktop Browsers• Simulators• Devices

Page 62: jQuery & jQuery Mobile

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/

Page 63: jQuery & jQuery Mobile

JSCon 2011

Beautification is easy

http://jqueryui.com/

Coming for mobile soon...

Page 64: jQuery & jQuery Mobile

JSCon 2011

Talk With Others

http://forum.jquery.com/

http://forum.jquery.com/jquery-mobile

Page 65: jQuery & 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

Page 66: jQuery & jQuery Mobile

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

Page 67: jQuery & jQuery Mobile

JSCon 2011

QUESTIONS?

?