jQuery UI exemple - info-bulle (Tooltip)
Personnalisable, boîte de infobulle themable, remplacer la boîte de infobulle native.
Pour plus de détails sur l'élément de infobulle, consultez la documentation de l' API élément de boîte infobulle (toolTip le Widget) .
La fonction par défaut
Passez sur le lien, ou utiliser la touche de tabulation pour faire défiler la mise au point sur chaque élément.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> case jQuery UI infobulle (Tooltip) - Fonction Par défaut </ 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;
largeur: 5em;
}
</ Style>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> infobulles </a> il peut être lié à tout élément. Lorsque vous survolez l'élément, la propriété de titre sera affiché dans une petite boîte à côté de l'élément, comme natif comme une boîte de pointe de l'outil. </ P>
<P> Cependant, parce qu'il est pas une boîte de infobulle native de sorte qu'il peut être défini styles. Thème par <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> créé peut également être défini styles de la boîte en conséquence infobulles. </ P>
<P> info-bulle peut également être utilisé pour former des éléments à afficher dans chaque région des informations supplémentaires. </ P>
<P> <label for = "age"> votre âge: </ label> <input id = "age" title = ". L'âge est utilisé uniquement à des fins statistiques"> </ p>
<P> survolez la zone correspondante pour afficher une boîte de pointe de l'outil. </ P>
</ Body>
</ Html>
Custom Style
Passez sur le lien, ou utiliser la touche de tabulation pour faire défiler la mise au point sur chaque élément.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> info-bulle jQuery UI (Tooltip) - Custom Style </ 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 ({
Position: {
ma: "en bas au centre-20",
à: "centre supérieur",
en utilisant: fonction (position, rétroaction) {
$ (Ce) Css (position);
$ ( "<Div>")
.addClass ( "flèche")
.addClass (feedback.vertical)
.addClass (feedback.horizontal)
.appendTo (this);
}
}
});
});
</ Script>
<Style>
.ui-infobulle, .arrow: après {
fond: noir;
border: 2px solide blanc;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
police: 14px bold "Helvetica Neue", sans-serif;
text-transform: uppercase;
box-shadow: 0 0 7px noir;
}
.arrow {
largeur: 70px;
hauteur: 16px;
overflow: hidden;
position: absolute;
gauche: 50%;
margin-left: -35px;
bas: -16px;
}
.arrow.top {
top: -16px;
en bas: auto;
}
.arrow.left {
gauche: 20%;
}
.arrow: après {
contenu: "";
position: absolute;
gauche: 20px;
top: -20px;
largeur: 25px;
hauteur: 25px;
box-shadow: 6px 5px 9px -9px noir;
-webkit-transform: rotate (45deg);
-moz-transform: rotate (45deg);
-ms-transform: tourner (45deg);
-o-transform: rotate (45deg);
Tranform: rotate (45deg);
}
.arrow.top: après {
bas: -20px;
top: auto;
}
</ Style>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> infobulles </a> il peut être lié à tout élément. Lorsque vous survolez l'élément, la propriété de titre sera affiché dans une petite boîte à côté de l'élément, comme natif comme une boîte de pointe de l'outil. </ P>
<P> Cependant, parce qu'il est pas une boîte de infobulle native de sorte qu'il peut être défini styles. Thème par <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> créé peut également être défini styles de la boîte en conséquence infobulles. </ P>
<P> info-bulle peut également être utilisé pour former des éléments à afficher dans chaque région des informations supplémentaires. </ P>
<P> <label for = "age"> votre âge: </ label> <input id = "age" title = ". L'âge est utilisé uniquement à des fins statistiques"> </ p>
<P> survolez la zone correspondante pour afficher une boîte de pointe de l'outil. </ P>
</ Body>
</ Html>
animation personnalisée
Cet exemple montre comment utiliser les options de afficher et masquer pour personnaliser l'animation, vous pouvez également utiliser l'événement ouvert à personnaliser l'animation.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> info-bulle jQuery UI (Tooltip) - Animation personnalisée </ 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-option") .tooltip ({
show: {
effet: "slideDown",
delay: 250
}
});
$ ( "# Hide-option") .tooltip ({
cacher: {
effet: «exploser»,
delay: 250
}
});
$ ( "# Ouvrir-événement") .tooltip ({
show: null,
Position: {
ma: "en haut à gauche»,
à: "en bas à gauche"
},
ouvert: function (event, ui) {
ui.tooltip.animate ({top: ui.tooltip.position () top + 10.}, "rapide");
}
});
});
</ Script>
</ Head>
<Body>
<P> Il y a un certain nombre de façons de personnaliser infobulle boîte animation. </ P>
<P> Vous pouvez utiliser <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> show </a> <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> cacher </a> option. </ P>
<P> Vous pouvez également utiliser <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> </a> ouverte événement. </ P>
</ Body>
</ Html>
Contenu personnalisé
Démontrer comment personnaliser les éléments et options de contenu pour combiner différentes info-bulle événement délégué à une seule instance.
Vous devrez peut-être à la carte boîte interaction infobulle, qui est une version future de la fonction à réaliser.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> case jQuery UI infobulle (Tooltip) - Contenu personnalisé </ 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-tête {
margin: 1em 0;
}
.map {
largeur: 350px;
hauteur: 350px;
}
.ui-tooltip {
max-width: 350px;
}
</ Style>
<Script>
$ (Function () {
$ (Document) .tooltip ({
articles: "img, [données géo], [titre]",
contenu: function () {
var element = $ (this);
if (element.is ( "[data-geo]")) {
var text = element.text ();
retour "<img class = 'map' alt = '" + texte +
" 'Src =' http: //maps.google.com/maps/api/staticmap?" +
"Zoom = 11 & size = 350x350 & MapType = terrain et capteur = false & centre =" +
texte + " '>";
}
if (element.is ( "[titre]")) {
retour element.attr ( "title");
}
if (element.is ( "img")) {
retour element.attr ( "alt");
}
}
});
});
</ Script>
</ Head>
<Body>
<Class Div = "ui-widget photo">
<Class Div = "ui-widget-tête ui-coin-all">
<H2> Cathédrale Saint-Étienne (la cathédrale Saint-Étienne) </ h2>
<H3> <a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo=""> Vienne, en Autriche (Vienne, Autriche) </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 = "cathédrale Saint-Étienne (St. Stephen & apos; s Cathedral)" class = "ui-coin-all">
</a>
</ Div>
<Class Div = "ui-widget photo">
<Class Div = "ui-widget-tête ui-coin-all">
<H2> Tower Bridge (Tower Bridge) </ h2>
<H3> <a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo=""> Londres (Londres, Angleterre) </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 / tour-bridge.jpg" alt = "Tower Bridge (Tower Bridge)" class = "ui-coin-all">
</a>
</ Div>
<P> Toutes les photos de <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a>, et sont la propriété de <a href = "http://creativecommons.org/ licences / / 3.0 / deed.en "title =" Creative Commons attribution-ShareAlike 3.0 "> CC by-sa BY-SA 3.0 </a> sous détenteurs de droits d'auteur. </ P>
</ Body>
</ Html>
forme
Utilisez le bouton ci-dessous pour afficher le texte d'aide, ou tout simplement laisser votre vol stationnaire de la souris sur la zone de saisie ou ont la zone de saisie a le focus, vous pouvez afficher le texte d'aide zone de saisie correspondante.
Définir une largeur fixe en CSS, donc qui affiche simultanément tout le texte d'aide semble plus cohérente.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> case jQuery UI infobulle (Tooltip) - Formulaires </ 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; largeur: 5em;
}
fieldset div {
margin-bottom: 2em;
}
.help fieldset {
display: inline-block;
}
.ui-tooltip {
largeur: 210px;
}
</ Style>
<Script>
$ (Function () {
var infobulles = $ ( "[titre]") .tooltip ();
$ ( "<Button>")
.text ( "Show help")
.button ()
.cliquez (function () {
tooltips.tooltip ( «ouvert»);
})
.insertAfter ( «forme»);
});
</ Script>
</ Head>
<Body>
<Form>
<Fieldset>
<Div>
<Label for = "prenom"> nom </ label>
<Entrée id = "prenom" name = title "firstname" = "S'il vous plaît indiquer votre prénom.">
</ Div>
<Div>
<Label for = "nom"> Nom </ label>
<Entrée id = nom "nom" = title "lastname" = "S'il vous plaît fournir votre nom.">
</ Div>
<Div>
<Label for = "adresse"> adresse </ label>
<Entrée id = "adresse" name = "adresse" title = "votre adresse personnelle ou professionnelle.">
</ Div>
</ Fieldset>
</ Form>
</ Body>
</ Html>
Suivi de la souris
Dans cette boîte de infobulle d'instance est positionné par rapport à la souris, lorsque les mouvements de la souris sur l'élément, il va suivre le mouvement de la souris.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> case jQuery UI infobulle (Tooltip) - Suivi de la souris </ 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;
largeur: 5em;
}
</ Style>
<Script>
$ (Function () {
$ (Document) .tooltip ({
piste: true
});
});
</ Script>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> infobulles </a> il peut être lié à tout élément. Lorsque vous survolez l'élément, la propriété de titre sera affiché dans une petite boîte à côté de l'élément, comme natif comme une boîte de pointe de l'outil. </ P>
<P> Cependant, parce qu'il est pas une boîte de infobulle native de sorte qu'il peut être défini styles. Thème par <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> créé peut également être défini styles de la boîte en conséquence infobulles. </ P>
<P> info-bulle peut également être utilisé pour former des éléments à afficher dans chaque région des informations supplémentaires. </ P>
<P> <label for = "age"> votre âge: </ label> <input id = "age" title = ". L'âge est utilisé uniquement à des fins statistiques"> </ p>
<P> survolez la zone correspondante pour afficher une boîte de pointe de l'outil. </ P>
</ Body>
</ Html>
video Player
Un lecteur vidéo virtuel avec comme / share bouton / Statistiques, chaque bouton avec la boîte de styles personnalisés infobulle.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> info-bulle jQuery UI (Tooltip) - Lecteur vidé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">
<Style>
.player {
largeur: 500px;
hauteur: 300px;
border: 2px gorge grise;
fond: rgb (200, 200, 200);
text-align: center;
line-height: 300px;
}
.ui-tooltip {
border: 1px solide blanc;
fond: rgba (20, 20, 20, 1);
color: white;
}
.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 () {
fonction notify (entrée) {
var msg = "Selected" .trim + $ (input.data ( «tooltip-titre") || input.text ());
$ ( "<Div>")
.appendTo (document.body)
.text (msg)
.addClass ( "notification ui-état par défaut ui-coin-bas»)
.Position ({
ma: "top center",
à: "centre supérieur",
de: fenêtre
})
.montrer ({
effet: "aveugle"
})
.delay (1000)
.hide ({
effet: «aveugle»,
durée: "lente"
}, Function () {
$ (Ce) .remove ();
});
}
$ ( "Button") .each (function () {
bouton var = $ (this) .button ({
icônes: {
primaire: $ (this) .data ( «icône»)
},
texte: !! $ (this) .attr ( "title")
});
button.click (function () {
notifier (bouton);
});
});
$ ( ".set") .buttonset ({
produits "bouton"
});
$ (Document) .tooltip ({
Position: {
ma: "top center",
à: "bottom centre + 5",
},
show: {
durée: "rapide"
},
cacher: {
effet: "cacher"
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "joueur"> Voici la vidéo (HTML5?) </ Div>
<Class = "Div outils">
<Span class = "set">
Touche <data-icon = "ui-icon-circle-arrow-n" title = "I like this video"> comme </ button>
Touche <data-icon = "ui-icon-circle-arrow-s"> Je n'aime pas cette vidéo </ button>
</ Span>
<Class Div = "set">
Touche <data-icon = "ui-icon-cercle-plus" title = "Ajouter à la playlist"> Ajouter à </ button>
<Classe Button = "menu" data-icon = "ui-icon-triangle-1-s"> Ajouter aux Favoris </ button>
</ Div>
<Title Button = "Partager cette vidéo"> Partager </ button>
Touche <data-icon = "ui-icon-alerte"> marqué comme inapproprié </ button>
</ Div>
</ Body>
</ Html>