jQuery UI ve Mobile bileşenleri ile Dreamweaver web projelerinize uygulama benzeri işlevler eklemeyi öğrenin. Kod yazmadan akordeonlar, sekmeler, sürgüler ve otomatik tamamlama kutuları ekleyin.

Bileşenler, bir web sayfasına eklenebilen ve web sayfasında yürütülebilen DHTML ve JavaScript gibi dillerde yazılmış küçük web uygulamalarıdır. Web bileşenleri, bir web sayfasında masaüstü deneyimlerini çoğaltmanın bir yolunun sağlanmasına yardımcı olur.

Akordeon, sekmeler, tarih seçici, sürgü ve otomatik tamamlama gibi jQuery UI bileşenleri, masaüstü deneyimini web'e taşır.

Örneğin, masaüstü uygulamalarında iletişim kutularının sekme özelliğini çoğaltmak için Sekmeler bileşeni kullanılabilir.

Dreamweaver ayrıca mobil web uygulamalarında yaygın olarak kullanılan form öğeleri ve diğer özellikleri oluşturmak için kullanabileceğiniz bir jQuery Mobile bileşenleri koleksiyonu da içerir. Örneğin, mobil ortamlarda kullanılabilen metin alanları ve onay kutuları gibi form öğeleri eklemek için jQuery Mobile bileşenlerini kullanabilirsiniz.

jQuery bileşeni ekleme

Bir jQuery bileşeni eklediğinizde, otomatik olarak koda şunlar eklenir:

  • Tüm bağımlı dosyalara referanslar
  • Bileşen için jQuery API'sini içeren komut dosyası etiketi. Aynı komut dosyası etiketine eklenen ek bileşenler.

jQuery bileşenleri hakkında daha fazla bilgi için bkz. http://jqueryui.com/demos/

Not:

jQuery efektleri için, bir efekt eklediğinizde jquery-1.8.24.min.js otomatik olarak dahil edildiğinden, bu dosyaya dış referans eklenmez.

  1. İmlecinizin, sayfada bileşeni eklemek istediğiniz konumda olduğundan emin olun.

  2. Ekle > jQuery UI seçeneklerini belirleyin ve eklemek istediğiniz bileşeni seçin.

    Ekle panelini kullanırsanız, Ekle panelinin jQuery UI bölümünde bileşenler bulunur.

Bir jQuery bileşenini seçtiğinizde bunun özellikleri Özellikler panelinde görüntülenir.

jQuery bileşenlerini Canlı görünümünde veya jQuery bileşenlerini destekleyen tarayıcıda önizleyebilirsiniz.

jQuery bileşenlerini değiştirme

  1. Üzerinde değişiklik yapmak istediğiniz bileşeni seçin.

  2. Özellikler panelinde özellikleri değiştirin.

    Örneğin, Sekmeler bileşenine fazladan bir sekme eklemek için bileşeni seçin ve Özellikler panelinde "+" öğesini tıklatın.

jQuery Mobile bileşenleri ekleme

  1. jQuery Mobile bileşenlerini kullanabilmeniz için öncelikle Ekle > jQuery Mobile > Sayfa öğesini seçerek bir jQuery Mobile sayfası tanımlamanız gerekir.

    jQuery Mobile Dosyaları iletişim kutusu açılır.

    jQuery Mobile Dosyaları iletişim kutusu
    jQuery Mobile Dosyaları iletişim kutusu

  2. jQuery Mobile dosyaları iletişim kutusunun varsayılan ayarlarını değiştirin veya varsayılan yollar olarak bırakın ve Tamam'ı tıklatın.

  3. Sayfa iletişim kutusu açılır. Kimlik alanına bir ad yazın ve mobil sayfanızda üstbilgi ve altbilgi isteyip istemediğinize göre Üstbilgi ve Altbilgi'nin yanlarındaki onay kutularını seçin veya seçimlerini kaldırın.

    Sayfa iletişim kutusu
    Sayfa iletişim kutusu

  4. Dreamweaver'da açılan sayfada Üstbilgi, İçerik ve Altbilgi metinlerini mobil sayfanızda olmasını istediğiniz metin, görüntüler ve diğer öğeler ile değiştirin.

    Not:

    Küçük mobil ekranlarda görüntüleneceğinden metni kısa ve görüntüleri küçük tutun.

  5. Diğer jQuery Mobile bileşenlerini gerektiği şekilde ekleyin.

  6. Sayfayı bir cihazda önizleyin.

    Daha fazla bilgi için bkz. Dreamweaver web sayfalarını birden fazla cihazda önizleme.

  7. jQuery Mobile sayfasını ve tüm ilgili dosyaları kaydedin.

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