Exempel på en enkel flytande panel

Sök

Senast uppdaterad den 2 maj 2021

I det här exemplet skapar du ett skriptredigerartillägg som skapar en flytande panel som visar den underliggande JavaScript-koden för en vald skriptmarkör i designvyn. Skriptredigeraren visar JavaScript-koden i elementet textarea för ett HTML-formulär som definieras i en flytande panel som kallas scriptlayer. Om du ändrar den markerade koden i den flytande panelen anropar tillägget funktionen updateScript() för att spara ändringarna. Om du inte har valt en skriptmarkör när du anropar skriptredigeraren visar tillägget (no script selected) på en flytande panel som kallas blanklayer.

Du skapar det här tillägget genom att skapa flytande paneler, skriva JavaScript-kod och skapa ett menyalternativ.

Skapa de flytande panelerna

Början av HTML-filen för det här tillägget innehåller information om standarddokumentsidhuvudet och en title-tagg som infogar orden Script Editor i namnlisten för de flytande panelerna.

Skapa HTML-filens sidhuvud

Skapa ett nytt tomt dokument.

Ange följande:

 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Script Editor</title> 
<script language="JavaScript">

Tillägget definierar två flytande paneler som antingen visar (no script selected) om användaren inte har valt en skriptmarkör eller den underliggande JavaScript-koden för en vald skriptmarkör. Följande kod definierar dessa två flytande paneler eller absolut positionerade (AP) element som kallas blanklayer och scriptlayer:

Skapa de två flytande panelerna

Lägg till följande kod efter filhuvudet i HTML-filen:

 <body> 
<div id="blanklayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: hidden"> 
<center> 
<br> 
<br> 
<br> 
<br> 
<br> 
(no script selected) 
</center> 
</div> 
 
<div id="scriptlayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: visible"> 
<form name="theForm"> 
<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ 
onBlur="updateScript()"></textarea> 
</form> 
</div> 
 
</body> 
</html>

Spara filen som scriptEditor.htm i mappen Configuration/Floaters.

Båda div-taggarna använder attributet style för att ange positionen (absolute), storleken (bredd: 422 px och höjd: 181 px) och standardinställningen för visibility (visible) för de flytande panelerna. Panelen blanklayer använder attributet center och en serie taggar för radbrytning (br) för att placera texten i mitten av panelen. Panelen scriptlayer skapar ett formulär med en enda textarea för att visa den valda JavaScript-koden. textarea-taggen anger även att när en onBlur-händelse inträffar, vilket anger att den valda koden har ändrats, ska funktionen updateScript() anropas för att skriva tillbaka den ändrade texten till dokumentet.

Skriv JavaScript-koden

JavaScript-koden för skriptredigeraren består av en flytande panelfunktion – selectionchanged() – som Dreamweaver anropar och en användardefinierad funktion – updateScript().

selectionChanged(): är en skriptmarkör vald?

Funktionen selectionChanged() identifierar om en skriptmarkör har valts i designvyn. En skriptmarkör visas i designvyn om det finns en JavaScript-rutin i textavsnittet i ett dokument och om skript har valts under Osynliga element i dialogrutan Inställningar. Följande bild visar en skriptmarkörikon:

Funktionen selectionChanged() anropar först funktionen dw.getDocumentDOM() för att hämta dokumentobjektmodellen (DOM) för användarens dokument. Den anropar sedan funktionen getSelectedNode() för att kontrollera om den valda noden för dokumentet i första hand är ett element och, i andra hand, en SCRIPT-tagg. Om båda dessa villkor är uppfyllda gör funktionen selectionChanged() den flytande panelen scripteditor synlig och läser in den underliggande JavaScript-koden till panelen. Den ställer även in egenskapen visibility för den flytande blanklayer-panelen till värdet hidden. Följande bild visar den flytande scriptlayerpanelen med den valda JavaScript-koden:

Om den valda noden inte är ett element eller om den inte är en skripttagg gör funktionen selectionChanged() den flytande blanklayer-panelen synlig och döljer scriptlayer-panelen. Den flytande blanklayer-panelen visar texten (no script selected) enligt följande figur:

Lägg till funktionen selectionChanged()

Öppna filen scriptEditor.htm som finns i mappen Configuration/Floaters.

Ange följande kod i filens rubrikavsnitt.

 function selectionChanged(){ 
    /* get the selected node */ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
     
    /* check to see if the node is a script marker */ 
    if (theNode.nodeType == Node.ELEMENT_NODE && ¬ 
    theNode.tagName == "SCRIPT"){ 
        document.layers['scriptlayer'].visibility = 'visible'; 
        document.layers['scriptlayer'].document.theForm.¬ 
        scriptCode.value = theNode.innerHTML; 
        document.layers['blanklayer'].visibility = 'hidden'; 
    }else{ 
        document.layers['scriptlayer'].visibility = 'hidden'; 
        document.layers['blanklayer'].visibility = 'visible'; 
    } 
}

Spara filen.

updateScript(): återskrivningsändringar

Funktionen updateScript() skriver tillbaka det valda skriptet när en onBlur-händelse inträffar i textarea för scriptlayer-panelen. Formulärelementet textarea innehåller JavaScript-koden och onBlur-händelsen inträffar när textarea förlorar indatafokus.

Öppna filen scriptEditor.htm som finns i mappen Configuration/Floaters.

Ange följande kod i filens rubrikavsnitt.

 /* update the document with any changes made by 
    the user in the textarea */ 
 
    function updateScript(){ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
    theNode.innerHTML = document.layers['scriptlayer'].document.¬ 
    theForm.scriptCode.value; 
} 
 
</script> 
</head>

Spara filen.

Skapa ett menyalternativ

Det räcker inte att spara koden för skriptredigeraren i mappen Configuration/Floaters. Du måste även anropa någon av funktionerna dw.setFloaterVisibility('scriptEditor',true) eller dw.toggleFloater('scriptEditor') för att läsa in den flytande panelen och göra den synlig. Fönster-menyn är den mest självklara platsen att anropa skriptredigeraren från, vilket definieras i menus.xml-filen. Du måste skapa menuitem-taggen som skapar en post för skriptredigerartillägget på Fönster-menyn enligt följande bild:

Om du väljer en skriptmarkör i designvyn för det aktuella dokumentet och sedan väljer menyalternativet för skriptredigeraren anropar Dreamweaver den flytande skriptredigerarpanelen och visar skriptmarkörens underliggande JavaScript-kod. Om du väljer menyalternativet när ingen skriptmarkör har valts visar Dreamweaver den blanklayer-panel som innehåller texten (no script selected).

Öppna filen menus.xml i mappen Configuration/Menus.
Hitta den tagg som börjar med <menuitem name="Tile _Vertically" och placera insättningspunkten efter taggens avslutande />-tecken.

Infoga följande på en ny rad:

 <menuitem name="Script Editor" enabled="true" ¬ 
command="dw.toggleFloater('scriptEditor')"¬ 
checked="dw.getFloaterVisibility('scriptEditor')" />

Spara filen.

Adobe

Få hjälp snabbare och enklare

Ny användare?