Basit bir yüzen panel örneği

Ara
Dreamweaver

Dreamweaver

Uygulamayı aç

Bu örnekte, seçili bir komut dosyası işaretçisinin arka planındaki JavaScript kodunu Tasarım görünümünde görüntülemek üzere bir yüzen panel oluşturan bir Komut Dosyası Düzenleyicisi uzantısı geliştirirsiniz. Komut Dosyası Düzenleyicisi, scriptlayer adlı bir yüzen panelde tanımlanmış bir HTML formunun textarea öğesinde JavaScript kodunu görüntüler. Yüzen paneldeki seçili kodda değişiklikler yaparsanız uzantı, değişikliklerinizi kaydetmek için updateScript() işlevini çağırır. Komut Dosyası Düzenleyicisi'ni çağırdığınızda bir komut dosyası işaretleyicisi seçmediyseniz uzantı blanklayer adlı bir yüzen panelde (seçili komut dosyası yok) ifadesini görüntüler.

Yüzen paneller oluşturarak, JavaScript kodu yazarak ve bir menü öğesi oluşturarak bu uzantıyı oluşturun.

Yüzen paneller oluşturma

Bu uzantı için HTML dosyasının başlangıcı, standart belge üstbilgisi bilgilerini ve yüzen panellerin başlık çubuğunda Komut Dosyası Düzenleyicisi sözcükleri olan bir title etiketi içerir.

HTML dosyası üstbilgisini oluşturma

  1. Yeni bir boş belge oluşturun.

  2. Aşağıdakileri girin:

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

Uzantı, kullanıcı bir komut dosyası işaretleyicisi seçmediyse (seçili komut dosyası yok) ifadesini veya seçili bir komut dosyası işaretleyicisinin arka planındaki JavaScript kodunu görüntüleyen iki yüzen paneli tanımlar. Aşağıdaki kod, bu iki yüzen paneli veya blanklayer ve scriptlayer adlı mutlak şekilde konumlandırılmış (AP) öğeleri tanımlar:

İki yüzen paneli oluşturma

  1. HTML dosyasındaki üstbilgiden sonra aşağıdaki kodu ekleyin:

     <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. Dosyayı, Configuration/Floaters klasöründe scriptEditor.htm adıyla kaydedin.

    Her iki div etiketi de pozisyonu (mutlak), boyutu (genişlik:422px ve yükseklik:181px) ve varsayılan görünürlük ayarını (görünür) belirtmek için yüzen panellerin stil niteliğini kullanır. blanklayer paneli, metni panelin ortasında konumlandırmak için center niteliğini ve bir dizi satır sonu (br) etiketini kullanır. scriptlayer paneli, seçili JavaScript kodunu görüntülemek için tek bir textarea ile bir form oluşturur. textarea etiketi ayrıca seçili kodun değiştiğini gösteren bir onBlur olayı gerçekleştiğinde değişen metni yeniden belgeye yazmak için updateScript() işlevinin çağrıldığını da belirtir.

JavaScript kodunu yazma

Komut Dosyası Düzenleyicisi için JavaScript kodu, Dreamweaver'da selectionchanged() adı verilen bir yüzen panel işlevinden ve updateScript() adlı bir kullanıcı tanımlı işlevden oluşur.

selectionChanged(): seçili bir komut dosyası işaretçisi var mı?

selectionChanged() işlevi, Tasarım görünümünde bir komut dosyası işaretçisinin seçilip seçilmediğini belirler. Belgenin gövde bölümünde bir JavaScript yordamı varsa ve Tercihler iletişim kutusunun Görünmez Öğeler bölümünde Komut Dosyaları seçiliyse Tasarım görünümünde bir komut dosyası işaretçisi görünür. Aşağıdaki şekilde bir komut dosyası işaretçisi simgesi gösterilmektedir:

Komut dosyası işaretçisi simgesi
Komut dosyası işaretçisi simgesi

