Latest web development tutorials

jQuery UI API - membro de caixa de dica de ferramenta (Sugestão Widget)

categoria

Widgets (Widgets)

uso

Descrição:, caixa de dica themable customizáveis, substituir a caixa de dica de ferramenta nativa.

Nova versão: 1.9

caixa de dica (tooltip) substituiu a caixa de dica de ferramenta nativa, para que eles possam theming, também permite várias personalizações:

  • Mostrar não só o título do outro conteúdo, assim como notas de rodapé ou em linha por Ajax para recuperar o conteúdo adicional.
  • A segmentação personalizada, por exemplo, centrada na caixa do elemento dica.
  • Adicionar estilos adicionais para personalizar a aparência de uma região aviso ou erro.

A animação gradiente padrão para mostrar e ocultar a caixa dica, em comparação com o simples alternar a visibilidade de tal aparência mais espiritual. Isso pode show e hide opções de personalização.

items e content opções devem manter o ritmo. Se você alterar um, terá de mudar o outro.

Em geral, os elementos com deficiência não irá desencadear eventos DOM. Portanto, uma ferramenta apropriada para controlar o elemento de balão com deficiência não é possível, porque precisamos ouvir eventos para determinar quando para mostrar e ocultar a caixa dica. Isto leva a jQuery UI não pode garantir suporte para o elemento deficientes ligado a caixa de ponta a ferramenta em qualquer nível. Isto significa que se você precisa de ser solicitado para os elementos deficientes, você pode precisar usar uma mistura de balão caixa dica nativa e jQuery UI.

theming

membro de caixa de dica de ferramenta (dica Widget) utilizando framework jQuery UI CSS para definir a aparência de seu estilo. Se você precisar usar a caixa de estilo dica de ferramenta especificada, você pode usar o seguinte nome da classe CSS:

  • ui-tooltip : recipiente externo caixa de dica de ferramenta.
    • ui-tooltip-content : tooltip conteúdo da caixa.

depender

informações adicionais

  • A parte requer alguma CSS funcional, caso contrário não vai funcionar. Se você criar um tema personalizado, use o arquivo CSS Widget especificado como um ponto de partida.

Exemplos

Use todos os elementos com o atributo title do corretor evento, para criar uma caixa de dica de ferramenta (sugestão) sobre o documento. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> membro caixa de dica de ferramenta (Sugestão Widget) Demonstração </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<P>
  <a href="#" title="锚描述"> texto âncora </a>
  <Title Input = "Input Ajuda">
</ P>
<Script>
  $ (Documento) .tooltip ();
</ Script>
 
</ Body>
</ Html>