jQuery UI

Drupal uses a default jQuery UI theme. Here is how to use your own theme created using the jQuery ThemeRoller.

Put the generated jQuery UI theme in your theme directory, in a subfolder called "jquery-ui". It should have an "images" folder and a "jquery-ui.css" file.

Then, in your theme's template.php :

/**
* Implements hook_library_alter().
*/
function YOUR_THEME_library_alter(&$libraries, $module) {
$libraries['ui']['css'] = array();
$libraries['ui.accordion']['css'] = array();
$libraries['ui.autocomplete']['css'] = array();
$libraries['ui.button']['css'] = array();
$libraries['ui.datepicker']['css'] = array();
$libraries['ui.dialog']['css'] = array();
$libraries['ui.draggable']['css'] = array();
$libraries['ui.droppable']['css'] = array();
$libraries['ui.mouse']['css'] = array();
$libraries['ui.position']['css'] = array();
$libraries['ui.progressbar']['css'] = array();
$libraries['ui.resizable']['css'] = array();
$libraries['ui.selectable']['css'] = array();
$libraries['ui.slider']['css'] = array();
$libraries['ui.sortable']['css'] = array();
$libraries['ui.tabs']['css'] = array();
$libraries['ui']['css'][drupal_get_path('theme', 'YOUR_THEME') . '/jquery-ui/jquery-ui.css'] = array();
}

To extend a jQuery UI widget with your own widget, 3 important things :

  • jQuery UI uses the data() function to store information related to the widget. The data identifier of the element will be your widget name, so you must copy its value to the original data value.
  • For each function you want to extend, call the original function of the widget with apply().
  • Set the default options.

$.widget("ui.customsortable", $.extend({}, $.ui.sortable.prototype, {
 
  _init: function(){
    this.element.data('sortable', this.element.data('customsortable'));
    return $.ui.sortable.prototype._init.apply(this, arguments);
  }
 
  // Override other methods here.
 
}));
 
$.ui.customsortable.defaults = $.extend({}, $.ui.sortable.defaults);

Syndicate content