Comment étendre un widget jQuery UI existant?

Je suis à l'aide de jQuery v1.8.3 et jQuery UI v1.9.2. Je voudrais étendre existant jQuery UI widget (dans mon cas, le La saisie semi-automatique widget) en ajoutant et en remplaçant juste quelques options et les méthodes, mais en conservant les autres fonctionnalités que les personnes présentes dans la version officielle. Comment puis-je faire pour que le "bon" (peut-être, la "norme")?

P. S.: j'ai cherché sur le Web (UnDeux...) et j'ai trouvé de la documentation pour la plupart liés à la création d'une nouvelle jQuery UI widget, mais pas à l'extension de l'existant.

source d'informationauteur user12882

  1. 37

    Dans l'INTERFACE utilisateur de jQuery 1.9+, l'extension d'un widget se fait de la même manière que la création d'un nouveau widget. Le widget factory ($.widget()) prend en charge quelques scénarios:

    La création d'un nouveau widget à l'aide de la base de widget ($.Widget) comme point de départ:

    $.widget( "ns.widget", { ... } )

    La création d'un nouveau widget qui hérite d'un widget:

    $.widget( "ns.widget", $.ns.existingWidget, { ... } )

    L'extension d'un widget:

    $.widget( "ns.widget", $.ns.widget, { ... } )

    Vous remarquerez que l'extension de la syntaxe et de l'héritage de la syntaxe sont les mêmes. Le widget factory est assez intelligent pour remarquer que le widget que vous êtes en train de créer et le widget que vous êtes héritant de sont les mêmes et gérer de manière appropriée.

    Quand hériter ou de l'extension d'un widget, vous avez seulement besoin de définir ce que vous voulez modifier ou ajouter. Il y a aussi quelques nouvelles méthodes qui existent sur la base de widget pour le rendre plus facile de travailler avec l'héritage et les méthodes de changement de contexte. Lire la jQuery.Widget de documentation pour une liste complète des méthodes et de leurs descriptions. Vous aurez envie de lire sur _super() si vous êtes à l'extension d'un widget.

    Voici un exemple qui permettrait de modifier la valeur par défaut delay option pour 500 et ajouter une nouvelle option prefix qui est ajouté à toutes les suggestions:

    $.widget( "ui.autocomplete", $.ui.autocomplete, {
    options: {
        delay: 500,
        prefix: ""
    },

    _renderItem: function( ul, item ) {
        var label = item.label;
        if ( this.options.prefix ) {
            label = this.options.prefix + " " + label;
        }
        return $( "<li>" )
            .append( $( "<a>" ).text( label ) )
            .appendTo( ul );
    },
});