Comment utiliser jQuery UI bibliothèque de widgets

Nous allons créer une barre de progression. Comme le montrent les exemples suivants, qui en appelant jQuery.widget() pour remplir, il faut deux paramètres: un plug-in nom doit être créé, un texte qui contient l'objet est une fonction de prise en charge. Lorsque la fiche est appelée, elle crée une nouvelle instance de plug-in, toutes les fonctions seront exécutées dans le cadre de cet exemple. Ce deux façons importantes standard différent plugin jQuery. Tout d'abord, le contexte est un objet, pas un élément DOM. Deuxièmement, le contexte est toujours un seul objet, et non pas une collection.

$.widget( "custom.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

Doit contenir le nom de l'espace de noms de plug - in, dans cet exemple, nous utilisons une custom espace de noms. Vous ne pouvez créer une couche espace profond, donc, custom.progressbar est un plug-in efficace nom, very.custom.progressbar pas un plug-in nom valide.

Nous avons vu bibliothèque de composants (Widget Factory) nous fournit deux propriétés. this.element est un objet jQuery contenant un élément. Si nous appelons l'objet plug-in jQuery qui contient plusieurs éléments, il va créer une instance de plug-in pour chaque élément et chaque instance aura son propre this.element . La seconde propriété, this.options , est un choix de plug-in comprennent toutes les principales paires nom / valeur de hachage (hash). Ces options peuvent être transmises à plug-in, comme suit:

$( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });

Lorsque nous appelons jQuery.widget() , qui en donnant jQuery.fn (utilisé pour créer un système de plug-in standard) ajouter la fonction d'étendre jQuery. Nom de la fonction est ajoutée en fonction de votre passe jQuery.widget() nom sans l'espace de noms - "progressbar". Option-pass enfichable est d'obtenir la valeur définie dans l'instance plugin. Comme le montre l'exemple suivant, nous pouvons spécifier une valeur par défaut à toute option. Lors de la conception de votre API, vous devez être conscient de l'utilisation la plus courante de votre plug-in, de sorte que vous pouvez définir la valeur par défaut appropriée, et veiller à ce que toutes les options vraiment facultatif.

