jQuery UI ejemplo - cuadro de información sobre herramientas (información sobre herramientas)

Anterior: ejemplo jQuery UI - pestañas (Tabs)

Siguiente: ejemplo jQuery UI - efectos especiales (efecto)

, Cuadro de información sobre herramientas themable personalizable, sustituir el cuadro de información sobre herramientas nativa.

Para más detalles sobre el elemento de información de herramientas, consulte la documentación de la API elemento de caja sobre herramientas (información sobre herramientas del widget) .

La función predeterminada

Pase el ratón sobre el enlace, o utilizar la tecla de tabulación para desplazarse por el enfoque en cada elemento.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - Función Por defecto </ 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 () {
    $ (Document) .tooltip ();
  });
  </ Script>
  <Style>
  label {
    display: inline-block;
    anchura: 5em;
  }
  </ Style>
</ Head>
<Cuerpo>
 
<P> <a href="#" title="部件的名称"> sobre herramientas </a> que se puede enlazar a cualquier elemento. Al pasar sobre el elemento, la propiedad del título se mostrará en una pequeña caja al lado del elemento, como nativo como una caja de herramientas. </ P>
<P> Sin embargo, debido a que no es un cuadro de información de herramienta nativa por lo que se puede definir estilos. Tema por <a href="http://themeroller.com" title="ThemeRoller:jQuery IU 的主题创建应用程序"> ThemeRoller </a> creado también se puede definir estilos de recuadro en consecuencia sobre herramientas. </ P>
<P> cuadro de información de herramientas también se puede utilizar para formar elementos para mostrar en cada región alguna información adicional. </ P>
<P> <label for = "edad"> su edad: </ label> <input id = "edad" title = ". La edad es utilizado para fines estadísticos"> </ p>
<P> pase sobre el área correspondiente para ver una caja de herramientas. </ P>
 
 
</ Body>
</ Html>

estilo personalizado

Pase el ratón sobre el enlace, o utilizar la tecla de tabulación para desplazarse por el enfoque en cada elemento.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - estilos de usuario </ 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 () {
    $ (Document) .tooltip ({
      Posición: {
        mi: "inferior central-20",
        en: "la parte superior central",
        usando: función (posición, la retroalimentación) {
          $ (Este) .css (posición);
          $ ( "<Div>")
            .addClass ( "flecha")
            .addClass (feedback.vertical)
            .addClass (feedback.horizontal)
            .appendTo (this);
        }
      }
    });
  });
  </ Script>
  <Style>
  .ui-información sobre herramientas, .arrow: tras {
    fondo: negro;
    frontera: 2px sólido blanco;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: blanco;
    la frontera de radio: 20px;
    fuente: 14px negrita "Helvetica Neue", sans-serif;
    text-transform: mayúsculas;
    box-shadow: 0 0 7px negro;
  }
  .arrow {
    Ancho: 70px;
    altura: 16px;
    overflow: hidden;
    position: absolute;
    izquierda: 50%;
    margin-left: -35px;
    parte inferior: -16px;
  }
  .arrow.top {
    arriba: -16px;
    parte inferior: auto;
  }
  .arrow.left {
    izquierda: 20%;
  }
  .arrow: tras {
    contenido: "";
    position: absolute;
    izquierda: 20px;
    arriba: -20px;
    Ancho: 25px;
    altura: 25px;
    box-shadow: 6px 5px 9px -9px negro;
    -webkit-transform: rotate (45 grados);
    -moz-transform: rotar (45 grados);
    -ms-transform: gira (45 grados);
    -o-transform: rotate (45 grados);
    TRANFORM: rotación (45 grados);
  }
  .arrow.top: tras {
    parte inferior: -20px;
    arriba: auto;
  }
  </ Style>
</ Head>
<Cuerpo>
 
<P> <a href="#" title="部件的名称"> sobre herramientas </a> que se puede enlazar a cualquier elemento. Al pasar sobre el elemento, la propiedad del título se mostrará en una pequeña caja al lado del elemento, como nativo como una caja de herramientas. </ P>
<P> Sin embargo, debido a que no es un cuadro de información de herramienta nativa por lo que se puede definir estilos. Tema por <a href="http://themeroller.com" title="ThemeRoller:jQuery IU 的主题创建应用程序"> ThemeRoller </a> creado también se puede definir estilos de recuadro en consecuencia sobre herramientas. </ P>
<P> cuadro de información de herramientas también se puede utilizar para formar elementos para mostrar en cada región alguna información adicional. </ P>
<P> <label for = "edad"> su edad: </ label> <input id = "edad" title = ". La edad es utilizado para fines estadísticos"> </ p>
<P> pase sobre el área correspondiente para ver una caja de herramientas. </ P>
 
 
</ Body>
</ Html>

