introduction to jquery for drupal
Download
Skip this Video
Download Presentation
Introduction to jQuery (for Drupal)

Loading in 2 Seconds...

play fullscreen
1 / 31

Introduction to jQuery - PowerPoint PPT Presentation


  • 238 Views
  • Uploaded on

Introduction to jQuery (for Drupal). Amit Asaravala http://returncontrol.com [email protected] “ 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' - 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

[email protected]

“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

ad