selectionChanged() işlevi, ilk olarak kullanıcının belgesi için Belge Nesne Modeli'ni (DOM) almak üzere dw.getDocumentDOM() işlevini çağırır. Ardından, o belge için seçili düğümün ilk olarak bir öğe ve ikinci olarak bir SCRIPT etiketi olup olmadığını görmek için getSelectedNode() işlevini çağırır. Her iki koşul da doğruysa selectionChanged() işlevi scripteditor yüzen panelini görünür hale getirir ve arka plandaki JavaScript koduyla birlikte yükler. Ayrıca blanklayer yüzen panelinin görünürlük özelliğinin değerini gizli olarak ayarlar. Aşağıdaki şekilde, scriptlayer yüzen panelini seçili JavaScript koduyla gösterilmektedir:

scriptlayer yüzen paneli
scriptlayer yüzen paneli

Seçili düğüm bir öğe veya script etiketi değilse selectionChanged() işlevi blanklayer yüzen panelini görünür hale getirir ve scriptlayer panelini gizler. blanklayer yüzen paneli, aşağıdaki şekilde gösterildiği gibi (seçili komut dosyası yok) metnini görüntüler:

blanklayer yüzen paneli
blanklayer yüzen paneli

selectionChanged() işlevini ekleme

  1. Configuration/Floaters klasöründe bulunan scriptEditor.htm dosyasını açın.

  2. Dosyanın üstbilgi bölümüne aşağıdaki kodu girin.

     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. Dosyayı kaydedin.

updateScript(): değişiklikleri geri yazma

updateScript() işlevi, scriptlayer panelinin textarea öğesinde bir onBlur olayı gerçekleştiğinde seçili komut dosyasını geri yazar. textarea form öğesi, JavaScript kodunu içerir ve textarea öğesi girdi odağını kaybederse onBlur olayı gerçekleşir.

  1. Configuration/Floaters klasöründe bulunan scriptEditor.htm dosyasını açın.

  2. Dosyanın üstbilgi bölümüne aşağıdaki kodu girin.

     /* 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. Dosyayı kaydedin.

Menü öğesi oluşturma

Komut Dosyası Düzenleyicisi kodunu Configuration/Floaters klasörüne kaydetmek yeterli değildir. Yüzen paneli yüklemek ve görünür hale getirmek için ayrıca dw.setFloaterVisibility('scriptEditor',true) işlevini veya dw.toggleFloater('scriptEditor') yüzen panelini çağırmanız gerekir. Komut Dosyası Düzenleyicisi'ni çalıştırmak için en göz önündeki yer, menus.xml dosyasında tanımlanan Pencere menüsüdür. Pencere menüsünde, Komut Dosyası Düzenleyicisi uzantısı için bir giriş oluşturan menuitem etiketini aşağıdaki şekilde gösterildiği gibi oluşturmanız gerekir:

Komut Dosyası Düzenleyicisi uzantısı için bir giriş
Komut Dosyası Düzenleyicisi uzantısı için bir giriş

Geçerli belge için Tasarım görünümünde bir komut dosyası işaretçisi ve ardından Komut Dosyası Düzenleyicisi menü öğesini seçerseniz Dreamweaver, Komut Dosyası Düzenleyicisi yüzen panelini çağırır ve komut dosyası işaretçisinin arka planındaki JavaScript kodunu görüntüler. Komut dosyası işaretçisi seçili değilken menü öğesini seçerseniz Dreamweaver, (seçili komut dosyası yok) metnini içeren blanklayer panelini görüntüler.

  1. Configuration/Menus klasöründe menus.xml dosyasını açın.

  2. <menuitem name="Tile _Vertically" ile başlayan etiketi bulun ve ekleme noktasını /> kapanış etiketinin sonrasına konumlandırın.

  3. Yeni bir satıra aşağıdakileri ekleyin:

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

  4. Dosyayı kaydedin.

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?

Hızlı bağlantılar

Tüm planlarınızı görüntüleyin Planlarınızı yönetin
Hızlı bağlantıları görüntüleyin
Hızlı bağlantıları gizleyin

Yasal Uyarılar    |    Çevrimiçi Gizlilik İlkesi