Verktøy Tips for en jQuery Verktøykasse
jQuery Javascript rammeverk tillater en webdesigner til å bruke kraftigere, strømlinjeformet Javascript-kode for å levere dynamisk innhold til sin nettstedets brukere. JQuery verktøy brukergrensesnitt bibliotek gir ekstra funksjonalitet til jQuery rammeverk. JQuery verktøy brukergrensesnitt biblioteket kan Webdesigner å integrere attraktive popup-vinduer kjent som verktøytips innenfor sin nettside. Et verktøytips vises over en link eller et bilde og gir nettstedets besøkende med informasjon, eller et tips, om link eller bilde.
Ringe Tooltip - Javascript
JQuery Tools UI kan lastes ned fra Flowplayer.org nettstedet. Denne lette bibliotek bruker bare 4k diskplass. Som et alternativ, kan en webdesigner også ringe og legge inn koden fra cdn nettstedet. Aktivering tipset er så enkelt som å ringe jQuery verktøytips metode. Tenk på dette eksemplet. JQuery verktøy brukergrensesnittet fra cdn nettsiden har vært forankret og jQuery tooltip metoden har blitt kalt for alle bildeelementer som har en tittel og er nestet inne i en div med en id prøve.
<Script src = "& lt; / script" rel = "nofollow" target = "_blank"> http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"> & lt; / script >
<Script>
$ ( "# Prøve img [title]") tooltip ().;
</ Script>
Styling Tooltip - CSS
Tipset kan bli stylet med en CSS-klasse akkurat som alle andre element. For eksempel, skaper dette eksempelkode en ny CSS-regel som fastsetter høyden og bredden på verktøytipset 70 piksler x 140 piksler. Regelen setter også den første visningsverdien av verktøytipset stykke og skriftstørrelsen for tekst inne i verktøyet tips på 12 piksler. Fargen på teksten innsiden av verktøytips skulle være svart.
.tooltip {
display: none;
font-size: 12px;
høyde: 70 piksler;
width: 140 px;
padding: 25px;
color: # 000;
}
Aktivering av Verktøytips - HTML
HTML-innholdet må være tilordnet en div med identiteten som ble etablert av jQuery kode. I dette tilfellet bør HTML-elementer tildeles en div med id av prøven. Dette eksempelkode plass en HTML bildeelement inne i prøven div.
<Div id = "sample">
<Img src = "yourPicture.jpg" />
</ Div>
Plassere innhold Innsiden av Tooltip
Fyller innholdet i bildet elementets tootip er så enkelt som å gi den en tittel er tildelt HTML-bildekoden. I følgende eksempel teksten "Dette er verktøytipset" har vært plass inne i bildet tittel tag. Denne teksten vises i tooltip når en besøkende svever over bildet.
<Div id = "sample">
<Img src = "yourPicture.jpg" title = "Dette er verktøytips" />
</ Div>
En komplett eksempel
Det som følger er en komplett eksempel på et nettsted som gjør bruk av verktøytipset brukergrensesnitt. Dette eksemplet kuraterer forrige eksempel koder og legger de medfølgende nødvendig koder.
<Head>
<Title> jQuery Tooltip Eksempel Bruke jQuery Tools UI </ title>
<Script src = "& lt; / script" rel = "nofollow" target = "_blank"> http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"> & lt; / script >
<Style>
.tooltip {
display: none;
font-size: 12px;
høyde: 70 piksler;
width: 140 px;
padding: 25px;
color: # 000;
}
</ Style>
</ Head>
<Body>
<Div id = "sample">
<Img src = "yourPicture.jpg" title = "Dette er verktøytips" />
</ Div>
<Script>
$ ( "# Demo img [title]") tooltip ().;
</ Script>
</ Body>