JavaScript Widgets

The Campus Web Office recommends jQuery UI for building rich interactive pages. You may choose a vast collection of widgets from jQuery UI. UXT has also endorses some widgets that extends from jQuery UI such as jQuery DataTable. In addition, we've provided some custom widgets that are not provided elsewhere.

Road Map

The CWO tries to stay up-to-date with the latest releases of jQuery and its plug-ins. Currently, we're at:

jQuery

If you are using the CWO decorators, jQuery and our styles are already imported. If not, include the following files:

<link media="all" rel="stylesheet" type="text/css"
    href="//www.ucsd.edu/common/cwp/active-cherry/base-min.css"/>
<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/base-min.js"></script>
<script type="text/javascript"
    src="//www.ucsd.edu/common/_emergency-broadcast/message.js"></script>

jQuery UI

To use jQuery UI, include the following jQuery UI files after the jQuery files in your web application:

<link media="all" rel="stylesheet" type="text/css"
    href="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery-ui-1.8.18/jquery-ui-min.css"/>
<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery-ui-1.8.18/jquery-ui-min.js"></script>

jQuery DataTable

If you are using a jQuery Data Table, import the following files after the jQuery UI files. Please read the data table widget page for more information.

<link media="all" rel="stylesheet" type="text/css"
    href="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.dataTables-1.9.0/jquery.dataTables-min.css"/>
<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.dataTables-1.9.0/jquery.dataTables-min.js"></script>

jQuery LiveQuery

If you are using jQuery LiveQuery, import the following files after the jQuery files.

<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.livequery-1.1.1/jquery.livequery-min.js"></script>

jQuery Watermark

If you are using jQuery Watermark, import the following files after the jQuery files.

<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.watermark-1.2/jquery.watermark-min.js"></script>

jQuery Form

If you are using jQuery Form, import the following files after jQuery files.

<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.form-3.02/jquery.form-min.js"></script>

jQuery FullCalendar

If you are using jQuery Calendar, import the following files after jQuery UI files.

<link media="all" rel="stylesheet" type="text/css"
    href="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.fullcalendar-1.5.3/jquery.fullcalendar-min.css"/>
<link media="print" rel="stylesheet" type="text/css"
    href="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.fullcalendar-1.5.3/jquery.fullcalendar.print-min.css"/>
<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.fullcalendar-1.5.3/jquery.fullcalendar-min.js"></script>

If you are using Google calendars as event sources, include the following:

<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.fullcalendar-1.5.3/jquery.gcal-min.js"></script>

Make sure you are using the jQuery UI themed calendar:

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
         $("#calendar").fullCalendar( {
             theme: true
         } );
    });
})(jQuery);
</script>

CWO Custom Widgets

We have a collection of frequently used widgets that does not exist or is extended for UC San Diego.