Przykładem jQuery UI - okno podpowiedzi (Tooltip)
Konfigurowalny, themable okno podpowiedzi, wymienić okna podpowiedzi natywną.
Aby uzyskać więcej informacji na temat członka podpowiedzi można znaleźć w dokumentacji API element oprawki podpowiedź (etykietka Widget) .
Domyślną funkcją
Najedź na link, lub użyj klawisza TAB, aby przejść przez skupienie się na każdym elemencie.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Skrzynka jQuery UI podpowiedzi (Tooltip) - domyślna Funkcja </ 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;
Szerokość: 5em;
}
</ Style>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> podpowiedzi </a> może być związany z dowolnym elementem. Po najechaniu na element, tytuł nieruchomość będzie wyświetlany w małym oknie obok elementu, jako natywna jako pole podpowiedzi. </ P>
<P> Jednak, ponieważ nie jest to okno podpowiedzi rodzimych więc może być zdefiniowane style. Theme by href="http://themeroller.com" <a title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> tworzone mogą być również zdefiniowane style skrzynki odpowiednio podpowiedzi. </ P>
<P> pole etykietka może być również stosowane do tworzenia elementów do wyświetlenia w każdym regionie dodatkowych informacji. </ P>
<P> <label for = "wiek"> wiek: </ label> <input id = "wiek" title = ". Wiek jest wykorzystywany jedynie dla statystycznego"> </ p>
<P> Najedź kursorem na odpowiedni obszar, aby wyświetlić okno podpowiedzi. </ P>
</ Body>
</ Html>
Style niestandardowe
Najedź na link, lub użyj klawisza TAB, aby przejść przez skupienie się na każdym elemencie.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> okno podpowiedzi jQuery UI (etykietka) - styl niestandardowy </ 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 ({
Stanowisko: {
moim: "center bottom-20"
pod adresem: "center top"
przy użyciu: funkcji (stanowiska, opinie) {
$ (This) .css (pozycja);
$ ( "<Div>")
.addClass ( "strzałki")
.addClass (feedback.vertical)
.addClass (feedback.horizontal)
.appendTo (this);
}
}
});
});
</ Script>
<Style>
.ui-podpowiedź, .arrow: after {
background: black;
border: 2px świeci na biało;
}
.ui-etykietka {
padding: 10px 20px;
kolor: biały;
border-radius: 20px;
font: bold 14px "Neue Helvetica", bezszeryfowa;
text-transform: wielkimi literami;
box-shadow: 0 0 7px czarno;
}
.arrow {
szerokość: 70 pikseli;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
Dno: -16px;
}
.arrow.top {
top: -16px;
Dno: auto;
}
.arrow.left {
left: 20%;
}
.arrow: after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9PX -9px czarno;
-webkit-transform: rotate (45deg);
-moz-transform: rotate (45deg);
-ms-transform: rotate (45deg);
-o-transform: rotate (45deg);
tranform: rotate (45deg);
}
.arrow.top: after {
Dno: -20px;
top: auto;
}
</ Style>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> podpowiedzi </a> może być związany z dowolnym elementem. Po najechaniu na element, tytuł nieruchomość będzie wyświetlany w małym oknie obok elementu, jako natywna jako pole podpowiedzi. </ P>
<P> Jednak, ponieważ nie jest to okno podpowiedzi rodzimych więc może być zdefiniowane style. Theme by href="http://themeroller.com" <a title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> tworzone mogą być również zdefiniowane style skrzynki odpowiednio podpowiedzi. </ P>
<P> pole etykietka może być również stosowane do tworzenia elementów do wyświetlenia w każdym regionie dodatkowych informacji. </ P>
<P> <label for = "wiek"> wiek: </ label> <input id = "wiek" title = ". Wiek jest wykorzystywany jedynie dla statystycznego"> </ p>
<P> Najedź kursorem na odpowiedni obszar, aby wyświetlić okno podpowiedzi. </ P>
</ Body>
</ Html>
Animacja niestandardowa
Ten przykład pokazuje, jak używać pokazywać i ukrywać opcji, aby dostosować animację, można również skorzystać z otwartą imprezę, aby dostosować animację.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> okno podpowiedzi jQuery UI (etykietka) - Animacja niestandardowa </ 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 ({
Pokaż: {
Efekt: "slideDown"
Opóźnienie: 250
}
});
$ ( "# Hide-option") .tooltip ({
ukrywać: {
Efekt: "wybuchnąć"
Opóźnienie: 250
}
});
$ ( "# Open-event") .tooltip ({
Pokaż: null
Stanowisko: {
moim: "lewy górny"
pod adresem: "lewy dolny"
}
open: function (event, ui) {
ui.tooltip.animate ({top: ui.tooltip.position () top + 10.}, "szybko");
}
});
});
</ Script>
</ Head>
<Body>
<P> Istnieje wiele sposobów dostosowywania animacji pole podpowiedzi. </ P>
<P> Można użyć <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> pokazu </a> i <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> ukryć </a> opcję. </ P>
<P> Można również użyć <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> otwarty </a> zdarzeń. </ P>
</ Body>
</ Html>
Materiały modyfikowane
Wykazać, jak dostosować elementy i opcje treści łączyć różne pola podpowiedzi delegata zdarzenia do jednej instancji.
Może trzeba mapować podpowiedzi interakcji pudełko, które jest przyszła wersja funkcji do zrealizowania.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Skrzynka jQuery UI podpowiedzi (Tooltip) - niestandardowa zawartość </ 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: 1 em 0;
}
{.map
width: 350px;
height: 350px;
}
.ui-etykietka {
max-width: 350px;
}
</ Style>
<Script>
$ (Function () {
$ (Document) .tooltip ({
przedmiotów "img [Dane Geo], [Tytuł]",
Zawartość: function () {
Element var = $ (this);
if (element.is ( "[data-geo]")) {
var text = element.text ();
Zwrot "<img class =" mapy "alt =" "+ tekst +
" 'Src =' http: //maps.google.com/maps/api/staticmap?" +
"Zoom = 11 & size = 350x350 & maptype = terenowe i czujnik = false & center =" +
tekst + " '>";
}
if (element.is ( "[tytuł]")) {
powrót element.attr ( "tytuł");
}
if (element.is ( "img")) {
powrót element.attr ( "alt");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "UI-widżet photo">
<Div class = "widget-ui ui-header-corner-all">
<H2> św Szczepana (Katedra św Szczepana) </ h2>
<H3> <a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo=""> Wiedeń, Austria (Wiedeń, 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 = "Świętego Szczepana (St Stephen'S Cathedral)" class = "ui-corner-all">
</a>
</ Div>
<Div class = "UI-widżet photo">
<Div class = "widget-ui ui-header-corner-all">
<H2> Tower Bridge (Tower Bridge) </ h2>
<H3> <a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo=""> London (Londyn, Anglia) </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 / wieża-bridge.jpg" alt = "Tower Bridge (Tower Bridge)" class = "ui-corner-all">
</a>
</ Div>
<P> Wszystkie zdjęcia z <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikipedii </a> i są własnością <a href = "http://creativecommons.org/~~HEAD=pobj licencje / by-sa / 3.0 / deed.en "title =" Creative Commons Attribution-ShareAlike 3.0 "> CC bY-SA 3.0 </a> mocy praw autorskich. </ P>
</ Body>
</ Html>
forma
Użyj przycisku poniżej, aby wyświetlić tekst pomocy, lub po prostu pozwól najedź myszką na polu tekstowym lub mieć pole wejściowe ma fokus, można wyświetlić tekst pomocy odpowiedniego pola wejściowego.
Definiowanie stałej szerokości w CSS, dzięki czemu jednocześnie wyświetla cały tekst pomocy wygląda bardziej spójne.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Skrzynka jQuery UI podpowiedzi (Tooltip) - Formularze </ 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;
}
fieldset div {
margin-bottom: 2em;
}
fieldset .help {
display: inline-block;
}
.ui-etykietka {
width: 210px;
}
</ Style>
<Script>
$ (Function () {
var podpowiedzi = $ ( "[nazwa]") .tooltip ();
$ ( "<Button>")
.text ( "Show help")
.button ()
.Kliknij (function () {
tooltips.tooltip ( "open");
})
.insertAfter ( "Formularz");
});
</ Script>
</ Head>
<Body>
<Form>
<Fieldset>
<Div>
<Label for = "FirstName"> Nazwa </ label>
<Wejście id = "Imię" name = "Imię" title = "Proszę podać swoje imię.">
</ Div>
<Div>
<Label for = "Nazwisko"> Nazwisko </ label>
<Wejście id = "Nazwisko" name = "Nazwisko" title = "Proszę podać swoje nazwisko.">
</ Div>
<Div>
<Label for = "adres"> Adres </ label>
<Id = "adres" Input name = "adres" title = "Twój adresu domowego lub służbowego.">
</ Div>
</ Fieldset>
</ Form>
</ Body>
</ Html>
Śledzenie Mouse
W tym oknie podpowiedzi instancji jest umieszczony w stosunku do myszy, gdy wskaźnik myszy przesuwa się nad elementem będzie podążać za ruchem myszki.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Skrzynka jQuery UI podpowiedzi (Tooltip) - Śledzenie myszy </ 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;
Szerokość: 5em;
}
</ Style>
<Script>
$ (Function () {
$ (Document) .tooltip ({
utwór: true
});
});
</ Script>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> podpowiedzi </a> może być związany z dowolnym elementem. Po najechaniu na element, tytuł nieruchomość będzie wyświetlany w małym oknie obok elementu, jako natywna jako pole podpowiedzi. </ P>
<P> Jednak, ponieważ nie jest to okno podpowiedzi rodzimych więc może być zdefiniowane style. Theme by href="http://themeroller.com" <a title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> tworzone mogą być również zdefiniowane style skrzynki odpowiednio podpowiedzi. </ P>
<P> pole etykietka może być również stosowane do tworzenia elementów do wyświetlenia w każdym regionie dodatkowych informacji. </ P>
<P> <label for = "wiek"> wiek: </ label> <input id = "wiek" title = ". Wiek jest wykorzystywany jedynie dla statystycznego"> </ p>
<P> Najedź kursorem na odpowiedni obszar, aby wyświetlić okno podpowiedzi. </ P>
</ Body>
</ Html>
odtwarzacz wideo
Wirtualna Odtwarzacz wideo z przyciskiem jak / share / Statistics, każdy przycisk z pola niestandardowe style podpowiedzi.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> okno podpowiedzi jQuery UI (etykietka) - Odtwarzacz wideo </ 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 rowek szarości;
background: rgb (200, 200, 200);
text-align: center;
line-height: 300px;
}
.ui-etykietka {
border: 1px solid white;
background: rgba (20, 20, 20, 1);
kolor: biały;
}
.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 () {
Funkcja zawiadomić (wejście) {
var msg = "Selected" + $ .trim (input.data ( "tooltip-title") || input.text ());
$ ( "<Div>")
.appendTo (document.body)
.text (MSG)
.addClass ( "Zawiadomienie ui-state-default-ui-dolny róg")
.position ({
my: "center top",
pod adresem: "center top"
od: okna
})
.pokaż ({
Efekt: "w ciemno"
})
.delay (1000)
.hide ({
Efekt: "w ciemno",
czas trwania: "slow"
}, Function () {
$ (This) .Wykręcić ();
});
}
$ ( "Button") .each (function () {
Przycisk var = $ (this) .button ({
Ikony: {
primary: $ (this) .data ( "ikona")
}
Tekst: !! $ (this) .attr ( "title")
});
button.click (function () {
powiadomić (przycisk);
});
});
$ ( ".set") .buttonset ({
przedmiotów na przycisk ""
});
$ (Document) .tooltip ({
Stanowisko: {
my: "center top",
pod adresem: "środkowego dołu + 5",
}
Pokaż: {
czas trwania: "szybko"
}
ukrywać: {
Efekt: "ukryć"
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "graczem"> Oto video (HTML5?) </ Div>
<Div class = "Narzędzia">
<Span class = "set">
<Przycisk danych ikona = "ui-icon-circle-strzałka-n" title = "Lubię ten film"> jak </ button>
<Przycisk danych ikona = "ui-icon-circle-strzałka-s"> Nie podoba mi się ten film </ button>
</ Span>
<Div class = "set">
<Przycisk danych ikona = "ui-icon-circle-plus" title = "Dodaj do listy odtwarzania"> Dodaj do </ button>
<Class = Przycisk "menu" Dane-icon = "ui-icon-trójkąt-1-s"> Dodaj do ulubionych </ button>
</ Div>
<Title = Przycisk "Udostępnij ten film"> Udostępnij </ button>
<Przycisk danych ikona = "ui-icon-alert"> oznaczony jako nieodpowiednie przycisku </>
</ Div>
</ Body>
</ Html>