Opções De Jquery Ui Fx

Developer Links Whataposs Novo no jQuery UI 1.12 Novo tema. Novo tema: Nosso tema de tons de cinza padrão de longa data, Suavidade, foi sucedido por um tema moderno com algumas cores, menos gradientes e algumas outras melhorias. Novos widgets. JQuery UI 1.12 inclui widgets: o grupo de controle substitui o conjunto de botões e adiciona suporte para selectmenu e o novo widget checkboxradio. Weaposve adicionou suporte para usar jQuery UI com AMD e Bower. Nós também temos mais de 50 correções de bugs. Nova opção de classes. Todos os widgets obtiveram uma nova opção, chamada de classe. Isso dá muito mais controle sobre estilo visual e temas personalizados. Por exemplo, criar um tema do Bootstrap para jQuery UI é agora muito mais fácil. JQuery UI é construído para designers e desenvolvedores. Weaposve projetou todos os nossos plugins para levá-lo a funcionar rapidamente, sendo flexível o suficiente para evoluir com suas necessidades e resolver uma infinidade de casos de uso. Se você for novo no jQuery UI, confira nosso guia de iniciação e outros tutoriais. Jogue com as demos e leia a documentação da API para ter uma idéia do que é possível. Mantenha-se informado sobre o que está acontecendo com jQuery UI, subscrevendo o nosso blog e seguindo-nos no Twitter. InteractionsTabs Widget Interação do teclado Quando o foco está em uma guia, os seguintes comandos de teclas estão disponíveis: UP LEFT. Mova o foco para a guia anterior. Se na primeira guia, move o foco para a última guia. Ative a guia focada após um curto atraso. PARA BAIXO CERTO. Mova o foco para a próxima guia. Se na última guia, move o foco para a primeira guia. Ative a guia focada após um curto atraso. CTRL UP Left. Mova o foco para a guia anterior. Se na primeira guia, move o foco para a última guia. A guia focada deve ser ativada manualmente. CTRL DOWN RIGHT. Mova o foco para a próxima guia. Se na última guia, move o foco para a primeira guia. A guia focada deve ser ativada manualmente. CASA. Mova o foco para a primeira guia. Ative a guia focada após um curto atraso. FIM. Mova o foco para a última guia. Ative a guia focada após um curto atraso. CTRL HOME. Mova o foco para a primeira guia. A guia focada deve ser ativada manualmente. CTRL END. Mova o foco para a última guia. A guia focada deve ser ativada manualmente. ESPAÇO. Ative o painel associado à guia focada. ENTRAR. Ativar ou alternar o painel associado à guia focada. ALT OPTION PAGE UP. Mova o foco para a guia anterior e ative imediatamente. ALT OPTION PAGE DOWN. Mova o foco para a próxima guia e ative imediatamente. Quando o foco está em um painel, os seguintes comandos de teclas estão disponíveis: CTRL UP. Mova o foco para a guia associada. ALT OPTION PAGE UP. Mova o foco para a guia anterior e ative imediatamente. ALT OPTION PAGE DOWN. Mova o foco para a próxima guia e ative imediatamente. O widget de guias usa a estrutura jQuery UI CSS para modelar sua aparência. Se o estilo específico das abas for necessário, os seguintes nomes das classes CSS podem ser usados ​​para substituições ou como chaves para a opção classes: ui-tabs. O recipiente externo das abas. Este elemento também terá uma classe de ui-tabs-plapsível quando a opção dobrável estiver definida. Ui-tabs-nav. A lista de guias. Ui-tabs-tab. Um dos itens na lista de tabs. O item ativo terá a classe ui-tabs-active. Qualquer item da lista cujo conteúdo associado está carregando via uma chamada do Ajax terá a classe de carregamento do ui-tabs. Ui-tabs-anchor. As âncoras usadas para trocar painéis. Ui-tabs-panel. Os painéis associados às guias. Somente o painel cuja guia correspondente está ativa será visível. Dependências Notas adicionais: Este widget requer algum CSS funcional, caso contrário, o trabalho wonapost. Se você criar um tema personalizado, use o arquivo CSS específico do widgetaposs como ponto de partida. ActivexA0 Qual painel está aberto no momento. Múltiplos tipos suportados: booleano. A configuração ativa em falso irá colapsar todos os painéis. Isso exige que a opção dobrável seja verdadeira. Inteiro. O índice baseado em zero do painel que está ativo (aberto). Um valor negativo seleciona os painéis voltados para trás do último painel. Exemplos de código: Inicialize as guias com a opção ativa especificada:.animate () Uma seqüência de caracteres indicando qual função de flexibilidade a ser usada para a transição. Um booleano que indica se deseja colocar a animação na fila de efeitos. Se falso, a animação começará imediatamente. A partir de jQuery 1.7. A opção de fila também pode aceitar uma string, caso em que a animação é adicionada à fila representada por essa string. Quando um nome de fila personalizado é usado, a animação não inicia automaticamente, você deve chamar. dequeue (quotqueuenamequot) para iniciá-lo. Um objeto contendo uma ou mais das propriedades CSS definidas pelo argumento de propriedades e suas correspondentes funções de flexibilidade. (Versão adicionada: 1.4) Uma função a ser chamada para cada propriedade animada de cada elemento animado. Esta função fornece uma oportunidade para modificar o objeto Tween para alterar o valor da propriedade antes de ser configurado. Uma função a ser chamada depois de cada etapa da animação, apenas uma vez por elemento animado independentemente do número de propriedades animadas. (Versão adicionada: 1.8) Uma função que é chamada uma vez que a animação em um elemento está completa. Uma função para chamar quando a animação em um elemento começa. (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento é concluída (seu objeto Promise é resolvido). (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento não for concluída (seu objeto Promise é rejeitado). (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento completa ou pára sem concluir (seu objeto Promise é resolvido ou rejeitado). (Versão adicionada: 1.8) O método. animate () nos permite criar efeitos de animação em qualquer propriedade CSS numérica. O único parâmetro requerido é um objeto simples das propriedades CSS. Este objeto é semelhante ao que pode ser enviado para o método. css (), exceto que o intervalo de propriedades é mais restritivo. Propriedades e valores de animação Todas as propriedades animadas devem ser animadas para um único valor numérico. Exceto como observado abaixo, a maioria das propriedades que não são numéricas não podem ser animadas usando a funcionalidade jQuery básica (Por exemplo, a largura, a altura ou a esquerda podem ser animadas, mas a cor de fundo não pode ser, a menos que o plugin jQuery. Color seja usado). Os valores de propriedade são tratados como um número de pixels, a menos que especificado de outra forma. As unidades e podem ser especificadas quando aplicável. Além das propriedades de estilo, algumas propriedades não-estilo, como scrollTop e scrollLeft. Bem como propriedades personalizadas, podem ser animadas. As propriedades CSS da estenografia (por exemplo, fonte, plano de fundo, borda) não são totalmente suportadas. Por exemplo, se você quiser animar a largura da borda renderizada, pelo menos um estilo de borda e largura de borda diferente de quotautoquot devem ser definidos com antecedência. Ou, se você quiser animar o tamanho da fonte, você usaria fontSize ou o Css equivalente aposfont-sizeapos em vez de simples aposfontapos. Além de valores numéricos, cada propriedade pode assumir as strings aposshowapos. Aposhideapos. E apostoggleapos. Esses atalhos permitem o esconderijo personalizado e exibir animações que levam em consideração o tipo de exibição do elemento. Para usar jQueryaposs built-in toggle state tracking, a palavra-chave apostoggleapos deve ser sempre fornecida como o valor da propriedade que está sendo animada. Propriedades animadas também podem ser relativas. Se um valor é fornecido com uma sequência principal ou - de caracteres, então o valor alvo é calculado adicionando ou subtraindo o número dado do valor atual da propriedade. Observação: ao contrário dos métodos de animação abreviada, como. slideDown () e. fadeIn (). O método. animate () não torna visíveis elementos ocultos como parte do efeito. Por exemplo, dado (quotsomeElementquot).hide (). Animate (, 500). A animação será executada, mas o elemento permanecerá oculto. Durações são dadas em milisegundos valores mais altos indicam animações mais lentas, não mais rápidas. A duração padrão é 400 milissegundos. As cadeias aposfastapos e aposslowapos podem ser fornecidas para indicar durações de 200 e 600 milissegundos, respectivamente. Funções de retorno de chamada Se for fornecido, o início. degrau. progresso. completo. feito. falhou. E sempre as chamadas de chamada são chamadas por elemento, esta é definida como o elemento DOM que está sendo animado. Se nenhum elemento estiver no conjunto, nenhuma chamada de retorno é chamada. Se vários elementos estiverem animados, o retorno de chamada é executado uma vez por elemento correspondente, não uma vez para a animação como um todo. Use o método. promise () para obter uma promessa à qual você pode anexar retorno de chamada que dispara uma vez para um conjunto animado de qualquer tamanho, incluindo zero elementos. Uso básico Para animar qualquer elemento, como uma imagem simples: Figura 1 - Ilustração do efeito de animação especificado Observe que o valor alvo da propriedade height é apostoggleapos. Como a imagem estava visível antes, a animação encolhe a altura para 0 para ocultá-la. Um segundo clique, em seguida, inverte esta transição: Figura 2 - Ilustração do efeito de animação especificado A opacidade da imagem já está no seu valor-alvo, portanto, esta propriedade não é animada pelo segundo clique. Uma vez que o valor alvo para a esquerda é um valor relativo, a imagem se move ainda mais para a direita durante esta segunda animação. As propriedades direcionais (superior, direita, inferior, esquerda) não têm efeito discernível sobre os elementos se a propriedade de estilo de posição for estática. Que é por padrão. Nota: O projeto jQuery UI estende o método. animate (), permitindo que alguns estilos não-numéricos, como cores sejam animados. O projeto também inclui mecanismos para especificar animações através de classes CSS em vez de atributos individuais. Nota: se estiver tentando animar um elemento com uma altura ou largura de 0px, onde o conteúdo do elemento é visível devido ao transbordo, o jQuery pode bloquear esse excesso durante a animação. Ao corrigir as dimensões do elemento original que está sendo escondido no entanto, é possível garantir que a animação funcione sem problemas. Um clearfix pode ser usado para corrigir automaticamente as dimensões do seu elemento principal sem a necessidade de configurá-lo manualmente. Etapa Função A segunda versão do. animate () fornece uma opção de passo x2014 uma função de retorno de chamada que é disparada em cada etapa da animação. Esta função é útil para permitir tipos de animação personalizados ou alterar a animação à medida que está ocorrendo. Ele aceita dois argumentos (agora e fx), e isso é definido como o elemento DOM que está sendo animado. agora. O valor numérico da propriedade sendo animado em cada etapa fx. Uma referência ao objeto protótipo jQuery. fx, que contém uma série de propriedades, como elem para o elemento animado, inicial e fim para o primeiro e último valor da propriedade animada, respectivamente, e suporte para a propriedade que está sendo animada. Observe que a função de etapa é chamada para cada propriedade animada em cada elemento animado. Por exemplo, com dois itens de lista, a função de etapa dispara quatro vezes em cada etapa da animação: