Intro to jQuery for Drupal
Upcoming SlideShare
Loading in...5
×
 

Intro to jQuery for Drupal

on

  • 2,576 views

 

Statistics

Views

Total Views
2,576
Views on SlideShare
2,570
Embed Views
6

Actions

Likes
1
Downloads
16
Comments
1

1 Embed 6

http://zivtech_redesign.dev.zivtech.com 6

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • As a simple example lets look at how you&apos;d go about finding all the https links on a page and adding some additional text marking them as secure, turning <a href="https://example.com">Example</a> into <a href="https://example.com">Example (Secure!)</a>. This should make the importance of only running the code once apparent, if our code ran twice the link would end up reading "Example (Secure!) (Secure!)".\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Intro to jQuery for Drupal Intro to jQuery for Drupal Presentation Transcript

  • jQuery for Drupal
  • What is jQuery?
  • What is jQuery? • http://jquery.com
  • What is jQuery? • http://jquery.com • “write less, do more”
  • Why is it so fun?
  • Why is it so fun?• Removes cross-browser pain
  • Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge
  • Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge• Animates elements on the page
  • Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge• Animates elements on the page• Compact code
  • What’s it best at?
  • What’s it best at?• Adding/Removing elements to/from the page
  • What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements
  • What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions
  • What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions• Responding to clicks, hovers, focus events
  • What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions• Responding to clicks, hovers, focus events• Selecting from and traversing the DOM
  • Core Drupal jQuery
  • Core Drupal jQuery• Drupal adopted jQuery into core starting with Drupal 5
  • Core Drupal jQuery• Drupal adopted jQuery into core starting with Drupal 5• In /misc: drag-and-drop ordering, expandable textareas, collapsible fieldsets, autocomplete, persistent table headers etc.
  • Syntaxhttp://docs.jquery.com/Types#jQuery
  • Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );
  • Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );• $(‘a’).addClass(‘test’);
  • Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );• $(‘a’).addClass(‘test’);• $(‘#page p’).click(function() { $(this).hide(‘slow’); });
  • Adding jQuery to a theme
  • Adding jQuery to a theme• drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’);
  • Adding jQuery to a theme• drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’);• Add this to the top of template.php or in a specific theme function
  • Drupal behaviors
  • Sending settings to jQuery
  • Sending settings to jQuery• Add setting from PHP
  • Sending settings to jQuery• Add setting from PHP
  • Sending settings to jQuery• Add setting from PHP• Access Drupal.settings.myModule from within jQuery
  • jQuery Release Cycle
  • jQuery Release Cycle• Drupal 7 has jQuery 1.4.4
  • jQuery Release Cycle• Drupal 7 has jQuery 1.4.4• Latest jQuery is 1.6.2
  • jQuery Release Cycle• Drupal 7 has jQuery 1.4.4• Latest jQuery is 1.6.2• jQuery Update
  • Overriding JS
  • Overriding JS• Override JS functions by redeclaring afterwards
  • Overriding JS• Override JS functions by redeclaring afterwards• ‘theme’ JS loads after ‘core’ and ‘module’ JS
  • ProgressiveEnhancement
  • Progressive Enhancement• Build the page without relying on jQuery
  • Progressive Enhancement• Build the page without relying on jQuery• Fancify for additional coolness
  • Progressive Enhancement• Build the page without relying on jQuery• Fancify for additional coolness• Never use js to make changes that should be done in markup, styles, or PHP
  • AJAX
  • Form API #states
  • Common Use Cases
  • Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals
  • Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals• Search bar with disappearing default value
  • Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals• Search bar with disappearing default value• Slicker functionality with AJAX and AHAH
  • Popular Modules
  • Popular Modules• Colorbox
  • Popular Modules• Colorbox• Quick Tabs
  • Popular Modules• Colorbox• Quick Tabs• Views Slideshow
  • Popular Modules• Colorbox• Quick Tabs• Views Slideshow• Beauty Tips
  • Popular Modules• Colorbox• Quick Tabs• Views Slideshow• Beauty Tips• Hierarchical Select
  • Popular Modules• Colorbox • Views UI• Quick Tabs• Views Slideshow• Beauty Tips• Hierarchical Select
  • Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow• Beauty Tips• Hierarchical Select
  • Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow • Views Accordion• Beauty Tips• Hierarchical Select
  • Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow • Views Accordion• Beauty Tips• Hierarchical • Feedback Select
  • jQuery UI
  • jQuery UI
  • jQuery UI• Used to be jquery_ui module
  • jQuery UI• Used to be jquery_ui module• In Drupal 7 core!
  • Resources & Tools
  • Resources & Tools• http://api.jquery.com
  • Resources & Tools• http://api.jquery.com• Firebug for Firefox
  • Resources & Tools• http://api.jquery.com• Firebug for Firefox• http://drupal.org/node/171213
  • Demo
  • Demo• Let’s do this.