Bölüm 3 (Frameworkler) Ders-10: jQueryMobile

2010 yılında piyasaya sürülen dokunmatik ekran odaklı jquery takımının mobil platformlar için geliştirdiği HTML 5, CSS kullanan bir javascript framework’üdür.

Şekil 80: jQuery

jQuery Mobile, PhoneGap, Worklight ve diğer mobil çerçevelerle uyumludur.

JQuery Mobile Nasıl Kullanılır?

JQuery Mobile ‘ı kullanmak için bilgisayarınıza hiç bir şey kurmanıza ve depolamanıza gerek yoktur.  Birer js ve CSS dosyası olan kütüphaneleri bağlayarak hemen kullanmaya başlanılabilir.  Bu dosyaları kendi bilgisayarınızda da saklayıp referans göstermek sureti ile de bu mümkündür. http://jquerymobile.com/download/ linkini tıkladığınızda, JQuery Mobile’ı kullanmak için  size bir çok seçenek sunar.

Burada 3 temel dosyanın kullanılması gerektiği açıktır. Bunlar birincisi uzantıları .js olan JQuery, ikincisi uzantısı JQuery.Mobile ve üçüncüsü uzantısı .css  olan JQuery.Mobile’dır. İfadelerin sonunda yazılan sayılar ise hangi sürüm olduklarını gösterir.

JQuery Mobile kullanmak için beş neden

• Geniş tarayıcı ve cihaz kapsamı – aşamalı gelişmeler sayesinde web siteniz çok sayıda tarayıcıda ve cihazda görülebilir.
• Dokunmatik giriş desteğine sahip formlar ve kullanıcı arabirimi widget’ları – form girişi için dokunmatik desteği, dokunmatik girişli bir dizi kullanıcı arabirimi widget’ı ekleyerek artırabilirsiniz.
• Hazır yanıt veren web tasarımı – jQuery Mobile, duyarlı web tasarım örnekleri sunan bir çerçevedir.
• Tarayıcı ve tema şablonları kolayca genişletilebilir ve kolayca değiştirilebilir.
• Ajax çağrı cihazı navigasyon modeli – tam sayfa yenileme yerine pushstate Ajax ve HTML5 kullanarak yeni sayfaları daha hızlı yükleyin.

Şekil 81:Nesneler

Gerekli betikleri bağlama:

‹link href=”http://code.jquery.com/mobile/latest/jquery.mobile.min.css” rel=”stylesheet” type=”text/css” /›
‹script type=”text/javascript” src=”http://code.jquery.com/jquery.min.js”›‹/script›
‹script type=”text/javascript” src=”http://code.jquery.com/mobile/latest/jquery.mobile.min.js”›‹/script›

Sayfa içi kodlama:

‹div data-role=”page” id=”main_page” data-theme=”b”›

‹div data-role=”header” ›
‹h1 id=”twi_acc”›Ana Sayfa‹/h1›
‹a href=”#settings” data-icon=”gear” class=”ui-btn-right”›Ayarlar‹/a›

‹/div›
‹div data-role=”content” ›
‹ul data-role=”listview”›

‹li›‹a href=”#twi-page”›Örnekler‹/a›‹/li›
‹li›‹a href=”#map-page”›İletişim‹/a›‹/li›
‹li›‹a href=”#search-page”›Arama‹/a›‹/li›
‹li›‹a href=”#about-page”›Hakkımda‹/a›‹/li›
‹/ul›
‹/div›
‹div data-role=”footer”›
‹h2›© Hilmi Bilici, 2020‹/h2›
‹/div›
‹/div›

Şekil 82: Çıktı