jQuery

Moodle 2.5

WORK IN PROGRESS

YUI is the recommended library for development of Moodle plugins or customisations. However due to significant demand it will be possible to use also jQuery in Moodle 2.5 and later.

Examples

Basic jQuery in add-on theme

1. create /theme/sometheme/lib.php file if it does not exist yet
2. add new function theme_sometheme_page_init to the lib.php file (replace 'sometheme' with real name of your theme)
3. use jQuery JavaScript in theme layout files

<?php // file: /theme/sometheme/lib.php function theme_sometheme_page_init(moodle_page $page) {

   $page->requires->jquery();

}

// near the end of file: /theme/sometheme/layout/general.php <script>

 $('.headermain').mouseover(function() {
   alert('grrr');
 });

</script>

jQuery UI in add-on activity module

<?php require('../../config.php');

// ... normal PAGE and access control

$PAGE->requires->jquery(); $PAGE->requires->jquery_plugin('ui'); $PAGE->requires->jquery_plugin('ui-css');

echo $OUTPUT->header(); ?>

   <button>A button element</button>

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

   <script>
       $(function() {
           $( "#dialog" ).dialog();
       });
   </script>

<?php echo $OUTPUT->footer();

jQuery UI in add-on block


class block_html extends block_base {

   function get_required_javascript() {
       parent::get_required_javascript();

       $this->page->requires->jquery();
       $this->page->requires->jquery_plugin('ui');
       $this->page->requires->jquery_plugin('ui-css');
   }

   function get_content() {

       // ....

       $this->content->text .= '

<script>

 $(function() {
   $( "#progressbar" ).progressbar({
     value: 37
   });
 });
 </script>';

       // ....
   }

Override base jQuery UI theme

1. download or create a new jQuery UI theme
2. create new jQuery theme ui css plugin in your theme
3. overrider core 'ui-css' with 'yourtheme-ui-css'

<?php // file: /theme/sometheme/lib.php function theme_sometheme_page_init(moodle_page $page) {

   $page->requires->jquery('sometheme-ui-css', 'theme_sometheme');
   $page->requires->jquery_override_plugin('ui-css', 'sometheme-ui-css');

}

Backwards compatibility for scripts written for older jQuery scripts

See jQuery Migrate plugin

$PAGE->requires->jquery_plugin('migrate');

mymobile theme

See mymobile theme for more information including custom jQuery plugins, integration with jQuery Mobile.