jQuery UI exemplo - caixa de dica de ferramenta (sugestão)

Anterior: jQuery UI exemplo - guias (Tabs)

Seguinte: exemplo jQuery UI - efeitos especiais (efeito)

Customizável, caixa de dica themable, substituir a caixa de dica de ferramenta nativa.

Para mais detalhes sobre o membro dica, consulte a documentação da API membro caixa de dica de ferramenta (sugestão do Widget) .

A função padrão

Passe o mouse sobre o link, ou use a tecla TAB para percorrer o foco em cada elemento.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de jQuery UI dica (sugestão) - Função Padrã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.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Documento) .tooltip ();
  });
  </ Script>
  <Style>
  label {
    display: inline-block;
    width: 5em;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> ele pode ser ligado a qualquer elemento. Quando você passa o mouse sobre o elemento, propriedade de título será exibido em uma pequena caixa ao lado do elemento, como nativa como uma caixa de dica de ferramenta. </ P>
<P> No entanto, uma vez que não é uma caixa de dica nativa de modo que pode ser definida estilos. Tema por <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> criado também pode ser definida estilos de caixa em conformidade dica. </ P>
<P> caixa de dica também pode ser usado para formar elementos para mostrar em cada região algumas informações adicionais. </ P>
<P> <label for = "idade"> sua idade: </ label> <input id = "idade" title = ". Idade é utilizado apenas para fins estatísticos"> </ p>
<P> Passe o mouse sobre a área correspondente para visualizar uma caixa de dica de ferramenta. </ P>
 
 
</ Body>
</ Html>

estilo personalizado

Passe o mouse sobre o link, ou use a tecla TAB para percorrer o foco em cada elemento.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de dica jQuery UI (sugestão) - estilo personalizado </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Documento) .tooltip ({
      Posição: {
        meu: "centro de bottom-20",
        em: "central superior",
        usando: function (posição, o feedback) {
          $ (Este) .css (posição);
          $ ( "<Div>")
            .addClass ( "seta")
            .addClass (feedback.vertical)
            .addClass (feedback.horizontal)
            .appendTo (this);
        }
      }
    });
  });
  </ Script>
  <Style>
  .ui-dica, .arrow: after {
    fundo: black;
    border: 2px sólido branco;
  }
  .ui-dica {
    padding: 10px 20px;
    cor: branco;
    border-radius: 20px;
    font: 14px bold "Helvetica Neue", Sans-Serif;
    text-transform: maiúsculas;
    box-shadow: 0 0 7px preta;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow: after {
    conteúdo: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px preta;
    -webkit-transform: rotate (45 graus);
    -moz-transform: rotate (45 graus);
    -ms-transform: rotate (45 graus);
    -o-transform: rotate (45 graus);
    tranform: rotate (45 graus);
  }
  .arrow.top: after {
    bottom: -20px;
    top: auto;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> ele pode ser ligado a qualquer elemento. Quando você passa o mouse sobre o elemento, propriedade de título será exibido em uma pequena caixa ao lado do elemento, como nativa como uma caixa de dica de ferramenta. </ P>
<P> No entanto, uma vez que não é uma caixa de dica nativa de modo que pode ser definida estilos. Tema por <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> criado também pode ser definida estilos de caixa em conformidade dica. </ P>
<P> caixa de dica também pode ser usado para formar elementos para mostrar em cada região algumas informações adicionais. </ P>
<P> <label for = "idade"> sua idade: </ label> <input id = "idade" title = ". Idade é utilizado apenas para fins estatísticos"> </ p>
<P> Passe o mouse sobre a área correspondente para visualizar uma caixa de dica de ferramenta. </ P>
 
 
</ Body>
</ Html>

Animação personalizada

Este exemplo demonstra como usar as opções de mostrar e ocultar para personalizar a animação, você também pode usar o evento aberto para personalizar a animação.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de dica jQuery UI (sugestão) - Animação personalizada </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Show-opção") .tooltip ({
      show: {
        efeito: "slideDown",
        delay: 250
      }
    });
    $ ( "# Hide-opção") .tooltip ({
      esconder: {
        efeito: "explodir",
        delay: 250
      }
    });
    $ ( "# Open-evento") .tooltip ({
      show: null,
      Posição: {
        meu: "superior esquerdo",
        em: "baixo à esquerda"
      },
      aberta: function (evento, ui) {
        ui.tooltip.animate ({top: ui.tooltip.position () superior + 10.}, "fast");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Há uma série de maneiras de personalizar dica caixa de animação. </ P>
<P> Você pode usar <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> mostram </a> <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> esconder </a> opção. </ P>
<P> Você também pode usar <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> aberta </a> evento. </ P>
 
 
</ Body>
</ Html>

conteúdo Personalizado

Demonstrar como personalizar itens e opções de conteúdo para combinar caixa de dica evento delegado diferente para uma única instância.

Pode ser necessário para mapear a interação caixa de dica de ferramenta, que é uma versão futura da função a ser realizado.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de jQuery UI dica (sugestão) - conteúdo personalizado </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .photo {
    width: 300px;
    text-align: center;
  }
  .photo .ui-widget-header {
    margin: 1em 0;
  }
  .map {
    width: 350px;
    height: 350px;
  }
  .ui-dica {
    max-width: 350px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Documento) .tooltip ({
      itens: "img, [geo-dados], [título]",
      conteúdo: function () {
        var elemento = $ (this);
        if (element.is ( "[dados geo]")) {
          var text = element.text ();
          retorno "<img class =" mapa "alt = '" + texto +
            "" Src = 'http: //maps.google.com/maps/api/staticmap? "+
            "Zoom = 11 & size = 350x350 & maptype = terreno e do sensor = false & centro =" +
            texto + ""> ";
        }
        if (element.is ( "[título]")) {
          voltar element.attr ( "título");
        }
        Se (element.is ( "img")) {
          voltar element.attr ( "alt");
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "ui-widget foto">
  <Div class = "ui-widget-header ui-canto-all">
    <H2> Stephansdom (Catedral de St. Stephen) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo=""> Viena, Áustria (Viena, Áustria) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <Img src = "../ wp-content / uploads / 2014/03 / st-stephens.jpg" alt = "Catedral de Santo Estêvão (St. Stephen & apos; Catedral s)" class = "ui-canto-all">
  </a>
</ Div>
 
<Div class = "ui-widget foto">
  <Div class = "ui-widget-header ui-canto-all">
    <H2> Tower Bridge (Ponte da Torre) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo=""> London (Londres, Inglaterra) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <Img src = "../ wp-content / uploads / 2014/03 / torre-Bridge.jpg" alt = "Tower Bridge (Ponte da Torre)" class = "ui-canto-all">
  </a>
</ Div>
 
<P> Todos os quadros de <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a>, e são propriedade de <a href = "http://creativecommons.org/ licenses / by-sa / 3.0 / deed.en "title =" Creative Commons Attribution-Share Alike 3.0 "> CC BY-SA 3.0 </a> sob detentores de direitos autorais. </ P>
 
 
</ Body>
</ Html>

formulário

Use o botão abaixo para exibir o texto de ajuda, ou apenas deixar o seu foco do mouse sobre a caixa de entrada ou ter a caixa de entrada tem o foco, você pode exibir texto de ajuda caixa de entrada correspondente.

Definir uma largura fixa em CSS, de modo que exibe simultaneamente todo o texto de ajuda parece mais consistente.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de jQuery UI dica (sugestão) - Formulários </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  label {
    display: inline-block; width: 5em;
  }
  div fieldset {
    margin-bottom: 2em;
  }
  .help fieldset {
    display: inline-block;
  }
  .ui-dica {
    width: 210px;
  }
  </ Style>
  <Script>
  $ (Function () {
    var dicas = $ ( "[título]") .tooltip ();
    $ ( "<Button>")
      .text ( "Show de ajuda")
      .button ()
      .click (function () {
        tooltips.tooltip ( "open");
      })
      .insertAfter ( "forma");
  });
  </ Script>
</ Head>
<Body>
 
<Form>
  <Fieldset>
    <Div>
      <Label for = "nome"> nome </ label>
      <Id = nome de entrada "nome" = "firstname" title = "Por favor, forneça o seu primeiro nome.">
    </ Div>
    <Div>
      <Label for = "sobrenome"> Apelido </ label>
      <Id = name Input "sobrenome" = título de "sobrenome" = "Por favor, forneça seu sobrenome.">
    </ Div>
    <Div>
      <Label for = "endereço"> endereço </ label>
      <Input id = "endereço" name = "endereço" title = "o seu endereço residencial ou comercial.">
    </ Div>
  </ Fieldset>
</ Form>
 
 
</ Body>
</ Html>

rastreamento do mouse

Nesta caixa de dica instância é posicionado em relação ao rato, quando o mouse passa sobre o elemento, ele irá seguir o movimento do mouse.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de jQuery UI dica (sugestão) - rastreamento do mouse </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  label {
    display: inline-block;
    width: 5em;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Documento) .tooltip ({
      pista: true
    });
  });
  </ Script>
</ Head>
<Body>

<P> <a href="#" title="部件的名称"> Tooltips </a> ele pode ser ligado a qualquer elemento. Quando você passa o mouse sobre o elemento, propriedade de título será exibido em uma pequena caixa ao lado do elemento, como nativa como uma caixa de dica de ferramenta. </ P>
<P> No entanto, uma vez que não é uma caixa de dica nativa de modo que pode ser definida estilos. Tema por <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> criado também pode ser definida estilos de caixa em conformidade dica. </ P>
<P> caixa de dica também pode ser usado para formar elementos para mostrar em cada região algumas informações adicionais. </ P>
<P> <label for = "idade"> sua idade: </ label> <input id = "idade" title = ". Idade é utilizado apenas para fins estatísticos"> </ p>
<P> Passe o mouse sobre a área correspondente para visualizar uma caixa de dica de ferramenta. </ P>
 
 
</ Body>
</ Html>

aparelho de vídeo

Um player de vídeo virtual com gosto partilhar botão / / Estatística, cada botão com a caixa de estilos personalizados dica.

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <Title> caixa de dica jQuery UI (sugestão) - Video Player </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .Player {
    width: 500px;
    height: 300px;
    border: 2px sulco cinzento;
    background: rgb (200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  .ui-dica {
    border: 1px sólido branco;
    background: rgba (20, 20, 20, 1);
    cor: branco;
  }
  .set {
    display: inline-block;
  }
  .notification {
    position: absolute;
    display: inline-block;
    font-size: 2em;
    padding: .5em;
    box-shadow: 2px 2px 5px -2px rgba (0,0,0,0.5);
  }
  </ Style>
  <Script>
  $ (Function () {
    função de notificar (input) {
      var msg = "Selected" + $ .trim (input.data ( "tooltip-título") || input.text ());
      $ ( "<Div>")
        .appendTo (document.body)
        .text (msg)
        .addClass ( "notificação ui-ui-estado padrão canto inferior")
        .position ({
          meu: "top center",
          em: "central superior",
          de: janela
        })
        .mostrar ({
          efeito: "cego"
        })
        .delay (1000)
        .hide ({
          efeito: "cego",
          duração: "lento"
        }, Function () {
          $ (Este) .remove ();
        });
    }
 
    $ ( "Button") .each (function () {
      botão var = $ (this) .button ({
        Ícones: {
          primária: $ (this) .data ( "ícone")
        },
        texto: !! $ (this) .attr ( "título")
      });
      button.click (function () {
        notificar (botão);
      });
    });
    $ ( ".set") .buttonset ({
      itens: "button"
    });
 
    $ (Documento) .tooltip ({
      Posição: {
        meu: "top center",
        em: "bottom center + 5",
      },
      show: {
        duração: "rápido"
      },
      esconder: {
        efeito: "esconder"
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "player"> Aqui está o vídeo (HTML5?) </ Div>
<Div class = "Ferramentas">
  <Span class = "set">
    <Button-icon data = "ui-icon-círculo-seta-n" title = "Gosto deste vídeo"> como </ button>
    <Button-icon data = "ui-icon-círculo-seta-s"> Eu não gosto deste vídeo </ button>
  </ Span>
  <Div class = "set">
    <Button-icon data = "ui-icon-círculo-plus" title = "Adicionar à lista de reprodução"> Adicionar a </ button>
    <Classe Button = "menu"-icon data = "ui-icon-triângulo-1-s"> Adicionar a Favoritos </ button>
  </ Div>
  <Button title = "Compartilhe este vídeo"> Share </ button>
  <Button-icon data = "ui-icon-alert"> marcado como inadequado </ button>
</ Div>
 
 
</ Body>
</ Html>

Anterior: jQuery UI exemplo - guias (Tabs)

Seguinte: exemplo jQuery UI - efeitos especiais (efeito)

jQuery UI curso

jQuery UI tema

jQuery UI Biblioteca de componentes

jQuery UI manual de referência

jQuery UI Exemplos