jQuery: Difference between revisions
No edit summary |
|||
Line 95: | Line 95: | ||
===Override base jQuery UI theme=== | ===Override base jQuery UI theme=== | ||
# download new jQuery UI theme and extract it into theme/sometheme/jquery/ | # download new jQuery UI theme and extract it into theme/sometheme/jquery/custom-1.0 | ||
# | # define new jQuery theme ui css plugin in theme/sometheme/jquery/plugins.php | ||
# overrider core 'ui-css' with 'yourtheme-ui-css' | # overrider core 'ui-css' with 'yourtheme-ui-css' | ||
Revision as of 11:24, 20 March 2013
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
- create /theme/sometheme/lib.php file if it does not exist yet
- add new function theme_sometheme_page_init to the lib.php file (replace 'sometheme' with real name of your theme)
- 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
- download new jQuery UI theme and extract it into theme/sometheme/jquery/custom-1.0
- define new jQuery theme ui css plugin in theme/sometheme/jquery/plugins.php
- overrider core 'ui-css' with 'yourtheme-ui-css'
<?php
// file: theme/sometheme/jquery/plugins.php
$plugins = array(
'some-ui-css' => array('files' => array('custom-1.0/jquery-ui-1.10.2.custom.min.css')),
);
<?php
// file: /theme/sometheme/lib.php
function theme_sometheme_page_init(moodle_page $page) {
// There is no need to $page->requires->jquery() ff the theme does not use jQuery.
$page->requires->jquery_plugin('sometheme-ui-css', 'theme_sometheme');
$page->requires->jquery_override_plugin('ui-css', 'sometheme-ui-css');
}
Backwards compatibility for scripts written for older jQuery scripts
$PAGE->requires->jquery_plugin('migrate');
mymobile theme
See mymobile theme for more information including custom jQuery plugins, integration with jQuery Mobile.
More information
jQuery plugin collisions
The loading order of plugins is defined by order of $PAGE->requires. If there are plugins with the same name the first $PAGE->require wins.
It is recommended to use plugin overrides only in themes because multiple overrides of the same plugin result in undefined behaviour. In general themes should have more freedom to add extra jQuery plugins, other Moodle plugins should ideally use only basic jQuery or jQuery UI.
Updating plugins
Files in jQuery plugins MUST NOT be changed, always create a new file with different name and update CSS and plugins.php if necessary.