Difference between revisions of "User:Frank Ralf/jQuery"

Jump to: navigation, search

Note: You are currently viewing documentation for Moodle 2.0. Up-to-date documentation for the latest stable version is available here: Frank Ralf/jQuery.

(Collapsible course list)
(Collapsible course list)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
Some examples and proof of concept for using jQuery for enhancing Moodle usability.
 
Some examples and proof of concept for using jQuery for enhancing Moodle usability.
 +
 +
You can try those code snippets without changing your Moodle installation by using the [[Firebug]] extension [http://firequery.binaryage.com/ FireQuery].
  
 
== Collapsible course list ==
 
== Collapsible course list ==
  
<syntaxhighlight lang="javascript">
+
<code javascript>
jQuery('.section h3').wrapInner('<a href="#" />')
+
jQuery('.section h3').wrapInner('<a href="#" />') // make the heading clickable
 
   .click( function(event) {
 
   .click( function(event) {
 
     event.preventDefault();
 
     event.preventDefault();
     jQuery(this).parent().find('ul.section').toggle();
+
     jQuery(this).parent().find('ul.section').toggle(); // toggle the content of the section
 
})
 
})
jQuery('ul.section').hide();
+
jQuery('ul.section').hide();   // hide by default
</syntaxhighlight>
+
</code>

Latest revision as of 16:04, 6 November 2011

Some examples and proof of concept for using jQuery for enhancing Moodle usability.

You can try those code snippets without changing your Moodle installation by using the Firebug extension FireQuery.

Collapsible course list

jQuery('.section h3').wrapInner('<a href="#" />')  // make the heading clickable
  .click( function(event) {
    event.preventDefault();
    jQuery(this).parent().find('ul.section').toggle();  // toggle the content of the section
})
jQuery('ul.section').hide();   // hide by default