jQuery & jQuery Mobile

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

jQuery? Javascript Library Simplifies Interaction with DOM Traversing Event Handling Animating Ajax Interactions Absolute beginner? Please check: http://www.slideshare.net/anisniit/jquery-from-the-very-beginning Change the way that you write JavaScript

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

Still there's something Fastest learning curve Just 30 mins for basics! Plugins Community We're using jQuery!

Let's Start http://docs.jquery.com/Downloading_jQuery

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>

How It Works? $(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object

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>

Basic Selectors Selecting By Id $(“#header”) Selecting By Class $(“.updated”) Selecting by tag name $(“table”) Combine them $(“table.user-list”) $(“#footer ul.menu li”)

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

Selecting Example $(“ #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 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

Actions - DOM Manipulating DOM Manipulation before(), after(), append(), appendTo(), …

Attributes and Contents DOM Manipulation before(), after(), append(), appendTo(), … Attributes css(), addClass(), attr(), html(), val(), text()…

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

Actions - Handling Events DOM Manipulation before(), after(), append(), appendTo(), … Attributes css(), addClass(), attr(), html(), val(), text()… Events click(), bind(), unbind(), live(), …

Handling Events Bind all interactions on events. $(document).ready(function(){ $(“#message”). click ( function(){ $(this).hide(); }); }); <span id=“message” on click =“…”> blah blah </span>

jQuery Events Events Helpers click() dblclick() focus() blur() keydown() keyup() mouseover() mouseout() All on xyz 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...

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

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

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

Let's Do Some Practice We'll write some <html> $(document). ready( function(){ // And then the JavaScript/jQuery here } ) ; Format selective elements if required

Facebook Hidden Optionbar <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 ; ... }

Twitter Character Count $("#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 $("#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>

Working Behind... http://ajaxload.info/

Working Behind... <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 ; }

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>

Facebook See More $("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 $(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 $("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>

$("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>

Why Mobile Development? Accessible Number of devices Reach Easier Development Money

Why jQuery Mobile? Cross Device Built on top of old friend jQuery Low learning A full mobile UI framework Progressive Enhancement & Graceful Degradation

Features Touch Optimized HTML5 & CSS3 Theming UI components Accessibilities

Lightweight jQuery Core – 31KB jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB Framework Images – 80KB

Anatomy of a page <!DOCTYPE html> <html> <head> <meta name="viewport” content="width=device-width, initial-scale=1”> </head> <body> </body> </html>

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>

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

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>

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

Local Pages? Goes source order ID for navigation Can be used a dialog box too

Local Pages <div data-role=“page” id=“home”> <p>Home Page</p> </div> <div data-role=“page” id=“ secondpage ” > <p>second page</p> </div>

Navigation <div data-role=“page” id=“home”> <a href=“#secondpage” >Go to 2 nd Page</a> </div> <div data-role=“page” id=“ secondpage ” > <a href=“ about.html ” >About Us</a> </div>

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>

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

Mobile Events ready() pagecreate()

Mobile Events Swipe Override scrollSupressionThreshold durationThreshold horizontalDistanceThreshold verticalDistanceThreshold

Mobile Events Page Events pagebeforeshow pagebeforehide pageshow pagehide pagecreate

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

Responsive Layout Orientation .portrait { //css here} .landscape { //css here }

Responsive Layout <style type=“text/css”> .portrait #ortest { display: none; } .landscape #ortest { display: block; } </style> <p id=" ortest ”>Landscape View</p>

Testing Desktop Browsers Simulators Devices

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/

Beautification is easy http://jqueryui.com/ Coming for mobile soon...

Talk With Others http://forum.jquery.com/ http://forum.jquery.com/jquery-mobile

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

We are.. Anis uddin Ahmad Co-Founder WNeeds Ltd. http://ajaxray.com Md. Zakir Hossain Raju Web Application Developer somewherein.com http://hungrycoder.xenexbd.com

jQuery & jQuery Mobile

Related slideshows

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (6)

jQuery & jQuery Mobile