Dreamweaver'ın jQuery Mobile ile entegrasyonu hızlı bir şekilde birçok mobil aygıtta çalışan web uygulaması oluşturmanıza yardım ederken aygıtın boyutlarına uyum sağlar.

jQuery Mobile kullanarak bir web uygulaması oluşturma

jQuery Mobile başlatıcı sayfası açma veya HTML5 sayfası oluşturma

Uygulamanızı oluşturmak için Dreamweaver'da jQuery Mobile başlangıç sayfalarını kullanırsınız. Alternatif olarak, web uygulamanızı yeni bir HTML5 sayfasıyla da oluşturmaya başlayabilirsiniz.

jQuery Mobile başlangıç sayfaları HTML, CSS, JavaScript ve uygulamanızı tasarlamaya başlamanıza yardımcı olan görüntü dosyalarını içerir. Bir CDN'de barındırılan CSS ve JavaScript dosyalarını, kendi sunucunuzu veya Dreamweaver ile birlikte yüklenen dosyaları kullanabilirsiniz.

Not:

Bağlı dosyaların konumunu belirlemek için kod görünümünde <link> ve <script src> etiketlerine bakın.

Ekle panelinden jQuery Mobile bileşenleri ekleme

Ekle panelinden HTML sayfasına jQuery Mobile bileşenleri ekleyin. jQuery Mobile CSS ve JavaScript dosyaları bileşenlerin stilini ve davranışını tanımlar.

CDN'ler ve yerel jQuery Mobile dosyaları hakkında

CDN'ler

Bir CDN (içerik teslim ağı), ağın çeşitli noktalarına yerleştirilmiş veri kopyalarını içeren bilgisayar ağıdır. Bir CDN'nin URL'sini kullanarak bir web uygulaması oluşturduğunuzda, URL'de belirtilen CSS ve JavaScript dosyaları uygulamanız için kullanılır. Varsayılan olarak Dreamweaver jQuery Mobile CDN'sini kullanır.

Alternatif olarak, Microsoft ve Google gibi diğer sitelerin CDN'lerinin URL'lerini kullanabilirsiniz. Kod görünümünde, <link> ve <script src> etiketlerinde belirtilen CSS ve JavaScript dosyalarının sunucu konumunu düzenleyin.

Bir CDN'den indirilen dosyalar salt okunurdur.

Yerel jQuery Mobile dosyaları

Dreamweaver'ı yüklediğinizde jQuery Mobile dosyalarının bir kopyası bilgisayarınıza kopyalanır. jQuery Mobile (yerel) başlatıcı sayfasını seçtiğinizde açılan HTML sayfası yerel CSS, JavaScript ve görüntü dosyalarına bağlıdır.

jQuery Mobile için başlatıcı sayfaları

Dreamweaver uygulamanızı oluşturmanız için size şu başlatıcı sayfalarını sağlar:

jQuery Mobile (CDN)

jQuery Mobile kitaplığını bir CDN'de barındırmayı düşünüyorsanız bu başlatıcı sayfasını kullanın.

 

jQuery Mobile (Yerel)

Varlıkları kendiniz barındırmayı düşünüyorsanız veya uygulamanız İnternet bağlantısına bağlı değilse bu başlatıcı sayfasını kullanın.

 

jQuery Mobile (PhoneGap)

Web uygulamanız mobil uygulama olarak dağıtıldığında mobil uygulamalar için yerel olan özelliklere erişiyorsa bu başlatıcı sayfasını kullanın. Daha fazla bilgi için bkz. Web uygulamalarını paketleme.

 

 

