Latest web development tutorials

jQuery UI - Ejemplos Parte Gallery (Widget Factory)

Utilizar los widgets de interfaz de usuario jQuery con toda la misma abstracción para crear con estado plugin de jQuery.

Para más detalles acerca de la biblioteca del widget (Widget Factory), compruebe la documentación de la API biblioteca de componentes (Widget Factory) .

La función predeterminada

La demo muestra un sencillo de usar las bibliotecas de componentes (jquery.ui.widget.js) para crear widgets personalizados.

Tres bloques de una manera diferente para inicializar. Haga clic para cambiar su color de fondo. Ver código fuente y comentarios para entender cómo funciona. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> librería jQuery UI widgets (widgets de fábrica) - La función por defecto </ 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-colorear {
    font-size: 20px;
    position: relative;
    Ancho: 75px;
    altura: 75px;
  }
  .custom-colorear-cambiador {
    font-size: 10px;
    position: absolute;
    derecha: 0;
    parte inferior: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    // Definiciones miembros, en la que "a medida" espacio de nombres "colorear" es el nombre del miembro de $ .widget ( "custom.colorize", {
      // Las opciones por defecto: {
        rojo: 255,
        verde: 0,
        azul: 0,
 
        // Cambio de devolución de llamada: null,
        al azar: null
      },
 
      // _create Constructor: function () {
        this.element
          // Añadir un tema de clase
          .addClass ( "medida de colorear")
          // Evitar doble clic para seleccionar .disableSelection de texto ();
 
        this.changer = $ ( "<> botón", {
          texto: "cambio"
          "Clase": "costumbre-colorear-cambiador"
        })
        .appendTo (this.element)
        .button ();
 
        // Enlazar el botón de evento click cambiador de this._on método aleatorio (this.changer, {
          // Cuando el widget está desactivado, no se llama al azar _ON
          haga clic en: "aleatoria"
        });
        this._refresh ();
      },
 
      () Función: {// llamar _refresh cuando se crea y luego cambiar las opciones
        this.element.css ( "background-color", "RGB (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        // Desencadenar una this._trigger devolución de llamada / evento ( "cambio");
      },
 
      // Cambiar el color a un valor aleatorio // métodos públicos se pueden llamar directamente a través de .colorize aleatorio ( "random"): function (event) {
        colores var = {
          rojo: Math.floor (Math.random () * 256),
          verde: Math.floor (Math.random () * 256),
          azul: Math.floor (Math.random () * 256)
        };
 
        // Activar un evento, comprobar si cancela si (this._trigger ( "al azar", evento, colores)! == False) {
          this.option (colores);
        }
      },
 
      // Evento de eliminación automática obligado por _ON aquí // restablece otras modificaciones _destroy: function () {
        // Eliminar elementos generados this.changer.remove ();
 
        this.element
          .removeClass ( "medida de colorear")
          .enableSelection ()
          Css ( "background-color", "transparente");
      },
 
      // _setOptions Por un hash todo cambió con opciones para invocar // al cambiar las opciones siempre se actualizan _setOptions: function () {
        // Y _super _superApply
        this._superApply (argumentos);
        this._refresh ();
      },
 
      // _setOption _setOption Para cada individuo para cambiar las opciones de compra: function (clave, valor) {
        // los valores de color para prevenir válida si (/red|green|blue/.test(key) && (valor <0 || valor> 255)) {
          volver;
        }
        this._super (clave, valor);
      }
    });
 
    // Inicializar las opciones por defecto $ ( "# my-widget1") .colorize ();
 
    // Por dos opciones personalizadas para inicializar $ ( "# my-widget2") .colorize ({
      rojo: 60,
      azul: 60
    });
 
    // Verde por valor de auto-definido y sólo permite una devolución de llamada al azar de color verde suficiente para inicializar $ ( "# my-WIDGET3") .colorize ({
      verde: 128,
      al azar: function (event, ui) {
        volver ui.green> 128;
      }
    });
 
    // Haga clic en Cambiar activado / desactivado
    $ ( "#disable") .click (Function () {
      // selectores personalizados para cada widget para encontrar todas las instancias // Todas las instancias de conmutación en conjunto, por lo que puede comenzar desde el primer estado para comprobar si ($ ( ": a medida a colorear") .colorize ( "opción", "bloqueada")) {
        $ ( ": Por encargo de colorear") .colorize ( "activar");
      } Else {
        $ ( ": Por encargo de colorear") .colorize ( "desactivar");
      }
    });
 
    // Después de la inicialización, haga clic en la opción Configuración $ ( "#Black") .click (function () {
      $ ( ": Por encargo de colorear") .colorize ( "opción", {
        rojo: 0,
        verde: 0,
        azul: 0
      });
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div>
  <Div id = "mi-widget1"> cambio de color </ div>
  <Div id = "mi-widget2"> cambio de color </ div>
  <Div id = "mi-WIDGET3"> cambio de color </ div>
  <Botón id = "desactivar"> cambiar la opción desactivada </ botón>
  <Botón id = "negro"> a Negro </ botón>
</ Div>
 
 
</ Body>
</ Html>