jQuery UI

Drupal utilise un thème jQuery UI par défaut. Voici comment utiliser votre propre thème crée en utilisant jQuery ThemeRoller.

Placez le thème jQuery UI généré dans votre thème, dans un sous-dossier appelé "jquery-ui".

Ensuite, dans le fichier template.php de votre thème :

/**
* 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();
}

Pour étendre un widget jQUery UI, 3 choses importantes :

  • jQuery UI utilise la fonction data() pour stocker les informations liées au widget. L'identifiant utilisé est le nom de votre widget, il faut donc le copier dans le data original.
  • Pour chaque fonction, il faut appeler la fonction du widget original avec apply().
  • Définir les options par défaut.

$.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);

Syndiquer le contenu