Tooltip grunnleggende.

Tooltip grunnleggende.

Enkel eller rik.

En enkel samtale som $ («img [title]»). Tooltip (); vil aktivere verktoytips ved a utnytte elementets tittelattributt. Hvis du vil ha komplekse verktoytips med bilder, tabeller, skjemaer og koblinger som er mulige ved a plassere verktoytipselementet manuelt ved siden av avtrekkselementet.

Konfigurer design, timing og posisjonering.

Bruk CSS til a lage avrundede grenser, piler, gradienter eller skygger. Stor eller liten, hoy eller lav. Bruk konfigurasjonen til a tilpasse pre- og postforsinkelser og posisjonering til dine personlige behov.

Fading, glidende, dynamisk.

Tooltip leveres med to innebygde effekter: veksle og fade og en separat effekt, lysbilde, og du kan enkelt bygge dine egne effekter. Det dynamiske pluginet vil dynamisk endre verktoytipsets posisjon slik at det alltid forblir i visningsporten.

Filstorrelse: 1,10 Kb.

Dette verktoyet har alle funksjonene og konfigurasjonsalternativene du muligens trenger, for eksempel effekt og et plugin-rammeverk, scripting API og en hendelsesmodell. En mindre kodebase er lettere a kontrollere og resulterer i snappieradferd. Uten gzipping er storrelsen 3,5 Kb.

Her er den enkleste mulige verktoytipsinitialisering:

Du velger ett eller flere elementer med en jQuery-velger som vil utlose verktoytipset (e). Utloserens tittelattributt vil bli brukt som verktoytipsinnhold. Det faktiske verktoytipselementet genereres automatisk nar det blir vist for forste gang. Se pa det minimale oppsettet for a forsta det grunnleggende.

Manuelle verktoytips.

Manuelle verktoytips er HTML-elementer (vanligvis DIV-er) som er plassert ved siden av triggerelementet, og de kan inneholde HTML som bilder, lenker og tabeller. Initialiseringen er identisk, men na antar vi at triggerelementet ikke har et tittelattributt.

Etter dette blir elementet ved siden av avtrekkeren brukt som verktoylipp.

Verktoytip-konfigurasjon.

Tooltip har mange konfigurasjonsalternativer for a justere oppforselen. Her er et eksempel pa konfigurasjon med to alternativer:

Vi tror at den beste maten a l re er gjennom demoer. Folgende demoer er fullt dokumentert, og en frittstaende side er gitt for a fa verktoytips som fungerer pa nettstedet ditt. Det er veldig viktig a studere den forste demonstrasjonen «Grunnleggende om bruk av verktoytipset», fordi det l rer deg grunnleggende om bruk av biblioteket.

verktoytips grafikk.

Du kan bruke var grafikk som grunnlag for ditt design. Du kan fritt endre designen slik det passer deg. Klikk pa bildet til hoyre for a laste ned en zip-fil. For du bruker grafikken, bor du lese brukerhandboken om hvordan grafikk kan brukes nar du utformer utseendet pa verktoyene.

Her er noen eksempler pa hva som er inkludert i zip-filen:

Konfigurasjon.

Du kan fortsatt hente / endre tittelverdien ved a ringe til jQuery’s data («title») metode for utloseren.

veksle . En enkel show / hide effekt. Dette er standard.

falme. En enkel fade i / fade out effekt.

Det er ogsa en lysbildeffekt som ikke er inkludert i selve verktoyet. Du kan ogsa bygge dine egne effekter.

Du kan lese mer om dette emnet i kapitlet om hendelsestyring.

Tooltip posisjonering.

Verktoytipsposisjonen er spesifisert med to forskjellige konfigurasjonsegenskaper: posisjon og forskyvning. Posisjonsegenskapen spesifiserer posisjonen i forhold til utloserelementet. For eksempel vil en verdi av «bunnsenter» plassere verktoytipset pa den nedre kanten av avtrekkeren, sentrert horisontalt. Folgende bilde illustrerer «sporene» som du kan bruke:

Offset-egenskapen finjusterer verktoytipsposisjonen spesifisert med posisjonegenskapen. For eksempel beveger verdien [10, -20] verktoytipsposisjonen 10px ned og 20px til venstre. Den forste verdien modifiserer den vertikale posisjoneringen fra toppteksten til verktoylippen, og den andre verdien endrer den horisontale posisjoneringen fra venstre kant av verktoylippen. Positive verdier beveger verktoytipset nedover og til hoyre, mens negative verdier beveger verktoytipset oppover og til venstre.

Pass pa at du har lest om hendelser i jQuery-verktoy. Alle hendelseslyttere mottar hendelsesobjektet som det forste argumentet.

Her er et eksempel pa en onShow tilbakeringingsfunksjon som utloses utloseren nar verktoytipset vises:

