Introduction to jQuery (for Drupal) - PowerPoint PPT Presentation

Introduction to jquery for drupal l.jpg
Download
1 / 31

  • 223 Views
  • Updated On :
  • Presentation posted in: Pets / Animals

Introduction to jQuery (for Drupal). Amit Asaravala http://returncontrol.com amit@returncontrol.com “ aasarava ” on drupal.org. What is jQuery?. What is jQuery?. Magic. What is jQuery?. A JavaScript library: Makes writing JavaScript a lot easier

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Introduction to jQuery (for Drupal)

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introduction to jquery for drupal l.jpg

Introduction to jQuery(for Drupal)

Amit Asaravala

http://returncontrol.com

amit@returncontrol.com

“aasarava” on drupal.org


What is jquery l.jpg

What is jQuery?


What is jquery3 l.jpg

What is jQuery?

  • Magic


What is jquery4 l.jpg

What is jQuery?

  • A JavaScript library:

    • Makes writing JavaScript a lot easier

    • Makes writing cross-browser compatible JavaScript a lot easier

    • Makes creating client-side interactivity a lot easier

    • Makes AJAX a lot easier


How do i get jquery l.jpg

How Do I Get jQuery?


How do i get jquery6 l.jpg

How Do I Get jQuery?

  • For Drupal 6 Sites:

    • jQuery 1.2.6 comes bundled

    • Loaded automatically (usually…)

    • Can use jquery_update module for jquery 1.3.2

  • For Non-Drupal Sites:

    • http://docs.jquery.com/Downloading_jQuery

    • Get the “minified” version for production use


How do i use it l.jpg

How Do I Use It?


How do i use it non drupal l.jpg

How Do I Use It: Non-Drupal

<head>

<script type=“javascript” src=“jquery.js”></script>

<script type=“javascript”>

//your jquery code goes here. go crazy!

</script>

</head>


How do i use it drupal theme l.jpg

How Do I Use It: Drupal Theme

  • Create a script.js file in your theme folder.

  • Your jQuery code goes in there.


How do i use it drupal module l.jpg

How Do I Use It: Drupal Module

  • Create a mymodule.js file.

  • Use drupal_add_js() function in your module.

    mymodule_init() {

    $path = drupal_get_path(‘module’, ‘mymodule’);

    drupal_add_js($path . '/mymodule.js');

    }


Yeah but how do i use it l.jpg

Yeah, But How Do I Use It?


Writing jquery l.jpg

Writing jQuery

  • Series of statements

  • Each statement is usually a 3-step process:

    • Select an element

    • Attach an event (optional)

    • Specify what happens

      “For this heading,

      when the user clicks on it,

      I want monkeys to fly across the page.”


3 step process l.jpg

3-Step Process

  • Select element:

    jQuery( ‘h2’ )

  • Attach an event:

    jQuery( ‘h2’ ).click( )

  • Specify what happens:

    jQuery( ‘h2’ ).click( monkeysFly );


Your final statement l.jpg

Your Final Statement

jQuery(‘h2’).click( monkeysFly );


Horthand l.jpg

$horthand

$(‘h2’).click( monkeysFly );

see example


More selectors l.jpg

More Selectors

$(‘input’).click( monkeysFly );

$(‘.title’).click( monkeysFly );

$(‘#edit-title’).click( monkeysFly );

$(‘h2, h3, .title’).click( monkeysFly );


Monkey code l.jpg

Monkey Code

Inside script.js:

$('h2').click( monkeysFly );

function monkeysFly() {

$('img.monkey').fadeIn('slow');

}


Anonymous functions l.jpg

Anonymous Functions

$('h2').click(

function() {

$('img.monkey').fadeIn('slow');

}

);


Anonymous functions 2 l.jpg

Anonymous Functions, 2

$('h2').click(function() {

$('img.monkey').fadeIn('slow');

});


Wait til browser is ready l.jpg

Wait ‘Til Browser is Ready

$(document).ready(function() {

$('h2').click(function() {

$('img.monkey').fadeIn('slow');

});

});


Tool visual jquery l.jpg

Tool: Visual jQuery

  • http://visual.jquery.com/


Example dynamic form components l.jpg

Example: Dynamic Form Components

  • Show character count as user is typing?No problem!


Example dynamic form components23 l.jpg

Example: Dynamic Form Components

Let’s do this in a module

countchars.module:

function countchars_init() {

$path = drupal_get_path(‘module’, ‘countchars’);

drupal_add_js( $path . ‘/countchars.js’);

}


Example dynamic form components24 l.jpg

Example: Dynamic Form Components

  • countchars.js

    • $(document).ready(function() {

    • });


Countchars js l.jpg

countchars.js

  • $(document).ready(function() {

  • $('#edit-title').keyup( function() {

  • });

  • });


Countchars js26 l.jpg

countchars.js

$(document).ready(function() {

$('#edit-title').after( '<div id="chars">characters: 0</div>' );

$('#edit-title').keyup( function() {

});

});


Chaining l.jpg

Chaining

  • $(document).ready(function() {

  • $('#edit-title')

  • .after( '<div id="chars">characters: 0</div>' )

  • .keyup( function() {

  • });

  • });


Countchars js28 l.jpg

countchars.js

  • $(document).ready(function() {

  • $('#edit-title')

  • .after( '<div id="chars">characters: 0</div>' )

  • .keyup(function() {

  • var count = $('#edit-title').val().length;

  • $('#chars').html( 'characters: ' + count );

  • });

  • });


Slide29 l.jpg

$(this)

  • $(document).ready(function() {

  • $('#edit-title')

  • .after( '<div id="chars">characters: 0</div>' )

  • .keyup(function() {

  • var count = $(this).val().length;

  • $('#chars').html( 'characters: ' + count );

  • });

  • });


Countchars js30 l.jpg

countchars.js

  • var count = $(this).val().length;

  • $('#chars').html( 'characters: ' + count );

  • if(count < 15) {

  • $('.body-field-wrapper').fadeIn('slow');

  • }

  • else {

  • $('.body-field-wrapper').fadeOut('slow');

  • }


  • Resources l.jpg

    Resources

    • jquery.com -- main site

    • visual.jquery.com -- reference

    • jqueryui.com -- UI components

    • getfirebug.com -- inspecting/debugging

    • addons.mozilla.org/en-US/firefox/addon/60/-- web developer toolbar

    Contact

    • amit@returncontrol.com

    • http://returncontrol.com

    • http://parentingmode.com


  • Login