Categoria: Efeitos.
A biblioteca jQuery fornece várias técnicas para adicionar animações a uma página da web. Estes incluem animações simples e padrão que são freqüentemente usadas e a capacidade de criar efeitos customizados sofisticados.
Execute uma animação personalizada de um conjunto de propriedades CSS.
.clearQueue ()
Remova da fila todos os itens que ainda não foram executados.
Defina um temporizador para atrasar a execução dos itens subseqüentes na fila.
Execute a próxima função na fila para os elementos correspondentes.
Exibir os elementos correspondentes, desvendando-os para opacos.
Ocultar os elementos correspondentes, desvendando-os para transparentes.
Ajuste a opacidade dos elementos correspondentes.
.fadeToggle ()
Visualize ou ocultar os elementos correspondentes ao animar a sua opacidade.
Pare a animação atualmente em execução, remova todas as animações em fila e complete todas as animações para os elementos correspondentes.
Ocultar os elementos correspondentes.
jQuery. fx. interval.
A taxa (em milissegundos) em que as animações disparam.
jQuery. fx. off.
Desative globalmente todas as animações.
jQuery. speed.
Cria um objeto contendo um conjunto de propriedades pronto para ser usado na definição de animações personalizadas.
Mostra ou manipula a fila de funções a serem executadas nos elementos correspondentes.
Exibir os elementos correspondentes.
Exibir os elementos correspondentes com um movimento deslizante.
.slideToggle ()
Exibir ou ocultar os elementos correspondentes com um movimento deslizante.
Ocultar os elementos correspondentes com um movimento deslizante.
Pare a animação em execução nos elementos correspondentes.
Opções de Jquery fx
Obter através da App Store Leia esta publicação em nosso aplicativo!
jQuery UI Tabs - Opções disponíveis de fx.
Eu não consegui encontrar nenhuma documentação real sobre isso, então eu me pergunto se alguém conhece todas as opções fx disponíveis para jQuery UI Tabs?
Os únicos que já vi até agora são:
Um crossfade seria bom, embora eu não pense ter visto isso feito com jQuery UI Tabs ainda.
Além disso, não consigo nem descobrir como especificar a velocidade da fx, embora a documentação mencione que eu deveria ser capaz de mudá-la.
Basicamente, a opção fx é usada para chamar animar, você pode especificar uma única opção ou duas em uma matriz, que será usada para fazer os efeitos de exibição e ocultar:
A velocidade fx pode ser especificada usando um membro de duração no objeto de opção.
Basicamente você pode fazer as mesmas transformações que você pode com animar.
Opções de Jquery fx
Obter através da App Store Leia esta publicação em nosso aplicativo!
Como gerenciar jQuery ui tabs fx: alternar opção e ativar: function () no mesmo evento?
Como gerenciar "jQuery ui tabs fx: opção de alternância" e "ativar: função ()" no mesmo evento?
Se você colocar a opção jQuery fx: toggle fade e ativar: função no mesmo evento de clique, eles param de funcionar. Diga-me como usá-los no mesmo evento de clique.
para o evento identificador de ui ativar o evento.
As versões jQuery e UI da biblioteca hospedada no Google ajax são ministradas 1.10.2 e 1.10.3.
Widget Tabs.
Tabs Widget versão adicionada: 1.0.
Descrição: Uma única área de conteúdo com vários painéis, cada uma associada a um cabeçalho de uma lista.
QuickNavExamples.
Métodos.
Pontos de extensão.
As guias geralmente são usadas para quebrar conteúdo em várias seções que podem ser trocadas para economizar espaço, como um acordeão.
As abas têm um conjunto particular de marcação que deve ser usado para que eles funcionem corretamente:
As próprias guias devem estar em uma lista ordenada (& lt; ol & gt;) ou não ordenada (& lt; ul & gt;) Cada guia & quot; título & quot; deve estar dentro de um item da lista (& lt; li & gt;) e envolvido por uma âncora (& lt; a & gt;) com um atributo href Cada painel de tabulação pode ser qualquer elemento válido, mas deve ter um id que corresponda ao hash na âncora da guia associada.
O conteúdo de cada painel de tabulação pode ser definido na página ou pode ser carregado via Ajax; ambos são tratados automaticamente com base no href da âncora associada à guia. Por padrão, as guias são ativadas por clique, mas os eventos podem ser alterados para passar o mouse através da opção de evento.
Abaixo está uma marcação de exemplo:
Interação do teclado.
Quando o foco está em uma guia, os seguintes comandos de teclas estão disponíveis:
ACIMA / ESQUERDA: 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 / DIREITO: 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 + ABAIXO / DIREITO: 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. HOME: Mova o foco para a primeira guia. Ative a guia focada após um curto atraso. END: 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. ENTER: 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 de 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 de lista cujo conteúdo associado esteja carregando via uma chamada do Ajax terá a classe de carregamento de tabulações de ui. ui-tabs-anchor: as âncoras usadas para alternar painéis. ui-tabs-panel: os painéis associados às guias. Somente o painel cuja guia correspondente está ativa será visível.
Dependências.
UI Core Widget Factory Effects Core (opcional, para uso com as opções show e hide)
Notas Adicionais:
Este widget requer algum CSS funcional, caso contrário ganhou o trabalho. Se você criar um tema personalizado, use o arquivo CSS específico do widget como ponto de partida.
ativo & # xA0;
Inicialize as guias com a opção ativa especificada:
Obter ou definir a opção ativa, após a inicialização:
Especifique as classes adicionais para adicionar aos elementos do widget. Qualquer uma das classes especificadas na seção Theming pode ser usada como chaves para substituir seu valor. Para saber mais sobre esta opção, confira o artigo de aprendizado sobre a opção de classes.
Inicialize as guias com a opção de classes especificada, alterando o tema para a classe ui-tabs:
Obter ou definir uma propriedade da opção de classes, após a inicialização, aqui lendo e alterando o tema para a classe ui-tabs:
dobrável & # xA0;
Inicialize as guias com a opção dobrável especificada:
Obter ou definir a opção dobrável, após a inicialização:
Inicialize as guias com a opção desativada especificada:
Obter ou definir a opção desativada, após a inicialização:
Inicialize as guias com a opção de evento especificada:
Obter ou definir a opção de evento, após a inicialização:
heightStyle & # xA0;
Inicialize as guias com a opção heightStyle especificada:
Obter ou definir a opção heightStyle, após a inicialização:
Inicialize as guias com a opção ocultar especificada:
Obter ou definir a opção ocultar, após a inicialização:
Inicialize as guias com a opção de exibição especificada:
Obter ou definir a opção de exibição, após a inicialização:
destroy () Retorna: jQuery (apenas plugin)
Invocar o método destroy:
disable () Devolve: jQuery (apenas plugin)
Invoque o método:
desativar (índice) Retorna: jQuery (somente plugin)
Invoque o método:
desativar (href) Retorna: jQuery (somente plugin)
Invoque o método:
enable () Devolve: jQuery (apenas plugin)
Invoque o método:
habilitar (índice) Retorna: jQuery (apenas plugin)
Invoque o método:
enable (href) Retorna: jQuery (apenas plugin)
Invoque o método:
instância () Retorna: Objeto.
Recupera o objeto de instância das guias. Se o elemento não tiver uma instância associada, o indefinido será retornado.
Ao contrário de outros métodos de widgets, instância () é segura para chamar qualquer elemento após o plug-in de guias ter carregado.
Invoque o método da instância:
carga (índice) Retorna: jQuery (apenas plugin)
Invoque o método:
carga (href) Retorna: jQuery (apenas plugin)
Invoque o método:
opção (nome da opção) Retorna: Objeto.
Obtém o valor atualmente associado à opção NomeDeterminado.
Nota: Para as opções que têm objetos como seu valor, você pode obter o valor de uma chave específica usando a notação de pontos. Por exemplo, "foo. bar" obteria o valor da propriedade do bar na opção foo.
Invoque o método:
opção () Retorna: PlainObject.
Invoque o método:
opção (optionName, valor) Retorna: jQuery (apenas plugin)
Define o valor da opção de guias associada à opção NomeDeterminado.
Nota: Para opções que possuem objetos como seu valor, você pode definir o valor de apenas uma propriedade usando a notação de ponto para OptionName. Por exemplo, "foo. bar" iria atualizar apenas a propriedade do bar da opção foo.
Invoque o método:
opção (opções) Retorna: jQuery (apenas plugin)
Invoque o método:
atualizar () Retorna: jQuery (apenas plugin)
Invoque o método de atualização:
widget () Retorna: jQuery.
Invoque o método do widget:
Pontos de extensão.
O widget de guias é construído com a fábrica de widgets e pode ser estendido. Ao estender widgets, você tem a capacidade de substituir ou adicionar o comportamento dos métodos existentes. Os seguintes métodos são fornecidos como pontos de extensão com a mesma estabilidade da API que os métodos de plugin listados acima. Para obter mais informações sobre extensões de widgets, consulte Extensão de widgets com Widget Factory.
_getList () Devolve: jQuery.
Use a lista com a classe minhas abas ou volte para a implementação padrão.
ativar (evento, ui) Digite: tabsactivate.
Ativado depois que uma guia foi ativada (após a conclusão da animação). Se as abas foram anteriormente colapsadas, ui. oldTab e ui. oldPanel estarão vazios objetos jQuery. Se as abas estão em colapso, ui. newTab e ui. newPanel serão objetos jQuery vazios.
Inicialize as guias com o retorno de ativação especificado:
Vincule um ouvinte de evento ao evento tabsactivate:
beforeActivate (event, ui) Tipo: tabsbeforeactivate.
Inicialize as guias com a chamada de retorno antes de ativar especificada:
Vincular um ouvinte de evento ao evento tabsbeforeactivate:
beforeLoad (event, ui) Tipo: tabsbeforeload.
Triggered quando uma aba remota está prestes a ser carregada, após o evento beforeActivate. Pode ser cancelado para evitar que o painel de tabulação carregue conteúdo; embora o painel ainda esteja ativado. Este evento é acionado logo antes da solicitação Ajax ser feita, portanto, modificações podem ser feitas para ui. jqXHR e ui. ajaxSettings.
Nota: Embora ui. ajaxSettings seja fornecido e possa ser modificado, algumas dessas propriedades já foram processadas pelo jQuery. Por exemplo, os pré-filtros foram aplicados, os dados foram processados e o tipo foi determinado. O evento BeforeLoad ocorre ao mesmo tempo e, portanto, tem as mesmas restrições, como o retorno de retorno anterior do jQuery. ajax ().
Inicialize as guias com a chamada de retorno anterior especificada:
Vincular um ouvinte de evento ao evento tabsbeforeload:
create (event, ui) Tipo: tabscreate.
Inicialize as guias com o retorno de chamada especificado especificado:
Vincule um ouvinte de evento ao evento tabscreate:
load (event, ui) Tipo: tabsload.
Inicialize as guias com o retorno de carga especificado:
.animar()
.animate (properties [, duration] [, easing] [, complete]) Retorna: jQuery.
Descrição: Execute uma animação personalizada de um conjunto de propriedades CSS.
versão adicionada: 1.0.animate (propriedades [, duração] [, facilitando] [, concluir])
versão adicionada: 1.0.animate (propriedades, opções)
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 indicado 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, largura, altura ou 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 em 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 uma largura de borda diferente de "quot; auto" deve ser definido com antecedência. Ou, se você quiser animar o tamanho da fonte, você usaria fontSize ou o equivalente de CSS & font-size & apos; em vez de simples & p; font & apos; .
Além dos valores numéricos, cada propriedade pode ter as strings & apos; show & apos; , & apos; hide & apos; , e "apontar" . Esses atalhos permitem ocultação personalizada e mostra animações que levam em consideração o tipo de exibição do elemento. Para usar o rastreamento do estado de alternância incorporado do jQuery, o & apos; toggle & apos; A palavra-chave deve ser consistentemente dada como o valor da propriedade que está sendo animada.
Propriedades animadas também podem ser relativas. Se um valor for fornecido com uma sequência + = 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 os elementos ocultos visíveis como parte do efeito. Por exemplo, dado $ (& quot; someElement & quot;).hide (). Animate (, 500), a animação será executada, mas o elemento permanecerá oculto.
Durações são dadas em milissegundos; valores mais altos indicam animações mais lentas, não mais rápidas. A duração padrão é 400 milissegundos. As cordas & apos; fast & apos; e 'lentamente' podem ser fornecidos para indicar durações de 200 e 600 milissegundos, respectivamente.
Funções de retorno de chamada.
Se fornecido, o início, o passo, o progresso, a conclusão, a conclusão, a falha e sempre as chamadas de retorno são chamadas por elemento; Isto é definido como o elemento DOM que está sendo animado. Se nenhum elemento estiver no conjunto, nenhuma chamada de chamada será 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:
Para animar a opacidade, o deslocamento esquerdo e a altura da imagem simultaneamente:
Figura 1 - Ilustração do efeito de animação especificado.
Observe que o valor alvo da propriedade height é & apos; alternar & apos; . 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. Como 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 nos elementos se sua propriedade de estilo de posição for estática, o 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, 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 etapa & # x2017; 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, iniciar e finalizar o primeiro e último valor do elemento animado. propriedade animada, respectivamente, e suporte para a propriedade 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:
O parâmetro restante de. animate () é uma string que nomeia uma função de flexibilidade para usar. Uma função de flexibilização especifica a velocidade na qual a animação progride em diferentes pontos dentro da animação. As únicas implementações de facilidade na biblioteca jQuery são o padrão, chamado swing, e um que progride a um ritmo constante, chamado linear. Mais funções de flexibilização estão disponíveis com o uso de plug-ins, principalmente o jQuery UI suite.
Per-property Easing.
A partir do jQuery versão 1.4, você pode definir funções de facilitação por propriedade dentro de uma única chamada. animate (). Na primeira versão de. animate (), cada propriedade pode ter uma matriz como seu valor: O primeiro membro da matriz é a propriedade CSS e o segundo membro é uma função de flexibilização. Se uma função de flexibilização por propriedade não estiver definida para uma propriedade específica, ela usa o valor do argumento de flexibilidade opcional do método. animate (). Se o argumento de flexibilização não for definido, a função de swing padrão será usada.
Por exemplo, para animar simultaneamente a largura e a altura com a função de flexibilidade do balanço e a opacidade com a função de flexibilização linear:
Na segunda versão do. animate (), o objeto de opções pode incluir a propriedade specialEasing, que é ele próprio objeto de propriedades CSS e suas correspondentes funções de flexibilidade. Por exemplo, para animar simultaneamente a largura usando a função de flexibilização linear e a altura usando a função de facilidade easyOutBounce:
Conforme mencionado anteriormente, um plugin é necessário para a função easeOutBounce.
Notas Adicionais:
Todos os efeitos jQuery, incluindo. animate (), podem ser desligados globalmente definindo jQuery. fx. off = true, o que efetivamente define a duração em 0. Para mais informações, veja jQuery. fx. off.
Clique no botão para animar a div com várias propriedades diferentes.
Anima a propriedade esquerda de um div. Com um valor relativo. Clique várias vezes nos botões para ver as animações relativas enfileiradas.
O primeiro botão mostra como funciona uma animação sem carga. Ele expande o div para 90% de largura enquanto o tamanho da fonte está aumentando. Uma vez que a alteração do tamanho da fonte esteja completa, a animação da borda começará. O segundo botão inicia uma animação em cadeia tradicional, onde cada animação irá iniciar uma vez que a animação anterior no elemento foi concluída.
Anima a propriedade esquerda do primeiro div, e sincroniza as divs restantes, usando a função step para definir suas propriedades à esquerda em cada etapa da animação.
Animar todos os parágrafos para alternar altura e opacidade, completando a animação dentro de 600 milissegundos.
Animar todos os parágrafos para um estilo esquerdo de 50 e opacidade de 1 (opaco, visível), completando a animação dentro de 500 milissegundos.
Animar as propriedades de estilo de opacidade esquerda e todos os parágrafos; execute a animação fora da fila, de modo que ela comece automaticamente sem esperar pela sua vez.
Um exemplo de usar um & apos; easing & apos; função para fornecer um estilo diferente de animação. Isso só funcionará se você tiver um plugin que forneça essa função de flexibilização. Note, este código não fará nada a menos que o elemento do parágrafo esteja oculto.
Anima todos os parágrafos para alternar altura e opacidade, completando a animação dentro de 600 milissegundos.
Use uma função de flexibilização para fornecer um estilo diferente de animação. Isso só funcionará se você tiver um plugin que forneça essa função de flexibilização.
Animar todos os parágrafos e executar uma função de retorno de chamada quando a animação estiver completa. O primeiro argumento é um objeto de propriedades CSS, o segundo especifica que a animação deve levar 1000 milissegundos para completar, o terceiro indica o tipo de flexibilização e o quarto argumento é uma função de retorno de chamada anônima.
Obter através da App Store Leia esta publicação em nosso aplicativo!
Como gerenciar jQuery ui tabs fx: alternar opção e ativar: function () no mesmo evento?
Como gerenciar "jQuery ui tabs fx: opção de alternância" e "ativar: função ()" no mesmo evento?
Se você colocar a opção jQuery fx: toggle fade e ativar: função no mesmo evento de clique, eles param de funcionar. Diga-me como usá-los no mesmo evento de clique.
para o evento identificador de ui ativar o evento.
As versões jQuery e UI da biblioteca hospedada no Google ajax são ministradas 1.10.2 e 1.10.3.
Widget Tabs.
Tabs Widget versão adicionada: 1.0.
Descrição: Uma única área de conteúdo com vários painéis, cada uma associada a um cabeçalho de uma lista.
QuickNavExamples.
Métodos.
Pontos de extensão.
As guias geralmente são usadas para quebrar conteúdo em várias seções que podem ser trocadas para economizar espaço, como um acordeão.
As abas têm um conjunto particular de marcação que deve ser usado para que eles funcionem corretamente:
As próprias guias devem estar em uma lista ordenada (& lt; ol & gt;) ou não ordenada (& lt; ul & gt;) Cada guia & quot; título & quot; deve estar dentro de um item da lista (& lt; li & gt;) e envolvido por uma âncora (& lt; a & gt;) com um atributo href Cada painel de tabulação pode ser qualquer elemento válido, mas deve ter um id que corresponda ao hash na âncora da guia associada.
O conteúdo de cada painel de tabulação pode ser definido na página ou pode ser carregado via Ajax; ambos são tratados automaticamente com base no href da âncora associada à guia. Por padrão, as guias são ativadas por clique, mas os eventos podem ser alterados para passar o mouse através da opção de evento.
Abaixo está uma marcação de exemplo:
Interação do teclado.
Quando o foco está em uma guia, os seguintes comandos de teclas estão disponíveis:
ACIMA / ESQUERDA: 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 / DIREITO: 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 + ABAIXO / DIREITO: 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. HOME: Mova o foco para a primeira guia. Ative a guia focada após um curto atraso. END: 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. ENTER: 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 de 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 de lista cujo conteúdo associado esteja carregando via uma chamada do Ajax terá a classe de carregamento de tabulações de ui. ui-tabs-anchor: as âncoras usadas para alternar painéis. ui-tabs-panel: os painéis associados às guias. Somente o painel cuja guia correspondente está ativa será visível.
Dependências.
UI Core Widget Factory Effects Core (opcional, para uso com as opções show e hide)
Notas Adicionais:
Este widget requer algum CSS funcional, caso contrário ganhou o trabalho. Se você criar um tema personalizado, use o arquivo CSS específico do widget como ponto de partida.
ativo & # xA0;
Inicialize as guias com a opção ativa especificada:
Obter ou definir a opção ativa, após a inicialização:
Especifique as classes adicionais para adicionar aos elementos do widget. Qualquer uma das classes especificadas na seção Theming pode ser usada como chaves para substituir seu valor. Para saber mais sobre esta opção, confira o artigo de aprendizado sobre a opção de classes.
Inicialize as guias com a opção de classes especificada, alterando o tema para a classe ui-tabs:
Obter ou definir uma propriedade da opção de classes, após a inicialização, aqui lendo e alterando o tema para a classe ui-tabs:
dobrável & # xA0;
Inicialize as guias com a opção dobrável especificada:
Obter ou definir a opção dobrável, após a inicialização:
Inicialize as guias com a opção desativada especificada:
Obter ou definir a opção desativada, após a inicialização:
Inicialize as guias com a opção de evento especificada:
Obter ou definir a opção de evento, após a inicialização:
heightStyle & # xA0;
Inicialize as guias com a opção heightStyle especificada:
Obter ou definir a opção heightStyle, após a inicialização:
Inicialize as guias com a opção ocultar especificada:
Obter ou definir a opção ocultar, após a inicialização:
Inicialize as guias com a opção de exibição especificada:
Obter ou definir a opção de exibição, após a inicialização:
destroy () Retorna: jQuery (apenas plugin)
Invocar o método destroy:
disable () Devolve: jQuery (apenas plugin)
Invoque o método:
desativar (índice) Retorna: jQuery (somente plugin)
Invoque o método:
desativar (href) Retorna: jQuery (somente plugin)
Invoque o método:
enable () Devolve: jQuery (apenas plugin)
Invoque o método:
habilitar (índice) Retorna: jQuery (apenas plugin)
Invoque o método:
enable (href) Retorna: jQuery (apenas plugin)
Invoque o método:
instância () Retorna: Objeto.
Recupera o objeto de instância das guias. Se o elemento não tiver uma instância associada, o indefinido será retornado.
Ao contrário de outros métodos de widgets, instância () é segura para chamar qualquer elemento após o plug-in de guias ter carregado.
Invoque o método da instância:
carga (índice) Retorna: jQuery (apenas plugin)
Invoque o método:
carga (href) Retorna: jQuery (apenas plugin)
Invoque o método:
opção (nome da opção) Retorna: Objeto.
Obtém o valor atualmente associado à opção NomeDeterminado.
Nota: Para as opções que têm objetos como seu valor, você pode obter o valor de uma chave específica usando a notação de pontos. Por exemplo, "foo. bar" obteria o valor da propriedade do bar na opção foo.
Invoque o método:
opção () Retorna: PlainObject.
Invoque o método:
opção (optionName, valor) Retorna: jQuery (apenas plugin)
Define o valor da opção de guias associada à opção NomeDeterminado.
Nota: Para opções que possuem objetos como seu valor, você pode definir o valor de apenas uma propriedade usando a notação de ponto para OptionName. Por exemplo, "foo. bar" iria atualizar apenas a propriedade do bar da opção foo.
Invoque o método:
opção (opções) Retorna: jQuery (apenas plugin)
Invoque o método:
atualizar () Retorna: jQuery (apenas plugin)
Invoque o método de atualização:
widget () Retorna: jQuery.
Invoque o método do widget:
Pontos de extensão.
O widget de guias é construído com a fábrica de widgets e pode ser estendido. Ao estender widgets, você tem a capacidade de substituir ou adicionar o comportamento dos métodos existentes. Os seguintes métodos são fornecidos como pontos de extensão com a mesma estabilidade da API que os métodos de plugin listados acima. Para obter mais informações sobre extensões de widgets, consulte Extensão de widgets com Widget Factory.
_getList () Devolve: jQuery.
Use a lista com a classe minhas abas ou volte para a implementação padrão.
ativar (evento, ui) Digite: tabsactivate.
Ativado depois que uma guia foi ativada (após a conclusão da animação). Se as abas foram anteriormente colapsadas, ui. oldTab e ui. oldPanel estarão vazios objetos jQuery. Se as abas estão em colapso, ui. newTab e ui. newPanel serão objetos jQuery vazios.
Inicialize as guias com o retorno de ativação especificado:
Vincule um ouvinte de evento ao evento tabsactivate:
beforeActivate (event, ui) Tipo: tabsbeforeactivate.
Inicialize as guias com a chamada de retorno antes de ativar especificada:
Vincular um ouvinte de evento ao evento tabsbeforeactivate:
beforeLoad (event, ui) Tipo: tabsbeforeload.
Triggered quando uma aba remota está prestes a ser carregada, após o evento beforeActivate. Pode ser cancelado para evitar que o painel de tabulação carregue conteúdo; embora o painel ainda esteja ativado. Este evento é acionado logo antes da solicitação Ajax ser feita, portanto, modificações podem ser feitas para ui. jqXHR e ui. ajaxSettings.
Nota: Embora ui. ajaxSettings seja fornecido e possa ser modificado, algumas dessas propriedades já foram processadas pelo jQuery. Por exemplo, os pré-filtros foram aplicados, os dados foram processados e o tipo foi determinado. O evento BeforeLoad ocorre ao mesmo tempo e, portanto, tem as mesmas restrições, como o retorno de retorno anterior do jQuery. ajax ().
Inicialize as guias com a chamada de retorno anterior especificada:
Vincular um ouvinte de evento ao evento tabsbeforeload:
create (event, ui) Tipo: tabscreate.
Inicialize as guias com o retorno de chamada especificado especificado:
Vincule um ouvinte de evento ao evento tabscreate:
load (event, ui) Tipo: tabsload.
Inicialize as guias com o retorno de carga especificado:
.animar()
.animate (properties [, duration] [, easing] [, complete]) Retorna: jQuery.
Descrição: Execute uma animação personalizada de um conjunto de propriedades CSS.
versão adicionada: 1.0.animate (propriedades [, duração] [, facilitando] [, concluir])
versão adicionada: 1.0.animate (propriedades, opções)
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 indicado 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, largura, altura ou 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 em 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 uma largura de borda diferente de "quot; auto" deve ser definido com antecedência. Ou, se você quiser animar o tamanho da fonte, você usaria fontSize ou o equivalente de CSS & font-size & apos; em vez de simples & p; font & apos; .
Além dos valores numéricos, cada propriedade pode ter as strings & apos; show & apos; , & apos; hide & apos; , e "apontar" . Esses atalhos permitem ocultação personalizada e mostra animações que levam em consideração o tipo de exibição do elemento. Para usar o rastreamento do estado de alternância incorporado do jQuery, o & apos; toggle & apos; A palavra-chave deve ser consistentemente dada como o valor da propriedade que está sendo animada.
Propriedades animadas também podem ser relativas. Se um valor for fornecido com uma sequência + = 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 os elementos ocultos visíveis como parte do efeito. Por exemplo, dado $ (& quot; someElement & quot;).hide (). Animate (, 500), a animação será executada, mas o elemento permanecerá oculto.
Durações são dadas em milissegundos; valores mais altos indicam animações mais lentas, não mais rápidas. A duração padrão é 400 milissegundos. As cordas & apos; fast & apos; e 'lentamente' podem ser fornecidos para indicar durações de 200 e 600 milissegundos, respectivamente.
Funções de retorno de chamada.
Se fornecido, o início, o passo, o progresso, a conclusão, a conclusão, a falha e sempre as chamadas de retorno são chamadas por elemento; Isto é definido como o elemento DOM que está sendo animado. Se nenhum elemento estiver no conjunto, nenhuma chamada de chamada será 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:
Para animar a opacidade, o deslocamento esquerdo e a altura da imagem simultaneamente:
Figura 1 - Ilustração do efeito de animação especificado.
Observe que o valor alvo da propriedade height é & apos; alternar & apos; . 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. Como 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 nos elementos se sua propriedade de estilo de posição for estática, o 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, 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 etapa & # x2017; 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, iniciar e finalizar o primeiro e último valor do elemento animado. propriedade animada, respectivamente, e suporte para a propriedade 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:
O parâmetro restante de. animate () é uma string que nomeia uma função de flexibilidade para usar. Uma função de flexibilização especifica a velocidade na qual a animação progride em diferentes pontos dentro da animação. As únicas implementações de facilidade na biblioteca jQuery são o padrão, chamado swing, e um que progride a um ritmo constante, chamado linear. Mais funções de flexibilização estão disponíveis com o uso de plug-ins, principalmente o jQuery UI suite.
Per-property Easing.
A partir do jQuery versão 1.4, você pode definir funções de facilitação por propriedade dentro de uma única chamada. animate (). Na primeira versão de. animate (), cada propriedade pode ter uma matriz como seu valor: O primeiro membro da matriz é a propriedade CSS e o segundo membro é uma função de flexibilização. Se uma função de flexibilização por propriedade não estiver definida para uma propriedade específica, ela usa o valor do argumento de flexibilidade opcional do método. animate (). Se o argumento de flexibilização não for definido, a função de swing padrão será usada.
Por exemplo, para animar simultaneamente a largura e a altura com a função de flexibilidade do balanço e a opacidade com a função de flexibilização linear:
Na segunda versão do. animate (), o objeto de opções pode incluir a propriedade specialEasing, que é ele próprio objeto de propriedades CSS e suas correspondentes funções de flexibilidade. Por exemplo, para animar simultaneamente a largura usando a função de flexibilização linear e a altura usando a função de facilidade easyOutBounce:
Conforme mencionado anteriormente, um plugin é necessário para a função easeOutBounce.
Notas Adicionais:
Todos os efeitos jQuery, incluindo. animate (), podem ser desligados globalmente definindo jQuery. fx. off = true, o que efetivamente define a duração em 0. Para mais informações, veja jQuery. fx. off.
Clique no botão para animar a div com várias propriedades diferentes.
Anima a propriedade esquerda de um div. Com um valor relativo. Clique várias vezes nos botões para ver as animações relativas enfileiradas.
O primeiro botão mostra como funciona uma animação sem carga. Ele expande o div para 90% de largura enquanto o tamanho da fonte está aumentando. Uma vez que a alteração do tamanho da fonte esteja completa, a animação da borda começará. O segundo botão inicia uma animação em cadeia tradicional, onde cada animação irá iniciar uma vez que a animação anterior no elemento foi concluída.
Anima a propriedade esquerda do primeiro div, e sincroniza as divs restantes, usando a função step para definir suas propriedades à esquerda em cada etapa da animação.
Animar todos os parágrafos para alternar altura e opacidade, completando a animação dentro de 600 milissegundos.
Animar todos os parágrafos para um estilo esquerdo de 50 e opacidade de 1 (opaco, visível), completando a animação dentro de 500 milissegundos.
Animar as propriedades de estilo de opacidade esquerda e todos os parágrafos; execute a animação fora da fila, de modo que ela comece automaticamente sem esperar pela sua vez.
Um exemplo de usar um & apos; easing & apos; função para fornecer um estilo diferente de animação. Isso só funcionará se você tiver um plugin que forneça essa função de flexibilização. Note, este código não fará nada a menos que o elemento do parágrafo esteja oculto.
Anima todos os parágrafos para alternar altura e opacidade, completando a animação dentro de 600 milissegundos.
Use uma função de flexibilização para fornecer um estilo diferente de animação. Isso só funcionará se você tiver um plugin que forneça essa função de flexibilização.
Animar todos os parágrafos e executar uma função de retorno de chamada quando a animação estiver completa. O primeiro argumento é um objeto de propriedades CSS, o segundo especifica que a animação deve levar 1000 milissegundos para completar, o terceiro indica o tipo de flexibilização e o quarto argumento é uma função de retorno de chamada anônima.
No comments:
Post a Comment