Comment étendre un widget jquery ui ? (1.7)

Question

Je voudrais créer une version personnalisée du widget triable. J'ai cherché de la documentation, mais je n'ai pas pu trouver quelque chose de vraiment précis. La meilleure information que j'ai trouvée était : http://jqueryui.pbworks.com/Widget-factory .

J'ai essayé :

$.widget("ui.customsortable", $.extend($.ui.sortable, {
  _init: function() {
    $.widget.prototype._init.apply(this, arguments);
  }
}));

Mais $.widget.prototype._init n'est pas la fonction que je veux appeler je suppose puisque c'est le prototype de $.widget.

Ensuite, j'ai essayé quelque chose que j'ai lu ici et là :

var _init = $.ui.sortable.prototype._init; 

$.widget("ui.customsortable", $.extend($.ui.sortable, {
  _init: function() {
    _init.apply(this, arguments);
  },
}));

Mais :

• Je n'arrive pas à croire que je doive stocker toutes les méthodes que je veux surcharger comme ça, c'est tellement laid.
• Une erreur se produit ("this.refresh is not a function"), ce qui signifie que la méthode refresh n'existe pas. Cela signifie-t-il que je devrais recréer toutes les méthodes que je veux remplacer ? Quel est l'intérêt de l'extension dans ce cas ?

Est-ce que je rate quelque chose ?

Merci pour votre aide !

Answer 1

Ce sont des réponses un peu étranges. Il y a un deuxième paramètre facultatif - basewidget dont il faut hériter. C'est facile. Il n'est pas nécessaire de travailler avec des prototypes, etc.

$.widget( "ui.customsortable", $.ui.sortable, {

  _init: function() {
    this.element.data('sortable', this.element.data('customsortable'));
    // or whatever you want
  }
} );

Le deuxième paramètre est $.ui.sortable . Je pense que c'est tout ce dont vous avez besoin.

Answer 2

Après plusieurs tentatives, j'ai finalement trouvé comment le faire facilement :

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

La clé est de copier les données de votre widget personnalisé vers le widget original. N'oubliez pas d'utiliser $.ui.sortable.prototype.[overriden method].apply(this, arguments) ; dans chaque méthode surchargée.

Putain de merde !

Answer 3

En ce qui concerne la solution choisie ci-dessus :

$.widget("ui.customsortable", $.extend(true, {}, $.ui.sortable.prototype, {

Si vous étendez les options d'un objet à un autre, l'indicateur [deep] de true vous donnera les résultats souhaités.

Answer 4

Je m'en sers pour prédéfinir les fonctions de démarrage, d'arrêt et de mise à jour :

$.widget('ui.custom_sortable_or_any_other_name', $.ui.sortable, {
    _init: function() {
        this.element.children().css('position', 'relative'); //for example
    },
    options : {
        start: function (event, ui) {   
            ui.item.addClass('noclick'); //ui.item get's the item, that's my point
        },
        stop: function (event, ui) {            
        },
        update: function (event, ui) {
            $.ajax(); //some ajax you might want to do
        }
    }
});

Answer 5

Je ne sais pas exactement ce que vous recherchez, lorsque vous dites "étendre un widget". Dans mon cas, je voulais changer la façon dont le widget s'affichait, et le fait de tripoter les classes CSS ne me satisfaisait pas. Il ne s'agissait pas d'étendre le comportement d'un widget, mais plutôt de modifier le comportement d'un widget.

J'ai donc passé outre la méthode de rendu. Le widget en question était l'autocomplétion de jQueryUI et la commande prioritaire ressemblait à ceci :

function monkeyPatchAutocomplete() {  

  // don't really need this, but in case I did, I could store it and chain  
  var oldFn = $.ui.autocomplete.prototype._renderItem;  

  $.ui.autocomplete.prototype._renderItem = function( ul, item) {  
     // whatever 
  };  
}  

Je viens d'appeler ça en $(document).ready() .

---

liés :
- Puis-je remplacer ou modifier une fonction sur un widget jQuery UI ? Comment ?
- jQueryUI : comment puis-je personnaliser le format des résultats du plug-in Autocomplete ?