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>
  • Gövde etiketindeki öğeye şu kod uygulanır:
<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>

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.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

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