Download - Javascript jQuery jQuery Ui
Stuff I’ll cover today.
• JavaScript.
• The DOM (Document Object Model).
• Adding Behaviors to HTML.
• You don’t need to learn the DOM
• jQuery
• jQuery UI Tabs
• jQuery the Drupal Way
What is JavaScript?
• Client Side Scripting Language
• JavaScript is not Java
• Used to provide instant feedback
• Better Usability
• Richer Web Applications
• Works the DOM (i.e. HTML, XML, etc...)
What is the DOM?
The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.
https://developer.mozilla.org/en/DOM
The real DOMDocument
htmlElement
head
Elementbody
Elementdiv
Elementul
Elementdiv
Elementdiv
Elementdiv
Elementmeta
Elementtitle
Elementa
Elementa
Elementli
Elementli
Elementli
Elementa
Elementp
Elementp
Elementp
.getElementById(‘tabs’)
.innerHTML
id=”tabs”
The DOM is NOT JavaScript
Blue is for JavaScript, Red is for DOM
var anchorTags = document.getElementsByTagName(“a”)
for (var i = 0;i <anchorTags.length; i++){alert(“Href of this a element is: “ +
anchorTags[i].href);}
https://developer.mozilla.org/en/The_DOM_and_JavaScript
etc...
http://www.w3schools.com/jsref/jsref_events.asp
http://www.elated.com/articles/javascript-tabs/
An Example
Objective.
• Turn an HTML Document with an Unordered List into tabbed content.
• Format the HTML using CSS.
• Add Behavior so that you can change tabs onClick of the tab name.
Four JavaScript Functions
• init() sets up the tabs.
• showTab() displays a clicked tab's content and highlights the tab.
• getFirstChildWithTagName() is a helper function that retrieves the first child of a given element that has a given tag name.
• getHash() is another short helper function that takes a URL and returns the part of the URL that appears after the hash (#) symbol.
You need to know a lot.
• CSS
• Document Object Model (DOM)
• JavaScript
• Language Constructs
• Verify that the JavaScript works in other browsers.
Review jQuery Basics
$( [find something] ).doSomething();
$(“#tabs”).tabs();
CSS Selector jQuery UI Method
Why use Drupal.behaviors?
• Ability to override JS
• Behaviors are re-attachable
• Attach Behaviors to a specific context
• HTML loaded via AHAH
Drupal.attachBehaviors(elem);
Resources
http://jquery.com and http://jqueryui.com
http://www.elated.com/articles/javascript-tabs/
http://api.drupal.org/api/file/developer/topics/javascript_startup_guide.html/6
http://raincitystudios.com/blogs-and-pods/katherine-bailey/the-lowdown-jquery-drupal-part-two
http://www.chapterthree.com/blog/josh_koenig/handling_aysnchronous_data_drupal_session_materials
https://developer.mozilla.org/en/JavaScript