Använda widgeten Spry-verktygstips i Dreamweaver

Obs!

Spry-widgetar ersätts med jQuery-widgetar i Dreamweaver CC och senare. Du kommer även fortsättningsvis att kunna ändra befintliga Spry-widgetar på din sida, men du kan inte lägga till nya.

Om widgeten Verktygstips

Spry-widgeten Verktygstips visar mer information när en användare hovrar över ett visst element på en webbsida. Det extra innehållet försvinner när användaren slutar hovra. Du kan också ange att verktygstipsen ska vara öppna lite längre så att användarna kan arbeta med innehållet i verktygstipset.

Widgeten Verktygstips består av följande tre element:

  • Verktygstipsbehållaren. Detta element innehåller meddelandet eller innehållet som du vill visa när användaren aktiverar verktygstipset.

  • Sidelement(en) som aktiverar verktygstipset.

  • Konstruktorskriptet. Detta är JavaScript som uppmanar Spry att skapa verktygstipsfunktioner.

När du infogar en verktygstipswidget skapar Dreamweaver en verktygstipsbehållare med hjälp av div-koder, och kapslar in ”utlösarelement” (sidelementet som aktiverar verktygstipset) med span-koder. Dessa taggar används i Dreamweaver som standard, men koderna för verktygstipset och utlösarelementet kan vara valfria koder, så länge de finns i sidans brödtext.

Ha följande i åtanke när du arbetar med widgeten Verktygstips:

  • Ett öppet verktygstips stängs innan nästa öppnas.

  • Verktygstips visas så länge användaren hovrar över utlösarområdet.

  • Det finns inga begränsningar av vilka typer av koder som du kan använda som utlösare för verktygstipsinnehåll. (Blocknivåelement rekommenderas så att inga återgivningsproblem uppstår när olika webbläsare används.)

  • Verktygstipset visas som standard 20 pixlar nedanför och till höger om markören. Du kan använda förskjutningsalternativen Vågrät och Lodrät i egenskapskontrollen om du vill ange en annan plats.

  • Det finns för närvarande inget sätt att låta verktygstipset vara öppet när sidan laddas i en webbläsare.

För verktygstipswidgeten krävs väldigt lite CSS. Spry använder JavaScript för att visa, dölja och placera verktygstipset. Du kan formatera verktygstipset på andra sätt med vanliga CSS-metoder, efter sidans behov. Den enda regel som finns i standard-CSS-filen är ett sätt att kringgå Internet Explorer 6-problem, så att verktygstipset visas ovanför formulärelement eller Flash-objekt.

En mer utförlig förklaring till hur widgeten Spry-verktygstips fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_sprytooltip_se.

En självstudiekurs om hur du arbetar med widgeten Spry-verktygstips finns på www.adobe.com/go/lrvid4046_dw_se.

Infoga widgeten Verktygstips

  1. Välj Infoga > Spry > Spry-verktygstips.
Obs!

Du kan också infoga en verktygstipswidget genom att använda kategorin Spry på panelen Infoga.

Den här åtgärden infogar en ny verktygstipswidget med en behållare för verktygstipsets innehåll, och en platshållarmening som fungerar som utlösare för verktygstipset.

Du kan också välja ett befintligt element på sidan (till exempel en bild) och sedan infoga verktygstipset. När du gör detta fungerar det element som du markerar som det nya verktygstipsets utlösare. Markeringen måste vara ett fullständigt kodelement (till exempel koden img eller p) så att Dreamweaver kan tilldela ett ID till det om det inte redan har ett.

Redigeringsalternativ för widgeten Verktygstips

Du kan ange alternativ som du kan anpassa verktygstipswidgetens funktioner med.

  1. Hovra över eller placera insättningspunkten i verktygstipsets innehåll på sidan.

  2. Klicka på verktygstipswidgetens blå flik så att den markeras.

  3. Ange önskade alternativ på verktygstipswidgetens egenskapskontroll.

Namn

Namnet på verktygstipsets behållare. Behållaren innehåller verktygstipsets innehåll. Som standard använder Dreamweaver koden div som behållare.

Utlösare

Elementet på sidan som aktiverar verktygstipset. Som standard infogar Dreamweaver en platshållarmening, omsluten av span-koder, som utlösare, men du kan välja valfritt element på sidan som har ett unikt ID.

Följ musen

När du väljer det här alternativet följer verktygstipset musen medan du hovrar över utlösarelementet.

Dölj när musen lämnar

När du väljer det här alternativet är verktygstipset öppet så länge musen hovrar över verktygstipset (även om musen lämnar utlösarelementet). Att ha verktygstipset öppet är användbart när det finns länkar eller andra interaktiva element i verktygstipset. Om du inte väljer det här alternativet stängs verktygstipselementet när musen lämnar utlösarområdet.

Vågrät förskjutning

Beräknar verktygstipsets vågräta placering i förhållande till musen. Förskjutningsvärdet mäts i pixlar och standardförskjutningen är 20 pixlar.

Lodrät förskjutning

Beräknar verktygstipsets lodräta placering i förhållande till musen. Förskjutningsvärdet mäts i pixlar och standardförskjutningen är 20 pixlar.

Visningsfördröjning

Fördröjning i millisekunder innan verktygstipset visas efter att utlösarelementet har aktiverats. Standardvärdet är 0.

Döljningsfördröjning

Fördröjning i millisekunder innan verktygstipset försvinner efter att utlösarelementet har inaktiverats. Standardvärdet är 0.

Effekt

Typen av effekt som du vill använda när verktygstipset visas. Rullgardin simulerar en rullgardin som dras uppåt och nedåt för att visa och dölja verktygstipset. Tona tonar in och ut verktygstipset. Standardvärdet är Ingen.

 Adobe

Få hjälp snabbare och enklare

Ny användare?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14–16 oktober i Miami Beach och online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14–16 oktober i Miami Beach och online