Latest web development tutorials

jQuery UI Exemples - Galerie partie (Widget Factory)

Utilisez widgets jQuery UI avec tout le même abstraction pour créer stateful plugin jQuery.

Pour plus de détails au sujet de la bibliothèque de widgets (Widget Factory), consultez la documentation de l' API bibliothèque de composants (Widget Factory) .

La fonction par défaut

La démo montre un simple à utiliser des bibliothèques de composants (de jquery.ui.widget.js) pour créer des widgets personnalisés.

Trois blocs d'une manière différente pour initialiser. Cliquez pour changer leur couleur d'arrière-plan. Voir le code source et les commentaires pour comprendre comment cela fonctionne.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI bibliothèque de widgets (Widget Factory) - La fonction par défaut </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .custom-coloriser {
    font-size: 20px;
    position: relative;
    largeur: 75px;
    hauteur: 75px;
  }
  .custom-coloriser changeur {
    font-size: 10px;
    position: absolute;
    droite: 0;
    bottom: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    // Définitions membres, dans lequel l'espace de noms "personnalisé", "coloriser" est le nom du membre $ .widget ( "custom.colorize", {
      // Les options par défaut: {
        rouge: 255,
        vert: 0,
        bleu: 0,
 
        // Changement Callback: null,
        aléatoire: null
      },
 
      // Constructor _create: function () {
        this.element
          // Ajouter un sujet de classe
          .addClass ( "custom-coloriser")
          // Empêcher double-cliquez pour sélectionner le texte .disableSelection ();
 
        this.changer = $ ( "<button>", {
          texte: "changement"
          "Classe": "custom-coloriser-changeur"
        })
        .appendTo (this.element)
        .button ();
 
        // Lie le bouton événement click de changeur à la méthode aléatoire this._on (this.changer, {
          // Lorsque le widget est désactivé, _on pas appelé aléatoire
          cliquez sur: "aléatoire"
        });
        this._refresh ();
      },
 
      () Fonction {: // appeler _refresh lorsque vous créez et modifiez les options
        this.element.css ( "background-color", "rgb (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        // Déclencher un rappel this._trigger / événement ( «changement»);
      },
 
      // Change la couleur à une valeur aléatoire // méthodes publiques peuvent être appelées directement via .colorize aléatoire ( "random"): function (event) {
        couleurs var = {
          rouge: Math.floor (Math.random () * 256),
          vert: Math.floor (Math.random () * 256),
          bleu: Math.floor (Math.random () * 256)
        };
 
        // Déclencher un événement, vérifier si annulée si (this._trigger ( «aléatoires», événement, couleurs)! == False) {
          this.option (couleurs);
        }
      },
 
      // Événement de suppression automatique lié par _on ici // réinitialisé autres modifications _destroy: function () {
        // Supprime les éléments générés this.changer.remove ();
 
        this.element
          .removeClass ( "custom-coloriser")
          .enableSelection ()
          Css ( "background-color", "transparent");
      },
 
      // _setOptions Par un hachage tout changé avec des options pour appeler // lors du changement des options sont toujours rafraîchir _setOptions: function () {
        // _super Et _superApply
        this._superApply (arguments);
        this._refresh ();
      },
 
      // _setOption _setOption Pour chaque individu pour modifier les options appellent: function (clé, valeur) {
        valeurs // couleur pour empêcher invalide si (/red|green|blue/.test(key) && (valeur <0 || valeur> 255)) {
          retour;
        }
        this._super (clé, valeur);
      }
    });
 
    // Initialisation les options par défaut $ ( "# my-widget1") .colorize ();
 
    // Par deux options personnalisées pour initialiser $ ( "# my-widget2") .colorize ({
      rouge: 60,
      bleu: 60
    });
 
    // Vert par la valeur de l'auto-défini et permet seulement une couleur verte rappel aléatoire suffisant pour initialiser $ ( "# my-WIDGET3") .colorize ({
      vert: 128,
      aléatoire: function (event, ui) {
        retour ui.green> 128;
      }
    });
 
    // Cliquez sur Switch activé / désactivé
    $ ( "#disable") .cliquez (Function () {
      // sélecteurs personnalisés pour chaque widget pour trouver toutes les instances // Toutes les instances de commutation ensemble, afin que nous puissions commencer à partir du premier état pour vérifier si ($ ( ": custom-coloriser") .colorize ( "option", "désactivé")) {
        $ ( ": Custom-coloriser") .colorize ( "activer");
      } Else {
        $ ( ": Custom-coloriser") .colorize ( "désactiver");
      }
    });
 
    // Après l'initialisation, cliquez sur l'option Paramètres $ ( "#Black") .cliquez (function () {
      $ ( ": Custom-coloriser") .colorize ( "option", {
        rouge: 0,
        vert: 0,
        bleu: 0
      });
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div>
  <Div id = "my-widget1"> changer de couleur </ div>
  <Div id = "my-widget2"> changer de couleur </ div>
  <Div id = "my-WIDGET3"> changer de couleur </ div>
  <Bouton id = "désactiver"> passer l'option désactivée </ button>
  <Bouton id = "black"> Black </ button>
</ Div>
 
 
</ Body>
</ Html>

la