Latest web development tutorials

jQuery UI Exemplos - Parte Galeria (Widget Factory)

Usar os widgets jQuery UI com tudo a mesma abstração para criar stateful plugin jQuery.

Para mais detalhes sobre a biblioteca widget (Widget Factory), verifique a documentação da API biblioteca de componentes (Widget Factory) .

A função padrão

A demo mostra um simples de usar bibliotecas de componentes (jquery.ui.widget.js) para criar widgets personalizados.

Três blocos de uma forma diferente para inicializar. Clique para mudar a cor de fundo. Ver código fonte e comentários para entender como ele funciona. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> biblioteca jQuery UI widget (Widget Factory) - A função padrão </ 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-colorize {
    font-size: 20px;
    position: relative;
    width: 75px;
    height: 75px;
  }
  .custom-colorir-trocador {
    font-size: 10px;
    position: absolute;
    direita: 0;
    bottom: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    // Definições membros, em que "custom" namespace, "colorir" é o nome do membro $ .widget ( "custom.colorize", {
      // As opções padrão: {
        vermelho: 255,
        verde: 0,
        azul: 0,
 
        // Mudança Callback: null,
        aleatória: null
      },
 
      // _create Construtor: function () {
        this.element
          // Adicionar um tema de aula
          .addClass ( "custom-colorize")
          // Prevent clique duas vezes para selecionar .disableSelection text ();
 
        this.changer = $ ( "<button>", {
          texto: "mudança"
          "Classe": "custom-colorir-trocador"
        })
        .appendTo (this.element)
        .button ();
 
        // Vincular o clique do botão evento trocador para this._on método aleatório (this.changer, {
          // Quando o widget está desativado, _on não é chamado aleatório
          clique: "random"
        });
        this._refresh ();
      },
 
      () Função {: // chama _refresh quando você cria e, em seguida, alterar as opções
        this.element.css ( "background-color", "rgb (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        // Disparar uma this._trigger retorno de chamada / evento ( "mudança");
      },
 
      // Mude a cor para um valor aleatório // métodos públicos podem ser chamados diretamente através .colorize aleatório ( "random"): function (event) {
        var cores = {
          vermelho: Math.floor (Math.random () * 256),
          verde: Math.floor (Math.random () * 256),
          azul: Math.floor (Math.random () * 256)
        };
 
        // Disparar um evento, verificar se cancelado se (this._trigger ( "aleatórios", evento, cores)! == False) {
          this.option (cores);
        }
      },
 
      // Evento automático de remoção vinculado por _on aqui // redefinir outras modificações _destroy: function () {
        // Remove elementos gerados this.changer.remove ();
 
        this.element
          .removeClass ( "custom-colorize")
          .enableSelection ()
          CSS ( "background-color", "transparente");
      },
 
      // _setOptions por um hash tudo mudou com opções para invocar // ao alterar as opções são sempre atualizar _setOptions: function () {
        // _super E _superApply
        this._superApply (argumentos);
        this._refresh ();
      },
 
      // _setOption _setOption Para cada indivíduo para alterar as opções de chamada: function (key, value) {
        valores // Cor para evitar inválido se (/red|green|blue/.test(key) && (valor <0 || valor> 255)) {
          retornar;
        }
        this._super (chave, valor);
      }
    });
 
    // Inicializar as opções padrão $ ( "# my-WIDGET1") .colorize ();
 
    // Por duas opções personalizadas para inicializar $ ( "# my-WIDGET2") .colorize ({
      vermelho: 60,
      azul: 60
    });
 
    // Verde por valor auto-definida e só permite uma cor verde aleatório de retorno suficiente para inicializar $ ( "# my-WIDGET3") .colorize ({
      verde: 128,
      aleatória: function (evento, ui) {
        regresso ui.green> 128;
      }
    });
 
    // Clique em Mudar ativado / desativado
    $ .click ( "#disable") (Function () {
      // seletores personalizado para cada widget para encontrar todas as ocorrências // Todas as instâncias de comutação em conjunto, para que possamos começar desde o primeiro estado para verificar se ($ ( ": custom-colorize") .colorize ( "opção", "deficientes")) {
        $ ( ": Custom-colorize") .colorize ( "enable");
      } Else {
        $ ( ": Custom-colorize") .colorize ( "desativar");
      }
    });
 
    // Depois da inicialização, clique na opção Configurações de $ ( "#black") .click (function () {
      $ ( ": Custom-colorize") .colorize ( "opção", {
        vermelho: 0,
        verde: 0,
        azul: 0
      });
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div>
  <Div id = "my-WIDGET1"> mudança de cor </ div>
  <Div id = "my-WIDGET2"> mudança de cor </ div>
  <Div id = "my-WIDGET3"> mudança de cor </ div>
  <Button id = "desativar"> alternar opção desativada </ button>
  <Button id = "black"> to Black </ button>
</ Div>
 
 
</ Body>
</ Html>