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

description

 

Transcript of jQuery & jQuery Mobile

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?

?