Mobil cihazlar için bir uygulama oluşturmak için başlatıcı sayfalarını kullanın.

  1. Dosya > Yeni'yi seçin.

  2. Gereksiniminize bağlı olarak aşağıdakilerden birini seçin:

    • Örnekten Sayfa > Mobil Başlatıcılar > jQuery Mobile (CDN).

    • Örnekten Sayfa > Mobil Başlatıcılar > jQuery Mobile (Yerel).

     

  3. Oluştur'u tıklatın.

    Görüntülenen sayfada Bağları Sürekli İzle (Görünüm > Canlı Görünüm Seçenekleri) öğesini etkinleştirin ve Canlı Görünüm'e geçin. Uygulamanın nasıl çalıştığını test etmek için gezinme bileşenlerini kullanın.

    Tasarımın çeşitli boyutlara sahip aygıtlarda nasıl görüntülendiğini görmek için Çoklu Ekran menüsündeki seçenekleri kullanın. Canlı Görünüm'ü devre dışı bırakın ve Tasarım görünümüne geri dönün.

  4. Ekle panelinde (Pencere > Ekle) jQuery Mobile öğesini seçin. Web uygulamasına ekleyebileceğiniz bileşenler görüntülenir.

  5. Tasarım görünümünde imleci bileşeni eklemek istediğiniz konuma getirin ve Ekle Paneli'nde bileşeni tıklatın. Görüntülenen iletişim kutusunda seçenekleri kullanarak bileşenleri özelleştirin.

  6. (jQuery Mobile - Yerel) HTML dosyasını kaydettikten sonra, görüntü dosyaları da dahil olmak üzere jQuery Mobile dosyaları HTML dosya konumundaki bir klasöre kopyalanır.

Sayfayı Canlı Görünüm'de önizleyin. Bazı CSS sınıfları yalnızca Canlı Görünüm'de uygulanır.

Yeni bir sayfadan mobil aygıtlar için web uygulaması oluşturma

Sayfa bileşeni diğer tüm jQuery Mobile bileşenleri için kap olarak davranır. Diğer bileşenleri eklemeye devam etmeden önce Sayfa bileşenini ekleyin.

  1. Dosya > Yeni'yi seçin.

  2. Boş Sayfa > HTML öğesini seçin.

    Bazı jQuery Mobile bileşenleri HTML5'e özgü nitelikleri kullanır. Doğrulama sırasında HTML5 uyumluluğunu sağlamak için DocType olarak HTML5'i seçtiğinizden emin olun.

  3. Ekle panelinde (Pencere > Ekle) menüden jQuery Mobile öğesini seçin. jQuery Mobile bileşenleri panelde görüntülenir.

  4. Ekle panelinden, Sayfa bileşenini Tasarım görünümüne sürükleyin.

  5. jQuery Mobile Dosyaları iletişim kutusunda aşağıdakilerden birini seçin:

    Uzak (CDN)

    jQuery Mobile dosyalarını barındıran bir uzak CDN sunucusuna bağlanmak istiyorsanız seçin. jQuery Mobile dosyalarını içeren bir site yapılandırmadıysanız jQuery sitesi için varsayılan seçeneği kullanın. Ayrıca diğer CDN sunucularını kullanmayı da seçebilirsiniz.

    Yerel

    Dreamweaver'da mevcut olan dosyalar görüntülenir. Farklı bir klasör belirtmek için Gözat'ı tıklatın ve jQuery Mobile dosyalarını içeren klasöre gidin.

    HTML dosyasını bilgisayarınıza kaydedene kadar CSS ve JavaScript dosyaları yerel geçici dizine kopyalanır. HTML dosyasını kaydettikten sonra tüm ilişkili jQuery Mobile ve görüntü dosyaları sitenin kök klasöründeki bir klasöre kopyalanır.

  6. Sayfa bileşeni için özellikleri girin.

  7. Tasarım görünümünde imleci bileşeni eklemek istediğiniz konuma getirin ve Ekle Paneli'nde bileşeni tıklatın. Görüntülenen iletişim kutusunda seçenekleri kullanarak bileşenleri özelleştirin.

Sayfayı Canlı Görünüm'de önizleyin. Bazı CSS sınıfları yalnızca Canlı Görünüm'de uygulanır.

Özel dosyaları ve klasörleri kullanma

Uygulamanız için özel CSS ve JS dosyaları oluşturmayı seçebilirsiniz. Dosyalarınızın jquery.mobile.js, jquery.mobile.css ve jquery.js olarak adlandırıldığından emin olun.

Özel klasörler kullanıyorsanız aşağıdakileri gerçekleştirin:

  1. http://docs.jquery.com/Downloading_jQuery#Download_jQuery adresinden jQuery 1.5 çekirdek kitaplığının sıkıştırılmamış sürümünü indirin.

  2. Dosyayı diğer kaynakları içeren çekirdek klasörüne 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