Příklad jednoduchého plovoucího panelu

Hledat
Dreamweaver

Dreamweaver

Otevřít aplikaci

V rámci tohoto příkladu vytvoříme rozšíření Script Editor, které vygeneruje plovoucí panel s kódem JavaScript tvořícím základ vybrané značky skriptu v zobrazení návrhu. Script Editor obsahuje kód JavaScript v rámci elementu textarea ve formuláři HTML, který je definován na plovoucím panelu s názvem scriptlayer. Pokud provedete změny ve vybraném kódu na plovoucím panelu, rozšíření zavolá funkci updateScript() a uloží provedené změny. V případě, že při vyvolání nástroje Script Editor nezvolíte značku skriptu, rozšíření zobrazí text (nebyl vybrán žádný skript) na plovoucím panelu s názvem blanklayer.

Toto rozšíření můžete vytvořit za pomoci plovoucích panelů, napsáním kódu JavaScript a vytvořením položky nabídky.

Vytváření plovoucích panelů

Soubor HTML použitý pro toto rozšíření obsahuje na svém začátku standardní informace o záhlaví dokument a tag title, který umožní umístit nápis Script Editor na titulním pruhu plovoucích panelů.

Vytvoření záhlaví souboru HTML

  1. Vytvořte nový prázdný dokument.

  2. Zadejte následující:

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

Rozšíření definuje dva plovoucí panely, na kterých se zobrazuje buď nápis (nebyl vybrán žádný skript) v případě, že uživatel nevybral žádnou značku skriptu, nebo kód JavaScript, který tvoří základ vybrané značky skriptu. Následující kód definuje tyto dva plovoucí panely nebo elementy s absolutní polohou (AP) pod názvem blanklayer a scriptlayer:

Vytvoření dvou plovoucích panelů

  1. Za záhlaví souboru HTML přidejte následující kód:

     <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>

  2. Uložte soubor pod názvem scriptEditor.htm ve složce Configuration/Floaters.

    Oba tagy div používají atribut style k určení polohy (absolute), velikosti (width:422px a height:181px) a výchozího nastavení visibility (visible) plovoucích panelů. Panel blanklayer používá atribut center a řadu tagů pro zalomení (br) k tomu, aby umístil text na střed panelu. Panel scriptlayer vytvoří formulář s jednou oblastí textarea, kde zobrazí vybraný kód JavaScript. Tag textarea také určuje, že pokud dojde k události onBlur (která značí změnu vybraného kódu), dojde k zavolání funkce updateScript(), která zapíše upravený text zpět do dokumentu.

Psaní kódu JavaScript

Kód JavaScript pro nástroj Script Editor je tvořen jednou funkcí plovoucího panelu volanou aplikací Dreamweaver „selectionchanged()“ a jednou funkcí definovanou uživatelem „updateScript()“.

selectionChanged(): je zvolena značka skriptu?

Funkce selectionChanged() určuje, zda byla v zobrazení návrhu vybrána značka skriptu. Značka skriptu bude v zobrazení návrhu k dispozici v případě, že hlavní text dokumentu obsahuje běžný kód jazyka JavaScript, a pokud je v dialogovém okně Předvolby v části Neviditelné elementy v dialogovém okně Předvolby zvolena možnost Skripty. Následující obrázek ukazuje ikonu Značka skriptu:

Ikona Značka skriptu
Ikona Značka skriptu

Funkce selectionChanged() nejprve zavolá funkci dw.getDocumentDOM() a získá tak model DOM (Document Object Model) pro dokument uživatele. Následně zavolá funkci getSelectedNode() a ověří dvě skutečnosti: prvně, zda je zvolený uzel daného dokumentu elementem, a poté, zda se jedná o tag SCRIPT. Pokud jsou obě tyto podmínky splněny, funkce selectionChanged() nastaví plovoucí panel scripteditor jako viditelný a načte do něj kód JavaScript tvořící základ skriptu. Také nastaví u vlastnosti visibility plovoucího panelu blanklayer hodnotu hidden. Následující obrázek popisuje plovoucí panel scriptlayer s vybraným kódem JavaScript:

Plovoucí panel scriptlayer
Plovoucí panel scriptlayer

Pokud vybraný uzel není elementem, nebo není tagem script, funkce selectionChanged() nastaví plovoucí panel blanklayer jako viditelný a skryje panel scriptlayer. Na plovoucím panelu blanklayer se zobrazí text (nebyl vybrán žádný skript) tak, jak je uvedeno na následujícím obrázku:

Plovoucí panel blanklayer
Plovoucí panel blanklayer

Přidání funkce selectionChanged()

  1. Otevřete soubor pod názvem scriptEditor.htm ve složce Configuration/Floaters.

  2. Do části se záhlavím souboru zadejte následující kód.

     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'; 
    } 
}

  3. Soubor uložte.

updateScript(): zapsání provedených změn

Pokud dojde v oblasti textarea na panelu scriptlayer k události onBlur, funkce updateScript() zapíše zpět vybraný skript. Element formuláře textarea obsahuje kód JavaScript a pokud přestane být oblast textarea označená a ukončí se u ní vstup, dojde k události onBlur.

  1. Otevřete soubor pod názvem scriptEditor.htm ve složce Configuration/Floaters.

  2. Do části se záhlavím souboru zadejte následující kód.

     /* 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>

  3. Soubor uložte.

Vytvoření položky nabídky

Uložení kódu Script Editor ve složce Configuration/Floaters je nepostačující. Musíte také zavolat funkci dw.setFloaterVisibility('scriptEditor',true) nebo dw.toggleFloater('scriptEditor') a načíst a zviditelnit tak plovoucí panel. Nejzřejmější místo, ze kterého vyvolat nástroj Script Editor, je z nabídky Okna definované v souboru menus.xml. Je nutné vytvořit tag menuitem, který vytvoří záznam pro rozšíření Script Editor v nabídce Okna tak, jak je uvedeno na následujícím obrázku:

Záznam pro rozšíření Script Editor
Záznam pro rozšíření Script Editor

Pokud v zobrazení návrhu pro aktuální dokument vyberete značku skriptu a poté vyberete položku nabídky Script Editor, aplikace Dreamweaver vyvolá plovoucí panel Script Editor a zobrazí kód JavaScript, který tvoří základ značky skriptu. Pokud vyberete položku nabídky bez zvolení značky skriptu, aplikace Dreamweaver zobrazí panel blanklayer obsahující text (nebyl vybrán žádný skript).

  1. Otevřete soubor menus.xml ve složce Configuration/Menus.

  2. Vyhledejte tag, který začíná textem <menuitem name="Tile _Vertically" a umístěte kurzor za pravou ostrou závorku /> tagu.

  3. Na novém řádku vložte následující:

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

  4. Soubor uložte.

Získejte pomoc rychleji a snáze

Nový uživatel?

Rychlé odkazy

Zobrazit všechny vaše plány Správa plánů
Zobrazit rychlé odkazy
Skrýt rychlé odkazy

Právní upozornění    |    Zásady ochrany osobních údajů online