introduction to jquery for drupal l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to jQuery (for Drupal) PowerPoint Presentation
Download Presentation
Introduction to jQuery (for Drupal)

Loading in 2 Seconds...

play fullscreen
1 / 31

Introduction to jQuery (for Drupal) - PowerPoint PPT Presentation


  • 252 Views
  • Uploaded on

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

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

PowerPoint Slideshow about 'Introduction to jQuery (for Drupal)' - LeeJohn


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

Introduction to jQuery(for Drupal)

Amit Asaravala

http://returncontrol.com

amit@returncontrol.com

“aasarava” on drupal.org

what is jquery4
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 jquery6
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 non drupal
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
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
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');

}

writing jquery
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
3-Step Process
  • Select element:

jQuery( ‘h2’ )

  • Attach an event:

jQuery( ‘h2’ ).click( )

  • Specify what happens:

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

your final statement
Your Final Statement

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

horthand
$horthand

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

see example

more selectors
More Selectors

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

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

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

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

monkey code
Monkey Code

Inside script.js:

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

function monkeysFly() {

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

}

anonymous functions
Anonymous Functions

$('h2').click(

function() {

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

}

);

anonymous functions 2
Anonymous Functions, 2

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

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

});

wait til browser is ready
Wait ‘Til Browser is Ready

$(document).ready(function() {

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

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

});

});

tool visual jquery
Tool: Visual jQuery
  • http://visual.jquery.com/
example dynamic form components
Example: Dynamic Form Components
  • Show character count as user is typing?No problem!
example dynamic form components23
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
Example: Dynamic Form Components
  • countchars.js
    • $(document).ready(function() {
    • });
countchars js
countchars.js
  • $(document).ready(function() {
  • $('#edit-title').keyup( function() {
  • });
  • });
countchars js26
countchars.js

$(document).ready(function() {

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

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

});

});

chaining
Chaining
  • $(document).ready(function() {
  • $('#edit-title')
  • .after( '<div id="chars">characters: 0</div>' )
  • .keyup( function() {
  • });
  • });
countchars js28
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
$(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
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
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