$.widget( "custom.progressbar", {
 
    // Default options.
    options: {
        value: 0
    },
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

Appelez les méthodes de plug-in

Maintenant, nous pouvons initialiser notre barre de progression, nous allons effectuer une action en appelant la méthode sur l'instance du plug-in. Pour définir une méthode de plug-in, nous ne nous passons jQuery.widget() référence à un objet de fonction. On peut aussi définir la méthode «privée» au nom de la fonction avec un préfixe de soulignement.

$.widget( "custom.progressbar", {
 
    options: {
        value: 0
    },
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    },
 
    // Create a public method.
    value: function( value ) {
 
        // No value passed, act as a getter.
        if ( value === undefined ) {
            return this.options.value;
        }
 
        // Value passed, act as a setter.
        this.options.value = this._constrain( value );
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
 
    // Create a private method.
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Pour invoquer une méthode sur une instance de plug-in, vous pouvez passer le nom de la méthode pour le plugin jQuery. Si vous appelez une méthode pour accepter des paramètres, il vous suffit de passer le nom de la méthode derrière ces paramètres.

Remarque: La fonction jQuery est passé à la même nom de méthode utilisée pour initialiser le plug-in pour effectuer le procédé. Ceci est fait pour empêcher la pollution de l'espace de noms jQuery tout en maintenant les appels de méthode de la chaîne. Dans les chapitres suivants, nous verrons d'autres utilisations plus naturelles.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });
 
// Get the current value.
alert( bar.progressbar( "value" ) );
 
// Update the value.
bar.progressbar( "value", 50 );
 
// Get the current value again.
alert( bar.progressbar( "value" ) );

Utilisez les options

l' option() méthode est automatiquement fournie au plug-in. l' option() méthode vous permet d'obtenir et des options de réglage après l' initialisation. Procédé de jQuery .css() et .attr() méthode: Vous ne pouvez passer un nom comme argument consiste à utiliser, vous pouvez également passer un nom et la valeur que définie à l' aide ou de transmettre une clé / paires de valeurs de nom hachage pour définir des valeurs multiples. Lorsqu'il est utilisé comme une valeur, un plug-in renvoie le nom de l'option entrant la valeur de courant correspondant. Lorsqu'il est utilisé comme un setter widget _setOption méthode sera appelée pour chaque option est réglée. Nous pouvons spécifier un plug-in dans notre _setOption méthode pour refléter le changement des options. Modifier les options pour l' action à effectuer de façon indépendante, nous pouvons remplacer _setOptions .

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Ajouter rappel

L'extension la plus simple est d'ajouter un rappel pour que les utilisateurs puissent réagir en cas de changement dans l'état de plug-in. Nous pouvons regarder l'exemple suivant de la façon d'ajouter un rappel à la barre de progression lorsque la barre de progression atteint 100 pour cent. _trigger() méthode prend trois arguments: le nom de la fonction de rappel, un événement jQuery de rappel a commencé des objets, et un hachage des données associées à l'événement. nom Callback est le seul paramètre nécessaire, mais qui veulent mettre en œuvre des fonctions personnalisées des utilisateurs sur le plug-in, les autres paramètres sont très utiles. Par exemple, si nous créons un plugin draggable, nous pouvons passer évènement drag mousemove lorsqu'il est déclenché le rappel, qui permettra aux utilisateurs de répondre à l'événement en fonction de l'objet fourni par les coordonnées x / y de la traînée. S'il vous plaît noter passé à _trigger() de l'événement d' origine doit être un événement jQuery au lieu d'un événement navigateur natif.

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Fonction de rappel essentiellement juste une option supplémentaire, de sorte que vous pouvez obtenir le même que les autres options et les mettre. À chaque fois que le rappel, il y aura un événement correspondant est déclenché. Type de l'événement est le nom et le nom de la fonction de rappel pour déterminer la fiche de connexion. Callback et l'événement acceptent les deux mêmes arguments: un objet d'événement et un hachage des données associées à l'événement, en particulier comme le montrent les exemples suivants. Vous devrez peut-être inclure un plug-in fonctionnalités pour empêcher les utilisateurs, dans le but de le faire, la meilleure façon est de créer l'amour vous pouvez révoquer callbacks. Les utilisateurs peuvent révoquer le rappel ou un événement lié à un natif de révoquer tout état de cause avec eux, ils sont en appelant event.preventDefault() ou de retour false à atteindre. Si vous révoquez rappel, _trigger() méthode retourne false , de sorte que vous pouvez obtenir la fonction appropriée dans les plug-ins.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

nature

Maintenant, nous avons vu comment utiliser la bibliothèque widget de (Widget Factory) pour créer un plug-in, regardons comment cela fonctionne réellement. Lorsque vous appelez jQuery.widget() , il crée une fonction constructeur pour le plug-in et réglez votre instance plugin est passé comme un objet prototype. Toutes les fonctions sont automatiquement ajoutés au widget vient d'un widget de base d' un prototype, défini comme jQuery.Widget.prototype . Lorsque vous créez un plug-in exemple sera utilisé jQuery.data stocke sur l'élément DOM d' origine, plug-in nom comme nom de clé.

Depuis l'instance plug-in directement lié à l'élément DOM, vous pouvez directement accéder au plug-in exemple, sans la nécessité de traverser les méthodes de plug-in. Cette méthode vous permettra d'appeler directement sur l'instance du plug-in, sans avoir à passer une chaîne nom de la méthode, et vous pouvez également accéder aux propriétés branchent directement.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );

Vous pouvez également créer une instance du plug-in sans méthodes traversal, et la possibilité d'appeler directement les éléments du constructeur:

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

Extension du prototype

constructeurs et prototypes Widget plus grand avantage est extensions faciles. En ajoutant ou en modifiant le prototype méthode de prise, nous pouvons modifier le comportement du widget de toutes les instances. Par exemple, si nous voulons ajouter une méthode à la barre de progression pour réinitialiser à 0% des progrès, nous pouvons ajouter cette méthode pour le prototype, qui sera appelée sur toutes les instances de plug-in.

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

Pour les widgets étendus pour plus de détails et de la façon de créer un nouveau widget sur un widget de plus de détails existants, voir le widget de étendu (Widget) par les bibliothèques membres (de l'Widget Factory) .

résoudre

Dans certains cas, l'application permet à l'utilisateur de plug-ins, puis annuler l'application. Vous pouvez _destroy() pour faire cette méthode. Dans _destroy() dans une méthode, vous devez annuler toutes les actions lors de l' initialisation et de post-utilisation des plug-ins font. _destroy() par .destroy() méthode est appelée, .destroy() méthode est un plug-in cas lors du retrait d' un élément à partir des liaisons DOM appelées automatiquement, donc il peut être utilisé pour la collecte des ordures. Basic .destroy() méthode est aussi couramment utilisé pour traiter certaines opérations de nettoyage, telles que la suppression de l'élément DOM de l'instance de widget cité widget unbind namespace tous les événements à partir des éléments, utilisez unbind tous _bind() ajouter des événements.

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

notes Fermer

Bibliothèque de composants (Widget Factory) est un moyen de créer un état pour le bouchon. Il existe d'autres modèles différents peuvent être utilisés, et chacun a ses propres avantages et inconvénients. Bibliothèque de composants (Widget Factory) résout de nombreux problèmes communs, et améliore grandement l'efficacité, mais aussi d'améliorer grandement la réutilisabilité du code, le rendant approprié pour jQuery UI et autre état des plug-ins.

Notez que dans cette section , nous utilisons le custom espace de noms. ui espace est réservé plug - in officiel jQuery UI. Lorsque vous créez vos propres plug-ins, vous devez créer votre propre espace de noms. Afin de mieux d'où bouchon, qui appartient à la gamme.