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. 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: Guias Guias de widgets são geralmente usadas para quebrar o conteúdo em várias seções que podem ser trocadas para economizar espaço, bem como um acordeão. O conteúdo para cada painel de aba pode ser definido in-page ou pode ser carregado via Ajax ambos são manipulados automaticamente com base no href da âncora associada à guia. Por padrão, as guias são ativadas ao clicar, mas os eventos podem ser alterados para passar o cursor do mouse sobre a opção de evento. 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. AjaxOptionsxA0 Opções adicionais do Ajax a serem consideradas ao carregar o conteúdo da guia (consulte jQuery. ajax ()). CachexA0 Se deseja ou não armazenar em cache o conteúdo das guias remotas, p. Carregue apenas uma vez ou com cada clique. O conteúdo em cache está sendo carregado de forma preguiçosa, p. Uma vez e apenas uma vez para o primeiro clique. Observe que, para evitar que os pedidos Ajax reais sejam armazenados em cache pelo navegador, você precisa fornecer um cache adicional: sinalizador false na opção ajaxOptions. ColapsiblexA0 Quando definido como true. O painel activo pode ser fechado. CookiexA0 Armazene a última guia selecionada em um cookie. O cookie é então usado para determinar a guia inicialmente selecionada se a opção selecionada não estiver definida. Requer o plug-in do cookie, que também pode ser encontrado na pasta development-bundle-external do construtor de download. O objeto precisa ter pares keyvalue do formulário que o plugin do cookie espera como opções. Exemplo:. Desde jQuery UI 1.7 também é possível definir o nome do cookie que está sendo usado através da propriedade name. DisabledxA0 Que guias estão desabilitadas. Vários tipos suportados: Boolean. Ativar ou desativar todas as guias. Array. Uma matriz contendo os índices baseados em zero das guias que devem ser desabilitadas, p. 0, 2 desativariam a primeira ea terceira guia. EventxA0 O tipo de evento que as guias devem reagir para ativar a guia. Para ativar em hover, use quotmouseoverquot. Ativar animações para ocultar os painéis das abas. Vários tipos suportados: Object. Pares de valores-chave de propriedades para animar e duração opcional, p. . Array. Configurações de animação no formato hideSettings, showSettings. IdPrefixxA0 Se a guia remota, seu elemento âncora que é, não tem atributo de título para gerar um id de, um idfragment identificador é criado a partir deste prefixo e um único id, por exemplo quotui-tabs-54quot. PanelTemplatexA0 modelo HTML a partir do qual um novo painel de guia é criado no caso de adicionar uma guia com o método add () ou ao criar um painel para uma guia remota rapidamente. SelectedxA0 O índice baseado em zero do painel selecionado (aberto). A definição seleccionada para -1 recolherá todos os painéis. Isso exige que a opção recolhível seja verdadeira. SpinnerxA0 O conteúdo HTML a ser exibido em um título de guia enquanto o conteúdo remoto está sendo carregado. Defina esta opção como uma string vazia para desativar o comportamento do spinner. Um elemento span deve estar presente na etiqueta de âncora do título para que o conteúdo do spinner seja visível. TabTemplatexA0 Modelo HTML a partir do qual uma nova guia é criada e adicionada. Os espaços reservados e são substituídos com o rótulo URL e tab que são passados como argumentos para o método add (). Abort () Retorna: jQuery (plugin somente) Termine todas as solicitações ajax e animações de rolagem. Este método não aceita nenhuma guia arguments. jQuery rola para o topo da página ao usar 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 ) Developer Links Whataposs Novo no jQuery UI 1.12 Novo tema. Novo tema: O nosso tema padrão de tons de cinzentos por defeito de longa data A suavidade foi sucedida por um tema moderno com algumas cores, menos gradientes e outras melhorias. Novos widgets. JQuery UI 1.12 inclui widgets: Controlgroup substitui buttonset e adiciona suporte para selectmenu e o novo widget checkboxradio. Weaposve adicionou suporte para usar jQuery UI com AMD e Bower. Temos também mais de 50 correções de bugs. Nova opção de classes. Todos os widgets têm uma nova opção, chamada classes. Isso dá muito mais controle sobre estilo visual e theming personalizado. Por exemplo, a criação de um tema Bootstrap para jQuery UI é agora muito mais fácil. JQuery UI é construído para designers e desenvolvedores similares. Weaposve projetou todos os nossos plugins para que você fique pronto e funcionando rapidamente, sendo flexível o suficiente para evoluir com suas necessidades e resolver uma infinidade de casos de uso. Se youaposre novo para jQuery UI, confira nosso guia de introduçã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, assinando nosso blog e seguindo-nos no Twitter. Interações
No comments:
Post a Comment