Version 6 (modified by 11 years ago) ( diff ) | ,
---|
JavaScript for Trac and plugin development
JavaScript is used in Trac to add dynamics to web interface elements on the browser side:
- expanding/folding in TracBrowser
- providing keyboard shortcuts
- …
3rd party libraries
jQuery
Trac makes heavy use of jQuery library to ease development. Access to this library contents is usually provided through the main function named $. $ as a name used for brevity and clarity. Unfortunately, other libraries may use it too and this may cause conflicts. $ in fact is just a shortcut for jQuery namespace and it is possible to use full name instead. But to avoid conflicts with other libraries $ shortcut should is turned off by switching jQuery into non-conflict mode with jQuery.noConflict() call. This is well explained in http://docs.jquery.com/Using_jQuery_with_Other_Libraries
However, you will see many blocks in Trac that use $ for jQuery. They do it in their local scope defined by nameless function (or closure):
(function($) { /* some code that uses $ */ })(jQuery)
There is a good description of closures and (function(){})()
construct at http://ajaxian.com/archives/secrets-of-the-javascript-ninja-a-sneak-peak-for-ajaxians
$(document).ready()
To execute and modify DOM tree JavaScript function should usually wait until a page fully loads. With jQuery it looks like:
$(document).ready(function_name);
In non-conflicting mode, code that executed in Trac on page startup is enveloped in closure and looks like:
jQuery(document).ready(function($) { ... });
jQuery UI
Since Trac version 1.0, we also bundle jQuery UI, a set of standard UI elements.
Specific releases can be downloaded from the following URLs: http://code.jquery.com/ui/1.x.y/jquery-ui.min.js
This correspond to the minified version of the whole of jQuery UI (i.e. we don't use a subset of what is currently used by Trac on purpose, so that plugins can assume they have access to the all the jQuery UI components).
We use a custom theme for the CSS, built using the jQuery UI Theme Roller. The jquery-ui.css file contains a link to the theme roller with preselected values (link at the time of this writing, for Trac 1.0.0).
Our date picker is a jQuery UI add-on, the jQuery Timepicker.