Hendelsehandtering.

jQuery Tooltip lar deg fullstendig kontrollere nar verktoytipset vil bli vist eller skjult. Du kan angi forskjellige hendelser for ulike typer elementer. Du kan kontrollere denne oppforselen med hendelses konfigurasjonsvariabelen som har folgende verdier som standard:

Dette spesifiserer apnings- og lukkearrangementer for ulike typer utloserelementer. def aksepterer en verdi mouseover, mouseout som betyr at verktoytipet som standard vises nar musen beveger seg over utloseren og skjuler nar musen beveger seg vekk fra utloseren. For inngangselementer (tekst, tekstomrade, passord) vises verktoytipset nar inngangen er fokusert og gjemmer nar fokus flyttes ut av feltet.

widget er en catchall type som betyr velg, kryssboks, radio og knappelementer. For dem er verktoytipset vist pa bade fokus- og mouseover-hendelser og skjult pa bade uskarphet og mouseout-hendelser. Dette er bare en bekvemmelighet fordi disse elementene vanligvis trenger noen form for verktoytipsadferd.

Du kan ogsa tilpasse hendelsene for verktoytipselementet. Som standard blir verktoytipset synlig nar musen er flyttet over den, og den er skjult pa mouseleave. Hvis du ikke vil lukke verktoytipset pa mouseleave, kan du bare angi: tooltip: «mouseenter». Dette gir deg muligheten til a lukke verktoytipset programmatisk. Dette har blitt gjort pa innlogging / palogging boksene i hovednavigasjonslinjen pa denne nettsiden.

Hvis du vil tilpasse disse hendelsene, kan du folge eksemplet nedenfor:

Dette vil tilsidesette hendelsene for hvert innspillingselement. Vi har ogsa definert tilpassede hendelser for avkrysningsfeltet. Verktoyet sjekker utloserelementets typeattributt for a lete opp de aktuelle hendelsene fra konfigurasjonen.

Formatet av verdien er: showEvent11 showEvent2. showEventN, closeEvent1 closeEvent2. closeEventN. Du leverer forst alle viser hendelser skilt med mellomrom etterfulgt av et komma (,) etterfulgt av alle tette hendelser skilt med mellomrom. En liste over tilgjengelige hendelser finner du her. Se pa «Event Helpers» -delen for mer informasjon.

Ingenting hindrer deg fra a legge til spesielle typer for elementene dine bare ved a definere en typeattributt. Her bruker vi en datatype som ble lagt til i HTML5-spesifikasjonen, og det tilsvarende elementet pa siden er definert slik:

Her er en demonstrasjon som viser de ulike hendelsestykkene i aksjon.

Scripting API.

Forst ma du kontrollere at du har kjent deg med jQuery Tools-skripting.

Her er en liste over alle API-metoder:

Innebygd effekt: fade.

Den innebygde effekten «fade» har sitt eget sett med konfigurasjonsalternativer som folger:

Gjor tilpassede effekter.

Hvis du vil lage tilpassede effekter, bruker du $ .tools.tooltip.addEffect-metoden. Denne metoden er «statisk», noe som betyr at du ikke trenger a ha verktoytip-APIen (eller forekomsten) allerede lastet inn. Du kan legge til effekter for noen verktoytips er konstruert.

Denne metoden aksepterer tre argumenter. Det forste argumentet er effektnavnet, det andre argumentet er funksjonen som utforer den nodvendige funksjonaliteten for a vise verktoytipset, og det tredje argumentet er en funksjon som skjuler verktoytipset. Du kan bruke denne metoden til a endre eksisterende effekter eller legge til nye. Her er et eksempel:

Som du kan se inne i funksjonene, er denne variabelen en peker til skripting API. Som gir deg tilgang til ulike deler av verktoytipselementene. Funksjonene er matet med ett argument som er en referanse til en funksjon som ma ringes etter at du har utfort din effekt. Arsaken til dette er at mange ganger utforer disse effektene animasjoner som har en viss varighet. Vi ma vite nar disse animasjonene er ferdig, slik at onShow og onHide hendelser blir virkelig kalt etter at verktoytipset er helt vist eller skjult.

Merk: Hvis du bruker jQuery’s animasjonsmetode, kan «ferdig» -funksjonen bare gis til denne metoden som det siste argumentet. jQuery vil ta vare pa det etter at animasjonen er ferdig.

Standard effekten.

Effekter er faktisk ganske enkle a implementere. Her er funksjonene for standard show / hide effekt:

Se pa verktoytips kildekoden for flere eksempler pa effektene. Den grunnleggende ideen er a bruke jQuery-ferdighetene dine sammen med API-metodene. Her kan du se en demonstrasjon om den tilpassede glidende effekten.