Personalizar animación

Este ejemplo muestra cómo utilizar las opciones de presentación y esconderse para personalizar la animación, también se puede utilizar el evento abierto a personalizar la animación.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - Personalizar animación </ 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 () {
    $ ( "# Mostrar-option") .tooltip ({
      espectáculo: {
        efecto: "slideDown",
        retraso: 250
      }
    });
    $ ( "# Hide-opción") .tooltip ({
      ocultar: {
        efecto: "explotar",
        retraso: 250
      }
    });
    $ ( "# Abrir-evento") .tooltip ({
      espectáculo: null,
      Posición: {
        mi: "arriba a la izquierda",
        en: "abajo a la izquierda"
      },
      abierta: function (event, ui) {
        ui.tooltip.animate ({top: ui.tooltip.position () arriba + 10.}, "rápido");
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<P> Hay un número de maneras de personalizar la animación cuadro de información sobre herramientas. </ P>
<P> Puede utilizar <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> espectáculo y </a> <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> ocultar </a> opción. </ P>
<P> También puede utilizar <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> abierta </a> evento. </ P>
 
 
</ Body>
</ Html>

de contenido personalizado

Demostrar cómo personalizar los elementos y opciones de contenido para combinar diferentes cuadro de información sobre herramientas de delegado de eventos a una instancia única.

Es posible que necesite para mapear la interacción cuadro de información sobre herramientas, que es una versión futura de la función a realizar.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - contenido 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 {
    Anchura: 300px;
    text-align: center;
  }
  .photo .ui-Reproductor-header {
    Margen: 1 em 0;
  }
  .map {
    Anchura: 350px;
    altura: 350px;
  }
  .ui-tooltip {
    max-width: 350px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Document) .tooltip ({
      artículos: "img, [los datos geo-], [título]",
      contenido: function () {
        elemento var = $ (this);
        si (element.is ( "[datos geo-]")) {
          var texto = element.text ();
          retorno "<img class =" mapa "alt =" "+ texto +
            " 'Src =' http: //maps.google.com/maps/api/staticmap?" +
            "Zoom = 11 & size = 350x350 y MapType = terreno y sensor = false & Centro =" +
            texto + " '>";
        }
        (si element.is ( "[Título]")) {
          volver element.attr ( "título");
        }
        si (element.is ( "img")) {
          volver element.attr ( "alt");
        }
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de la foto">
  <Div class = "ui-ui widget de cabecera-esquina-all">
    <H2> catedral de San Esteban (Stephansdom) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo=""> Viena, Austria (Viena, Austria) </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 San Esteban (San Esteban y apos; s catedral)" class = "ui-esquina-all">
  </a>
</ Div>
 
<Div class = "ui-widget de la foto">
  <Div class = "ui-ui widget de cabecera-esquina-all">
    <H2> Puente de la Torre (Tower Bridge) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo=""> Londres (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 = "Puente de la Torre (Tower Bridge)" class = "ui-esquina-all">
  </a>
</ Div>
 
<P> Todas las fotos de <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a> y son propiedad de <a href = "http://creativecommons.org/ licencias / / 3.0 / deed.en "title =" Creative Commons Reconocimiento-Compartir Igual 3.0 "> CC by-sa BY-SA 3.0 </a> virtud de los propietarios del copyright. </ P>
 
 
</ Body>
</ Html>

formulario

Usa el botón de abajo para mostrar el texto de ayuda, o simplemente dejar que el cursor del mouse sobre el cuadro de entrada o tener el cuadro de entrada está seleccionada, se puede ver un texto cuadro de entrada correspondiente.

Definir un ancho fijo en el CSS, por lo que muestra simultáneamente todo el texto de ayuda parece más consistente.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - Formularios </ 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; anchura: 5em;
  }
  div fieldset {
    margin-bottom: 2em;
  }
  .help fieldset {
    display: inline-block;
  }
  .ui-tooltip {
    Anchura: 210px;
  }
  </ Style>
  <Script>
  $ (Function () {
    var la información de herramientas = $ ( "[título]") .tooltip ();
    $ ( "<Button>")
      .text ( "Mostrar ayuda")
      .button ()
      .click (function () {
        tooltips.tooltip ( "abierta");
      })
      .insertAfter ( "forma");
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Forma>
  <Fieldset>
    <Div>
      <Label for = "nombre"> Nombre </ label>
      <Id = Nombre de entrada "Nombre" = título de "nombre" = "Por favor proporcione su nombre de pila.">
    </ Div>
    <Div>
      <Label for = "apellido"> Apellidos </ label>
      <Id = Nombre de entrada "apellido" = "apellido" title = "Por favor proporcionar su apellido.">
    </ Div>
    <Div>
      <Label for = "dirección"> Dirección </ label>
      <Entrada id = "dirección" name = "dirección" title = "su hogar o de trabajo.">
    </ Div>
  </ Fieldset>
</ Form>
 
 
</ Body>
</ Html>

seguimiento de ratón

En este cuadro de información sobre herramientas instancia se posiciona en relación con el ratón, cuando se mueve el ratón sobre el elemento, se seguirá el movimiento del ratón.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - seguimiento del ratón </ 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;
    anchura: 5em;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Document) .tooltip ({
      pista: true
    });
  });
  </ Script>
</ Head>
<Cuerpo>

<P> <a href="#" title="部件的名称"> sobre herramientas </a> que se puede enlazar a cualquier elemento. Al pasar sobre el elemento, la propiedad del título se mostrará en una pequeña caja al lado del elemento, como nativo como una caja de herramientas. </ P>
<P> Sin embargo, debido a que no es un cuadro de información de herramienta nativa por lo que se puede definir estilos. Tema por <a href="http://themeroller.com" title="ThemeRoller:jQuery IU 的主题创建应用程序"> ThemeRoller </a> creado también se puede definir estilos de recuadro en consecuencia sobre herramientas. </ P>
<P> cuadro de información de herramientas también se puede utilizar para formar elementos para mostrar en cada región alguna información adicional. </ P>
<P> <label for = "edad"> su edad: </ label> <input id = "edad" title = ". La edad es utilizado para fines estadísticos"> </ p>
<P> pase sobre el área correspondiente para ver una caja de herramientas. </ P>
 
 
</ Body>
</ Html>

reproductor de vídeo

Un reproductor de vídeo virtual con botón / share / Estadística, cada botón con la caja de estilos personalizados sobre herramientas.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> cuadro de información sobre herramientas jQuery UI (información sobre herramientas) - Reproductor de vídeo </ 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 {
    Anchura: 500px;
    altura: 300px;
    frontera: 2px ranura de color gris;
    fondo: rgb (200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  .ui-tooltip {
    frontera: 1px sólido blanco;
    fondo: RGBA (20, 20, 20, 1);
    color: blanco;
  }
  .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 () {
    notificar a la función (entrada) {
      msg var = "Seleccionado" + $ .trim (input.data ( "información sobre herramientas-title") || input.text ());
      $ ( "<Div>")
        .appendTo (document.body)
        .text (msg)
        .addClass ( "notificación-ui ui estado predeterminado-esquina inferior")
        .position ({
          mi: "centro superior",
          en: "la parte superior central",
          de: ventana
        })
        .show ({
          efecto: "a ciegas"
        })
        .delay (1000)
        .hide ({
          efecto: "a ciegas",
          duración: "lento"
        }, Function () {
          $ (Este) .Remove ();
        });
    }
 
    $ ( "Botón") .Cada (function () {
      botón var = $ (this) .button ({
        Iconos: {
          primaria: $ (this) .data ( "icono")
        },
        Texto: !! $ (this) .attr ( "título")
      });
      button.click (function () {
        notificar (botón);
      });
    });
    $ ( ".set") .buttonset ({
      artículos: "botón"
    });
 
    $ (Document) .tooltip ({
      Posición: {
        mi: "centro superior",
        en: "inferior central + 5",
      },
      espectáculo: {
        duración: "rápida"
      },
      ocultar: {
        efecto: "ocultar"
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "jugador"> Aquí está el video (HTML5?) </ Div>
<Div class = "Herramientas">
  <Span class = "set">
    <Botón-icono de datos = "ui-icon-circle-arrow-n" title = "Me gusta este video"> como </ botón>
    <Botón de datos-icon = "ui-icon-circle-arrow-s"> No me gusta este vídeo </ botón>
  </ Span>
  <Div class = "set">
    <Botón-icono de datos = "ui-icon-circle-plus" title = "Añadir a la lista de reproducción"> Añadir a </ botón>
    <Clase Button = "menú"-icono de datos = "ui-icon-triángulo-1-s"> Añadir a Favoritos </ botón>
  </ Div>
  Botón <title = "Compartir este video"> Compartir </ botón>
  <Botón-icono de datos = "ui-icon-alerta"> marcado como </ botón> inapropiado
</ Div>
 
 
</ Body>
</ Html>

Anterior: ejemplo jQuery UI - pestañas (Tabs)

Siguiente: ejemplo jQuery UI - efectos especiales (efecto)

jQuery UI curso

jQuery UI tema

jQuery UI Biblioteca de componentes

jQuery UI Manual de referencia

jQuery UI Ejemplos