Kullanıcı Kılavuzu İptal

Dreamweaver'da jQuery efektlerini kullanma

 

 

Hoş görünümlü jQuery efektleri kullanarak göz alıcı web siteleri tasarlayın. Dreamweaver ile jQuery entegrasyonu, sürgüler gibi efektleri kod yazmanıza gerek kalmadan ekleyebilmenizi sağlar.

jQuery efektleri ekleme

  1. Dreamweaver belgenizin Tasarım veya Kod görünümünde, jQuery efekti uygulamak istediğiniz öğeyi seçin.

  2. Davranışlar panelini açmak için Pencereler > Davranışlar seçeneklerini belirleyin.

  3. Artı simgesini tıklatın, Efektleri ve gerekli efekti tıklatın.

    jQuery efektleri ekleme
    jQuery efektleri ekleme

    Seçilen efekt için ayarları içeren özelleştirme paneli görüntülenir.

  4. Efektin uygulanacağı hedef öğe ve efektin süresi gibi ayarları belirtin.

    Hedef öğe, başlangıçta seçtiğiniz öğeyle aynı olabilir veya sayfadaki farklı bir öğe olabilir. Örneğin, kullanıcıların bir B öğesini gizlemek veya göstermek için bir A öğesini tıklatmasını istiyorsanız, hedef öğe B'dir.

  5. Birden çok jQuery efekti eklemek için yukarıdaki adımları yineleyin.

    Birden çok efekt seçtiğinizde Dreamweaver, Davranışlar panelinde görüntülendiği sırayla efektleri uygular. Efektlerin sırasını değiştirmek için, panelin üst kısmındaki ok tuşlarını kullanın.

Dreamweaver otomatik olarak ilgili kodu belgenize ekler. Örneğin, 'Soldur' efektini seçtiyseniz şu kod eklenir:

  • jQuery efektlerinin çalışması için gerekli olan, bağımsız dosyalara ilişkin dış dosya referansları:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
  • Gövde etiketindeki öğeye şu kod uygulanır:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
  • Şu kodla birlikte bir komut dosyası etiketi eklenir:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Olay temelli jQuery efektleri

Bir jQuery efekti uyguladığınızda, bu efekt varsayılan olarak onClick olayına atanır. Davranışlar panelini kullanarak efekt için tetikleyici olayı değiştirebilirsiniz.

  1. Gerekli sayfa öğesini seçin.

  2. Pencereler > Davranışlar panelinde Ayarlanan Olayları Göster simgesini tıklatın.

  3. Şu anda uygulanan efekte karşılık gelen satırı tıklatın. Birinci sütunun, arasından seçim yapabileceğiniz olayların listesini sağlayan bir aşağı açılır listeye dönüşeceğini unutmayın.

  4. Gerekli olayı tıklatın.

jQuery efektlerini kaldırma

  1. Gerekli sayfa öğesini seçin.

    Davranışlar paneli, şu anda seçili sayfa öğesine uygulanan tüm efektleri listeler.

  2. Silmek istediğiniz efekti tıklatın ve ardından Sil simgesini tıklatın.

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

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