As abas jQuery são roladas para o topo da página quando se usa a opção FX. Isso é mais irritante quando os usuários o que criar efeitos slide-show como as animações fazer com que a página para saltar para o topo, e não há nenhuma maneira de evitar isso através do meio típico de retornar falsa para mostrar eventos etc Parece que isso só acontece Com a opção FX: ie. Vai funcionar bem, No entanto, seguindo seguinte: Depois de colar o meu nariz no código fonte guias, eu encontrei esta linha: show. hide (). RemoveClass (ui-tabs-hide) evitar flicker dessa forma Parece que a chamada para ocultar Provocando isso por algum motivo. Remover a chamada para ocultar irá parar o problema, mas como o comentário sugere, isso faz com que a animação de show para piscar. (3) comentário: 1 Alterado 7 atrás por MiiJaySung OK, depois de alguns Googling, Ive tropeçou em isso: O Wrap o div que contém as guias em um div com uma altura fixa. Comentário parece funcionar, e eu estava pensando em linhas semelhantes que isso era devido ambos os itens estão escondidos. Dado isto, seria útil desta quirkiness é documentada para que os usuários estão cientes e podem lidar com a situação como eles sentem funciona melhor para eles. Comentário: 2 Alterado 7 atrás por scalvert Isto não só acontece quando se utiliza a opção fx. Estou experimentando usando a seguinte marcação: selecionado: vars. userStateSelectedTab, spinner: false, select: function (event, ui) (tabs-loading).show () tabSelected true, load: function (event, ui) var parameters getParameters ) Tabs Widget Interação do teclado Quando o foco está em uma guia, os seguintes comandos de teclas estão disponíveis: UP LEFT. Mover o foco para a guia anterior. Se na primeira guia, move o foco para a última guia. Ative o separador focado após um pequeno atraso. PARA BAIXO DIREITO. Mover o foco para a próxima guia. Se na última guia, move o foco para a primeira guia. Ative o separador focado após um pequeno atraso. CTRL PARA CIMA ESQUERDA. Mover o foco para a guia anterior. Se na primeira guia, move o foco para a última guia. A aba focalizada deve ser ativada manualmente. CTRL PARA BAIXO DIREITO. Mover o foco para a próxima guia. Se na última guia, move o foco para a primeira guia. A aba focalizada deve ser ativada manualmente. CASA. Mover o foco para a primeira guia. Ative o separador focado após um pequeno atraso. FIM. Mover o foco para a última guia. Ative o separador focado após um pequeno atraso. CTRL HOME. Mover o foco para a primeira guia. A aba focalizada deve ser ativada manualmente. CTRL END. Mover o foco para a última guia. A aba focalizada deve ser ativada manualmente. ESPAÇO. Ative o painel associado à guia focada. ENTRAR. Ativar ou alternar painel associado com guia focada. ALT OPTION PAGE UP. Mova o foco para a guia anterior e ative-a imediatamente. ALT OPTION PAGE PARA BAIXO. Mova o foco para a guia seguinte e ative-a imediatamente. Quando o foco está em um painel, os seguintes comandos de teclas estão disponíveis: CTRL UP. Mover o foco para a guia associada. ALT OPTION PAGE UP. Mova o foco para a guia anterior e ative-a imediatamente. ALT OPTION PAGE PARA BAIXO. Mova o foco para a guia seguinte e ative-a imediatamente. O widget de tabs usa o framework jQuery UI CSS para modelar seu visual e sensação. Se o estilo específico das guias é necessário, os seguintes nomes de classe CSS podem ser usados para substituições ou como chaves para a opção classes: ui-tabs. O recipiente externo das abas. Este elemento terá, adicionalmente, uma classe de ui-tabs-foldable quando a opção dobrável for 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 através de uma chamada Ajax terá a classe ui-tabs-loading. Ui-tabs-anchor. As âncoras utilizadas para alternar painéis. Ui-tabs-panel. Os painéis associados às guias. Apenas o painel cuja guia correspondente está ativa estará visível. Dependências Notas adicionais: Este widget requer alguns CSS funcionais, caso contrário, wonapost trabalho. Se você criar um tema personalizado, use o arquivo CSS específico do widgetaposs como ponto de partida. ActivexA0 Que painel está atualmente aberto. Vários tipos suportados: Boolean. Definir ativo como falso irá recolher todos os painéis. Isso exige que a opção recolhível seja verdadeira. Inteiro. O índice baseado em zero do painel que está ativo (aberto). Um valor negativo seleciona os painéis que vão para trás a partir do último painel. Exemplos de código: Inicialize as guias com a opção ativa especificada: Tabs in jQuery UI 1.7 O widget Tabs UI é usado para alternar a visibilidade entre um conjunto de elementos diferentes, cada elemento contendo conteúdo que pode ser acessado clicando no cabeçalho que aparece como um Guia individual. As guias são estruturadas de forma que se alinham ao lado umas das outras, enquanto que as seções de conteúdo ficam em camadas umas em cima das outras, com apenas a parte superior visível. Clicar em uma guia destacará a guia e colocará seu painel de conteúdo associado no topo da pilha. Apenas um painel de conteúdo pode ser aberto de cada vez. A seguinte captura de tela mostra os diferentes componentes de um conjunto de guias de interface do usuário: Uma implementação de guia básica A estrutura dos elementos HTML subjacentes, em que guias são baseadas, é rígida e widgets requerem um certo número de elementos para que funcionem. As guias devem ser criadas a partir de um elemento de lista (ordenado ou não ordenado) e cada item de lista deve conter um elemento ltagt. Cada link precisará ter um elemento correspondente com um id especificado que está associado ao atributo href de links. Bem esclarecer a estrutura exata destes elementos após o nosso primeiro exemplo. Em um novo arquivo no seu editor de texto, crie a seguinte página: Salve o código como tabs1.html em sua pasta de trabalho jqueryui. Vamos rever o que foi usado. Os seguintes recursos de script e CSS são necessários para a instanciação de widget de guia padrão: Um widget de guia consiste em vários elementos HTML padrão dispostos de uma maneira específica (estes podem ser codificados na página ou adicionados dinamicamente ou podem ser uma mistura de ambos Dependendo dos requisitos da sua implementação). Um elemento de listagem (ltulgt ou ltolgt) Um elemento de listagem para cada guia Um elemento para o conteúdo de cada guia Os dois primeiros elementos dentro do contêiner externo fazem os cabeçalhos de guia clicáveis, que são Usado para mostrar a seção de conteúdo associada à guia. Cada guia deve incluir um item de lista contendo o link. O atributo href do link deve ser definido como um identificador de fragmento, prefixado com. Ele deve corresponder ao atributo id do elemento que forma a seção de conteúdo, com a qual ele está associado. As seções de conteúdo de cada guia são criadas pelos elementos. O atributo id é necessário e será segmentado pelo seu elemento correspondente. Usamos elementos neste exemplo como painéis de conteúdo para cada guia, mas outros elementos, como elementos, também podem ser usados. Os elementos discutidos até agora, juntamente com seus atributos necessários, são o mínimo que são exigidos a partir da marcação subjacente. Ligamos a vários recursos ltscriptgt da biblioteca na parte inferior do ltbodygt antes de sua tag de fechamento. Carregar scripts por último, depois de folhas de estilo e elementos de página é uma técnica comprovada para melhorar o desempenho. Depois de ligar primeiro para jQuery, ligamos ao ficheiro ui. core. js que é requerido por todos os componentes (excepto os efeitos, que têm o seu próprio ficheiro principal). Em seguida, vinculamos ao arquivo de origem de componentes que neste caso é ui. tabs. js. Após os três arquivos de script necessários da biblioteca, podemos recorrer ao nosso elemento de script lt personalizado no qual adicionamos o código que cria as guias. Nós simplesmente usamos o atalho (function ()) para executar nosso código quando o documento está pronto. Em seguida, chamamos o método de widget tabs () no objeto jQuery, representando nosso elemento container de tabs (o ltulgt com um id de myTabs).Quando executamos esse arquivo em um navegador, devemos ver as guias como elas apareceram na primeira captura de tela Deste artigo (sem as anotações, é claro). Tab CSS framework classes Usando Firebug para Firefox (ou outro explorador genérico DOM) podemos ver que uma variedade de nomes de classe são adicionados aos diferentes elementos HTML subjacentes que o widget tabs é criado, como mostrado na seguinte imagem: Vamos rever estes Brevemente. Para o recipiente externo lt divgt são adicionados os seguintes nomes de classe: Cantos arredondados aplicados às extremidades inferiores dos painéis de conteúdo Todas essas classes são adicionadas aos elementos subjacentes automaticamente pela biblioteca, não precisamos adicioná-las manualmente ao codificar a página . Como ilustram essas tabelas, a estrutura CSS fornece o conjunto completo de estilos CSS estruturais que controlam como funcionam as guias e estilos específicos de temas que controlam como aparecem as guias, mas não como elas funcionam. Podemos facilmente ver quais seletores bem precisam substituir se quisermos ajustar a aparência do widget, que é o que bem fazer na próxima seção. Aplicando um tema personalizado às guias No próximo exemplo, podemos ver como alterar a aparência básica das guias. Podemos substituir todas as regras usadas puramente para fins de exibição com nossas próprias regras de estilo para personalização rápida e fácil sem alterar as regras relacionadas à funcionalidade ou estrutura da guia. Em um novo arquivo no seu editor de texto, crie a seguinte folha de estilo muito pequena. É tudo o que precisamos. Salve o arquivo como tabsTheme. css na pasta css. Se você compara os nomes das classes com as tabelas nas páginas anteriores, verá que estavam substituindo os estilos específicos do tema. Como estavam substituindo o arquivo de tema, precisamos atender ou exceder a especificidade dos seletores no theme. css. É por isso que alvejamos vários seletores às vezes. Neste exemplo, substituímos algumas das regras em ui. tabs. css. Precisamos usar o seletor ID do nosso elemento container juntamente com o seletor de ui. theme. css (.ui-widget-content) para vencer o seletor duplo de classe. ui-tabs. ui-tabs-panel. Não se esqueça de vincular a nova folha de estilo a partir do lt headgt do arquivo HTML subjacente e verifique se a folha de estilo personalizada que acabamos de criar aparece após o arquivo ui. tabs. css: As regras que estamos tentando substituir não serão substituídas por Nosso arquivo de tema se as folhas de estilo não estiverem vinculadas na ordem correta. Salve o arquivo alterado como tabs2.html na pasta jqueryui e visualize-o em um navegador. Deve se parecer com a seguinte imagem: Nosso novo tema não é dramaticamente diferente da lisura padrão. No entanto, podemos ajustar a sua aparência para atender às nossas próprias necessidades e preferências, adicionando apenas alguns estilos adicionais. Opções configuráveis Cada um dos diferentes componentes da biblioteca tem uma série de opções diferentes que controlam quais recursos do widget são habilitados por padrão. Um literal de objeto pode ser passado para o método de widget de guias para configurar essas opções. As opções disponíveis para configurar comportamentos não padrão ao usar o widget de guias são mostradas na tabela a seguir: Uma seqüência especificando os elementos usados ao criar novas guias dinamicamente. Observe que um tag ltagt e um ltspangt são criados quando novas guias são adicionadas pelo widget. O e partes da seqüência de caracteres são usados internamente pelo widget e são substituídos por valores reais pelo widget. Selecionando uma guia Permite ver como essas propriedades configuráveis podem ser usadas. Por exemplo, permite configurar o widget para que a segunda guia seja exibida quando a página for carregada. Remova o lt linkgt para tabsTheme. css no headgt lt e altere o elemento lt scriptgt final para que ele apareça da seguinte maneira: Salve isso como tabs3.html. As diferentes guias e seus painéis de conteúdo associados são representados por um índice numérico começando em zero, muito parecido com um array JavaScript padrão. Especificar uma guia diferente para abrir por padrão é tão fácil quanto fornecer seu número de índice como o valor para a propriedade selecionada. Quando a página é carregada, a segunda guia deve ser selecionada. Weve mudou para o tema de lisura padrão para que possamos focar em como as propriedades funcionam. Além de alterar a guia selecionada, também podemos especificar que nenhuma guia deve ser inicialmente selecionada fornecendo null como valor para essa propriedade. Isso fará com que o widget apareça da seguinte maneira no carregamento da página: Desabilitando uma guia Você pode querer que uma determinada guia seja desativada até que uma determinada condição seja atendida. Isso é facilmente obtido manipulando a propriedade desativada das guias. Altere o objeto de configuração em tabs3.html para isso: Salve isso como tabs4.html na sua pasta jqueryui. Neste exemplo, removemos a propriedade selecionada e adicionamos o índice da segunda guia à matriz desabilitada. Poderíamos adicionar os índices de outras guias a esta matriz também, separados por uma vírgula, para desabilitar várias guias por padrão. Quando a página é carregada em um navegador, a segunda guia tem o nome de classe ui-widget-disabled aplicado a ele, e vai pegar os estilos desativados de ui. theme. css. Ele não responderá às interações do mouse de nenhuma maneira, como mostrado na seguinte captura de tela: Efeitos de transição Podemos facilmente adicionar efeitos de transição atrativos usando a propriedade fx. Eles são exibidos quando as guias estão abertas e fechadas. Esta propriedade é configurada usando outro literal de objeto (ou uma matriz) dentro de nosso objeto de configuração, que permite um ou mais efeitos. Permite ativar efeitos de desvanecimento usando o seguinte objeto de configuração: Salve este arquivo como tabs5.html em sua pasta jqueryui. O objeto fx que criamos tem duas propriedades. A primeira propriedade é a animação. Para usar atenuação, especificamos opacidade como este é o que é ajustado. Gostaríamos de especificar altura como o nome da propriedade em vez de usar animações de abertura. Alternando a opacidade simplesmente inverte sua configuração atual. Se estiver visível, torna-se invisível e vice-versa. A segunda propriedade, duração. Especifica a velocidade na qual a animação ocorre. Os valores para esta propriedade são lentos. Normal (valor padrão) ou rápido. Nós também podemos fornecer um número inteiro que representa o número de milissegundos para a animação deve ser executado. Quando executamos o arquivo, podemos ver que o conteúdo da guia desaparece lentamente quando uma guia é fechada e desaparece quando uma nova guia é aberta. Ambas as animações ocorrem durante uma interação única guia. Para mostrar apenas a animação uma vez, quando uma guia é fechada, por exemplo, precisamos aninhar o objeto fx dentro de uma matriz. Altere o objeto de configuração em tabs5.html para que ele apareça da seguinte maneira: O efeito de fechamento do painel de conteúdo atualmente aberto está contido dentro de um objeto no primeiro item da matriz ea animação de abertura da nova guia é a segunda. Ao especificar null como o segundo item na matriz, desativamos as animações de abertura quando uma nova guia é selecionada. Também podemos especificar diferentes animações e velocidades para abrir e fechar animações adicionando outro objeto como o segundo item de matriz em vez de nulo. Salve isso como tabs6.html e visualize os resultados em um navegador. Abas colapsáveis Por padrão, quando a guia ativa atualmente é clicada, nada acontece. Mas podemos alterar isso para que o painel de conteúdo aberto seja fechado quando o cabeçalho da guia estiver selecionado. Altere o objeto de configuração em tabs6.html para que ele apareça da seguinte maneira: Salve esta versão como tabs7.html. Esta opção permite que todos os painéis de conteúdo sejam fechados, bem como quando nós fornecemos nulo à propriedade selecionada anteriormente. Clicar em uma guia desativada irá selecionar a guia e mostrar o seu painel de conteúdo associado. Clicando na mesma aba outra vez fechá-lo-á, encolhendo o widget para baixo de modo que somente o encabeçamento e os abas sejam indicados). Neste artigo, discutimos os seguintes tópicos: A implementação padrão do widget Como a estrutura CSS segmenta os widgets da guia Como aplicar estilos personalizados a um conjunto de guias Configurando guias usando suas opções Efeitos de transição integrados para alterações no painel de conteúdo Se você Leu este artigo que você pode estar interessado para ver: Youve sido lendo um trecho de: New Popular Posts Compreendemos o seu tempo é importante. Exclusivamente entre os principais editores, procuramos desenvolver e publicar a mais ampla gama de produtos de aprendizagem e informação sobre cada tecnologia. Cada produto Packt oferece um caminho de aprendizado específico, amplamente definido pelo tipo de Série. Essa abordagem estruturada permite selecionar o caminho que melhor se adequa ao seu nível de conhecimento, estilo de aprendizagem e objetivos de tarefas. Como um novo usuário, estes guias tutorial passo-a-passo lhe dará todas as habilidades práticas necessárias para se tornar competente e eficiente. Guia para iniciantes Tutoriais amigáveis e informais que fornecem uma introdução prática usando exemplos, atividades e desafios. Essentials Rápido, concentrado apresentações mostrando a maneira mais rápida de colocar a ferramenta para trabalhar no mundo real. Uma coleção de práticas receitas auto-suficientes que todos os usuários da tecnologia vai encontrar útil para a construção de sistemas mais potentes e confiáveis. Blueprints Guiá-lo através dos tipos mais comuns de encontro do youll do projeto, dando-lhe end-to-end orientação sobre como construir sua solução específica rápida e confiável. Leve suas habilidades ao próximo nível com tutoriais avançados que lhe darão confiança para dominar as ferramentas mais poderosas. Acessível aos leitores que adotam o tópico, esses títulos levam você para a ferramenta ou tecnologia para que você possa se tornar um usuário eficaz. Tabs in jQuery UI 1.7 O widget de abas UI é usado para alternar a visibilidade através de um conjunto de elementos diferentes, cada elemento contendo conteúdo Que pode ser acessado clicando em seu título que aparece como uma guia individual. As guias são estruturadas de forma que se alinham ao lado umas das outras, enquanto que as seções de conteúdo ficam em camadas umas em cima das outras, com apenas a parte superior visível. Clicar em uma guia destacará a guia e colocará seu painel de conteúdo associado no topo da pilha. Apenas um painel de conteúdo pode ser aberto de cada vez. A seguinte captura de tela mostra os diferentes componentes de um conjunto de guias de interface do usuário: Uma implementação de guia básica A estrutura dos elementos HTML subjacentes, em que guias são baseadas, é rígida e widgets requerem um certo número de elementos para que funcionem. As guias devem ser criadas a partir de um elemento de lista (ordenado ou não ordenado) e cada item de lista deve conter um elemento ltagt. Cada link precisará ter um elemento correspondente com um id especificado que está associado ao atributo href de links. Bem esclarecer a estrutura exata destes elementos após o nosso primeiro exemplo. Em um novo arquivo no seu editor de texto, crie a seguinte página: Salve o código como tabs1.html em sua pasta de trabalho jqueryui. Vamos rever o que foi usado. Os seguintes recursos de script e CSS são necessários para a instanciação de widget de guia padrão: Um widget de guia consiste em vários elementos HTML padrão dispostos de uma maneira específica (estes podem ser codificados na página ou adicionados dinamicamente ou podem ser uma mistura de ambos Dependendo dos requisitos da sua implementação). Um elemento de listagem (ltulgt ou ltolgt) Um elemento de listagem para cada guia Um elemento para o conteúdo de cada guia Os dois primeiros elementos dentro do contêiner externo fazem os cabeçalhos de guia clicáveis, que são Usado para mostrar a seção de conteúdo associada à guia. Cada guia deve incluir um item de lista contendo o link. O atributo href do link deve ser definido como um identificador de fragmento, prefixado com. Ele deve corresponder ao atributo id do elemento que forma a seção de conteúdo, com a qual ele está associado. As seções de conteúdo de cada guia são criadas pelos elementos. O atributo id é necessário e será segmentado pelo seu elemento correspondente. Usamos elementos neste exemplo como painéis de conteúdo para cada guia, mas outros elementos, como elementos, também podem ser usados. Os elementos discutidos até agora, juntamente com seus atributos necessários, são o mínimo que são exigidos a partir da marcação subjacente. Ligamos a vários recursos ltscriptgt da biblioteca na parte inferior do ltbodygt antes de sua tag de fechamento. Carregar scripts por último, depois de folhas de estilo e elementos de página é uma técnica comprovada para melhorar o desempenho. Depois de ligar primeiro para jQuery, ligamos ao ficheiro ui. core. js que é requerido por todos os componentes (excepto os efeitos, que têm o seu próprio ficheiro principal). Nós então link para o arquivo de origem de componentes que neste caso é ui. tabs. js. Após os três arquivos de script necessários da biblioteca, podemos voltar para o nosso elemento de script lt personalizado no qual adicionamos o código que cria as guias. Nós simplesmente usamos o atalho (function ()) para executar nosso código quando o documento está pronto. Em seguida, chamamos o método de widget tabs () no objeto jQuery, representando nosso elemento container de tabs (o ltulgt com um id de myTabs).Quando executamos esse arquivo em um navegador, devemos ver as guias como elas apareceram na primeira captura de tela Deste artigo (sem as anotações, é claro). Tab CSS framework classes Usando Firebug para Firefox (ou outro explorador genérico DOM) podemos ver que uma variedade de nomes de classe são adicionados aos diferentes elementos HTML subjacentes que o widget tabs é criado, como mostrado na seguinte imagem: Vamos rever estes Brevemente. Para o recipiente externo lt divgt são adicionados os seguintes nomes de classe: Cantos arredondados aplicados às extremidades inferiores dos painéis de conteúdo Todas essas classes são adicionadas aos elementos subjacentes automaticamente pela biblioteca, não precisamos adicioná-las manualmente ao codificar a página . Como ilustram essas tabelas, a estrutura CSS fornece o conjunto completo de estilos CSS estruturais que controlam como funcionam as guias e estilos específicos de temas que controlam como aparecem as guias, mas não como elas funcionam. Podemos facilmente ver quais seletores bem precisam substituir se quisermos ajustar a aparência do widget, que é o que bem fazer na próxima seção. Aplicando um tema personalizado às guias No próximo exemplo, podemos ver como alterar a aparência básica das guias. Podemos substituir todas as regras usadas puramente para fins de exibição com nossas próprias regras de estilo para personalização rápida e fácil sem alterar as regras relacionadas à funcionalidade ou estrutura da guia. Em um novo arquivo no seu editor de texto, crie a seguinte folha de estilo muito pequena. É tudo o que precisamos. Salve o arquivo como tabsTheme. css na pasta css. Se você compara os nomes das classes com as tabelas nas páginas anteriores, verá que estavam substituindo os estilos específicos do tema. Como estavam substituindo o arquivo de tema, precisamos atender ou exceder a especificidade dos seletores no theme. css. É por isso que alvejamos vários seletores às vezes. Neste exemplo, substituímos algumas das regras em ui. tabs. css. Precisamos usar o seletor ID do nosso elemento container juntamente com o seletor de ui. theme. css (.ui-widget-content) para vencer o seletor duplo de classe. ui-tabs. ui-tabs-panel. Não se esqueça de vincular a nova folha de estilo a partir do lt headgt do arquivo HTML subjacente e verifique se a folha de estilo personalizada que acabamos de criar aparece após o arquivo ui. tabs. css: As regras que estamos tentando substituir não serão substituídas por Nosso arquivo de tema se as folhas de estilo não estiverem vinculadas na ordem correta. Salve o arquivo alterado como tabs2.html na pasta jqueryui e visualize-o em um navegador. Deve se parecer com a seguinte imagem: Nosso novo tema não é dramaticamente diferente da lisura padrão. No entanto, podemos ajustar a sua aparência para atender às nossas próprias necessidades e preferências, adicionando apenas alguns estilos adicionais. Opções configuráveis Cada um dos diferentes componentes da biblioteca tem uma série de opções diferentes que controlam quais recursos do widget são habilitados por padrão. Um literal de objeto pode ser passado para o método de widget de guias para configurar essas opções. As opções disponíveis para configurar comportamentos não padrão ao usar o widget de guias são mostradas na tabela a seguir: Uma seqüência especificando os elementos usados ao criar novas guias dinamicamente. Observe que um tag ltagt e um ltspangt são criados quando novas guias são adicionadas pelo widget. O e partes da seqüência de caracteres são usados internamente pelo widget e são substituídos por valores reais pelo widget. Selecionando uma guia Permite ver como essas propriedades configuráveis podem ser usadas. Por exemplo, permite configurar o widget para que a segunda guia seja exibida quando a página for carregada. Remova o lt linkgt para tabsTheme. css no headgt lt e altere o elemento lt scriptgt final para que ele apareça da seguinte maneira: Salve isso como tabs3.html. As diferentes guias e seus painéis de conteúdo associados são representados por um índice numérico começando em zero, muito parecido com um array JavaScript padrão. Especificar uma guia diferente para abrir por padrão é tão fácil quanto fornecer seu número de índice como o valor para a propriedade selecionada. Quando a página é carregada, a segunda guia deve ser selecionada. Weve mudou para o tema de lisura padrão para que possamos focar em como as propriedades funcionam. Além de alterar a guia selecionada, também podemos especificar que nenhuma guia deve ser inicialmente selecionada fornecendo null como valor para essa propriedade. Isso fará com que o widget apareça da seguinte maneira no carregamento da página: Desabilitando uma guia Você pode querer que uma determinada guia seja desativada até que uma determinada condição seja atendida. Isso é facilmente obtido manipulando a propriedade desativada das guias. Altere o objeto de configuração em tabs3.html para isso: Salve isso como tabs4.html na sua pasta jqueryui. Neste exemplo, removemos a propriedade selecionada e adicionamos o índice da segunda guia à matriz desabilitada. Poderíamos adicionar os índices de outras guias a esta matriz também, separados por uma vírgula, para desabilitar várias guias por padrão. Quando a página é carregada em um navegador, a segunda guia tem o nome de classe ui-widget-disabled aplicado a ele, e vai pegar os estilos desativados de ui. theme. css. Ele não responderá às interações do mouse de nenhuma maneira, como mostrado na seguinte captura de tela: Efeitos de transição Podemos facilmente adicionar efeitos de transição atrativos usando a propriedade fx. Eles são exibidos quando as guias estão abertas e fechadas. Esta propriedade é configurada usando outro literal de objeto (ou uma matriz) dentro de nosso objeto de configuração, que permite um ou mais efeitos. Permite ativar efeitos de desvanecimento usando o seguinte objeto de configuração: Salve este arquivo como tabs5.html em sua pasta jqueryui. O objeto fx que criamos tem duas propriedades. A primeira propriedade é a animação. Para usar atenuação, especificamos opacidade como este é o que é ajustado. Gostaríamos de especificar altura como o nome da propriedade em vez de usar animações de abertura. Alternando a opacidade simplesmente inverte sua configuração atual. Se estiver visível, torna-se invisível e vice-versa. A segunda propriedade, duração. Especifica a velocidade na qual a animação ocorre. Os valores para esta propriedade são lentos. Normal (valor padrão) ou rápido. Nós também podemos fornecer um número inteiro que representa o número de milissegundos para a animação deve ser executado. Quando executamos o arquivo, podemos ver que o conteúdo da guia desaparece lentamente quando uma guia é fechada e desaparece quando uma nova guia é aberta. Ambas as animações ocorrem durante uma interação única guia. Para mostrar apenas a animação uma vez, quando uma guia é fechada, por exemplo, precisamos aninhar o objeto fx dentro de uma matriz. Altere o objeto de configuração em tabs5.html para que ele apareça da seguinte maneira: O efeito de fechamento do painel de conteúdo atualmente aberto está contido dentro de um objeto no primeiro item da matriz ea animação de abertura da nova guia é a segunda. Ao especificar null como o segundo item na matriz, desativamos as animações de abertura quando uma nova guia é selecionada. Também podemos especificar diferentes animações e velocidades para abrir e fechar animações adicionando outro objeto como o segundo item de matriz em vez de nulo. Salve isso como tabs6.html e visualize os resultados em um navegador. Abas colapsáveis Por padrão, quando a guia ativa atualmente é clicada, nada acontece. Mas podemos alterar isso para que o painel de conteúdo aberto seja fechado quando o cabeçalho da guia estiver selecionado. Altere o objeto de configuração em tabs6.html para que ele apareça da seguinte maneira: Salve esta versão como tabs7.html. Esta opção permite que todos os painéis de conteúdo sejam fechados, bem como quando nós fornecemos nulo à propriedade selecionada anteriormente. Clicar em uma guia desativada irá selecionar a guia e mostrar o seu painel de conteúdo associado. Clicando na mesma aba outra vez fechá-lo-á, encolhendo o widget para baixo de modo que somente o encabeçamento e os abas sejam indicados). Neste artigo, discutimos os seguintes tópicos: A implementação padrão do widget Como a estrutura CSS segmenta os widgets da guia Como aplicar estilos personalizados a um conjunto de guias Configurando guias usando suas opções Efeitos de transição integrados para alterações no painel de conteúdo Se você Leu este artigo que você pode estar interessado para ver: Youve sido lendo um trecho de: New Popular Posts Compreendemos o seu tempo é importante. Exclusivamente entre os principais editores, procuramos desenvolver e publicar a mais ampla gama de produtos de aprendizagem e informação sobre cada tecnologia. Cada produto Packt oferece um caminho de aprendizado específico, amplamente definido pelo tipo de Série. Essa abordagem estruturada permite selecionar o caminho que melhor se adequa ao seu nível de conhecimento, estilo de aprendizagem e objetivos de tarefas. Como um novo usuário, estes guias tutorial passo-a-passo lhe dará todas as habilidades práticas necessárias para se tornar competente e eficiente. Guia para iniciantes Tutoriais amigáveis e informais que fornecem uma introdução prática usando exemplos, atividades e desafios. Essentials Rápido, concentrado apresentações mostrando a maneira mais rápida de colocar a ferramenta para trabalhar no mundo real. Uma coleção de práticas receitas auto-suficientes que todos os usuários da tecnologia vai encontrar útil para a construção de sistemas mais potentes e confiáveis. Blueprints Guiá-lo através dos tipos mais comuns de encontro do youll do projeto, dando-lhe end-to-end orientação sobre como construir sua solução específica rápida e confiável. Leve suas habilidades ao próximo nível com tutoriais avançados que lhe darão confiança para dominar as ferramentas mais poderosas. Acessível aos leitores que adotam o tópico, estes títulos o começ na ferramenta ou na tecnologia de modo que você possa se transformar um usuário eficaz.
No comments:
Post a Comment