Book Image

Moodle JavaScript Cookbook

Book Image

Moodle JavaScript Cookbook

Overview of this book

Moodle is the best e-learning solution on the block and is revolutionizing courses on the Web. Using JavaScript in Moodle is very useful to administrators and dynamic developers as it uses built-in libraries to provide the modern and dynamic experience that is expected by web users today.The Moodle JavaScript Cookbook will take you through the basics of combining Moodle with JavaScript and its various libraries and explain how JavaScript can be used along with Moodle. It will explain how to integrate Yahoo! User Interface Library (YUI) with Moodle. YUI will be the main focus of the book, and is the key to implementing modern, dynamic feature-rich interfaces to help your users get a more satisfying and productive Moodle experience. It will enable you to add effects, make forms more responsive, use AJAX and animation, all to create a richer user experience. You will be able to work through a range of YUI features, such as pulling in and displaying information from other websites, enhancing existing UI elements to make users' lives easier, and even how to add animation to your pages for a nice finishing touch.
Table of Contents (15 chapters)
Moodle JavaScript Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Adding custom tooltips


HTML tooltips, set up through the title attributes of elements, allow only text-based tooltips with no control over the layout. In this example, we will enhance an existing element with the YUI Tooltip widget.

How to do it...

To begin, set up a PHP page, tooltip.php, containing an image with the title attribute set:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/tooltip.php');
$PAGE->requires->js('/cook/tooltip.js', true);
echo $OUTPUT->header();
?>
<img id="logo" src="../theme/image.php?theme=standard&image=moodlelogo" title="Moodle Logo" />
<?php
echo $OUTPUT->footer();
?>

Next, set up the associated JavaScript file tooltip.js:

YUI().use("yui2-yahoo-dom-event", "yui2-animation", "yui2-container", function(Y) {
var YAHOO = Y.YUI2;
var toolTip = new YAHOO.widget.Tooltip("toolTip", {
context: "logo"});
});

Create an element to which we will...