• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery & jQuery Mobile
 

jQuery & jQuery Mobile

on

  • 22,390 views

 

Statistics

Views

Total Views
22,390
Views on SlideShare
6,220
Embed Views
16,170

Actions

Likes
16
Downloads
249
Comments
0

16 Embeds 16,170

http://ajaxray.com 13693
http://www.ajaxray.com 2391
http://paper.li 24
http://abtasty.com 16
http://translate.googleusercontent.com 16
http://webcache.googleusercontent.com 13
https://twitter.com 3
http://school16.qa.test-dialog-webdesign.eu 3
http://www.verious.com 2
http://prlog.ru 2
http://212.95.54.63 2
http://213.8.145.174:82 1
http://localhost 1
http://hghltd.yandex.net 1
http://eva.universidad.edu.uy 1
https://crowdflower.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery & jQuery Mobile jQuery & jQuery Mobile Presentation Transcript

    • 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
    • So... What's Special?
    • 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&quot;></script> [Or <script src=“http://cdn/url.js&quot;></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&quot;></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'] &quot;).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 (“&copy; 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()
      $(&quot;#showdown&quot;).click(function(){ $(&quot;#my-div&quot;). animate ({ width: &quot;70%&quot;, 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
    • Facebook Hidden Optionbar <textarea id=&quot;status&quot;></textarea> <div id=&quot;status-options&quot;> <a href=&quot;#&quot;>a link</a> <a href=&quot;#&quot;>another link</a> </div> $(&quot;#status&quot;) . focus( function(){ $(&quot;#status-options&quot;) . slideDown( &quot;slow&quot; ) ; } ) ; #status-options { display: none ; ... }
    • Twitter Character Count
    • Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var statusLength = $(&quot;#status&quot;) . val() .length ; $(&quot;#char-count&quot;) . text( 140 - statusLength ) ; }); <textarea id=&quot;status&quot;></textarea> <span id=&quot;char-count&quot;></span>
    • Twitter Character Count $(&quot;#status&quot;) . keyup ( function(e){ var statusLength = $(&quot;#status&quot;) . val() .length ; $(&quot;#char-count&quot;) . text( 140 – statusLength ) ; if( statusLength > 120) { $(&quot;#char-count&quot;). css( 'color', 'red' ) ; } else { $(&quot;#char-count&quot;) . css( 'color', 'black' ) ; } }); <textarea id=&quot;status&quot;></textarea> <span id=&quot;char-count&quot;></span>
    • Working Behind... http://ajaxload.info/
    • Working Behind... <a href=&quot;#&quot; id=&quot;load-details&quot;>Show Details</a> <div id=&quot;target&quot;></div> $(&quot;#load-details&quot;) .click ( function(){ $(&quot;#target&quot;) .show() . html( &quot; <img src='i/loading.gif'&quot; />&quot; ) ; $(&quot;#target&quot;) . get( 'server/url?id=3' , function( data ){ $(&quot;#target&quot;) . html(data) ; } ) ; } ) ; #target { display: none ; }
    • Gmail Content Filtering
    • Gmail Content Filtering $(&quot;ul#side-menu li a&quot;). click( function(e){ e. preventDefault() ; $(&quot;#&quot;+ $(this). attr(&quot;rel&quot;) ).load( $(this). attr(&quot;href&quot;) ); } ) ; <ul id=&quot;side-menu&quot;> <li><a href=&quot; path?param=1 &quot; rel=&quot; main &quot;>inbox</a></li> <li><a href=&quot;path?param=2&quot; rel=&quot;main&quot;>draft</a></li> </ul> <div id=&quot;main&quot;></div>
    • Facebook See More
    • Facebook See More $(&quot;p.long-p&quot;). 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=&quot;long-p&quot;> Lot of texts... </p>
    • Facebook See More $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot; + content .substr(199) + &quot;</span>&quot; ) .append( &quot; <a href='#' class='more'>See More</a>&quot; ) ; <p class=&quot;long-p&quot;> 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 $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) .click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; Hide spans and activate link: <p class=&quot;long-p&quot;> First 200 chars are here <span class=”extra”> Rest of the content </span> <a href='#' class='more'> See More </a> </p>
    • $(&quot;p.long-p&quot;). each( function() { if($(this).text().length > 200){ var content = $(this).text(); $(this). html( content .substr(0, 199) ) .append( &quot;<span class='extra'>&quot; + content .substr(199) + &quot;</span>&quot; ) .append( &quot; <a href='#' class='more'>See More</a>&quot; ) ; } } ) ; $(&quot;p span.extra&quot;) .hide() ; $(&quot;p a.more&quot;) . click( function(){ $(this) .prev().show() ; $(this) .remove() ; } ) ; <p class=&quot;long-p&quot;> 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
    • What if not supported?
    • Features
      • Touch Optimized
      • HTML5 & CSS3
      • Theming
      • UI components
      • Accessibilities
    • Lightweight jQuery Core – 31KB jQuery Mobile CSS – 7KB jQuery Mobile Javascript – 21KB Framework Images – 80KB
    • Example!
    • Anatomy of a page
      • <!DOCTYPE html>
      • <html>
        • <head>
        • <meta name=&quot;viewport” content=&quot;width=device-width, initial-scale=1”>
        • </head>
        • <body>
        • </body>
      • </html>
    • Including library files
      • <head>
        • <link rel=&quot;stylesheet&quot; href=&quot;jquery.mobile.min.css&quot; />
        • <script src=&quot;jquery.min.js&quot;></script>
        • <script type=“text/javascript”>
        • //override here
        • </script>
        • <script src=&quot;jquery.mobile.min.js&quot;></script>
      • </head>
    • Single page <div data-role=“page” id=“home”> Content goes here </div>
    • Header & Footer <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header&quot;> <h1>Header</h1> </div> <div data-role=&quot;content&quot;> <p>Inside contents</p> </div> <div data-role=&quot;footer&quot;> <p>Footer</p> </div> </div>
    • Single page <div data-role=&quot;page&quot; id=&quot;home&quot;> <div data-role=&quot;header”> <a data-icon=&quot;home” href=“”>Home</a> <h1>Header</h1> <a data-icon=&quot;back&quot; data-rel=&quot;back”>Back</a> </div> .…. …… </div>
    • Page Content - Lists
      • <div data-role=&quot;content&quot;>
      • <ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;>
        • <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>
    • Local Pages
    • 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=&quot;#pagedialog&quot; data-rel=&quot;dialog” data-transition=&quot;pop&quot;>Open Dialog</a> <div data-role=&quot;page&quot; id=&quot;dialog&quot;> 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=&quot; 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
    • QUESTIONS?
      • ?