JQuery Mobile

JQuery Mobile Giriş

Jquery Framework yapısı üzerine inşa edilmiş olan Jquery Mobile ile mobil web uygulamaları geliştirmemiz oldukça kolay ve hızlıdır. Jquery Mobile ile uygulama geliştirmek için temel düzeyde HTML, CSS ve JavaScript bilmemiz yeterlidir. JQuery Mobile adından da anlaşıldığı üzere bir JQuery eklentisi olduğundan JQuery bilginize bir miktar ekleme yapmanız yeterli olacaktır. Kullanımda olan akıllı telefonlar ve tablet bilgisayarların birçoğu tarafından desteklenmektedir. Framework dosyasının boyutu oldukça küçüktür, ayrıca bilinen HTML5 özelliklerinin büyük bölümünü desteklemektedir. JQuery Mobile özel bir yazım biçimi gerektirmez fakat bazı durumlarda sayfamızda kullandığımız html etiketlerinin (html tag) nasıl olacağı, nasıl gösterilmesi gerektiği hakkında bilgi vermemiz gerekebilir.

Bu bilgiyi sağlamak için HTML’e göre standart olmayan fakat JQuery Mobile ile okunabilen HTML etiketlerine  eklenen özellikleri (attribute, img etiketi için src özelliği gibi) kullanmaktadır.

Şimdilik bizler data-role bilgilerine odaklanalım ileride zaman zaman diğer kullanım biçimlerini de inceleyeceğiz. İlk örneğimizde div yapısını kullanarak mobil bir sayfayı nasıl oluşturabileceğimizi göreceğiz. Daha sonra aynı örneği HTML5 yeteneklerini kullanarak tekrar uyguluyor olacağız. İlk örneğimiz, giriş niteliğinde basit bir uygulama olacak. Bu arada örneklerimizi bir pc üzerinde sınayabilmek için Opera Mobile Emulator programını kullanıyor olacağız. Sizde http://www.opera.com/developer/tools/ adresinden Opera Mobile Emulator programını indirip bu kısımdaki örnekleri deneyebilirsiniz. Ben sizlere Samsung  i9000 (Android 2.3.3 sürümü) üzerinden örneklerimizin resimlerini sunacağım.

Örnek  1-0: html data-role ile yazım biçimi.

<html> 
    <head> 
    <title>ilk örneğimiz</title> 
    <META http-equiv=content-type content=text/html;charset=iso-8859-9>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
<div class="section" data-role="page" id="ilksayfa">
<div class="header" data-role="header"><h1>Header alanımız</h1></div>
<div class="content" data-role="content">
<p>İlk sayfamız</p>
</div>
<div class="footer" data-role="footer"><h1>Footer alanımız</h1></div>
</div>
</body>
</html>

Aslında Örnek 1-0’ daki söz dizimi, bizlere şimdiye kadar yapmış olduğumuz örneklerden dolayı pek de yabancı gelmeyecektir. Şimdi aynı örneğimizi HTML5 ile yapalım. Kaynak kodlarımız içerisinde sadece body tag’i arasındaki tag’leri değiştirmemiz yeterli olduğu için sadece HTML5’e ait olan kodlarımızı yazalım, sizler sadece body tag’leri arasındaki bölüme aşağıdaki kodları yazabilirsiniz.

Örnek 1-0 HTML 5 ile yazım biçimi.

<section id="ilksayfa" data-role="page">
<header data-role="header"><h1>Header alanımız</h1></header>
<div class="content" data-role="content">
<p>İlk sayfamız</p>
</div>
<footer data-role="footer"><h1>Footer alanımız</h1></footer>
</section>

Örnek uygulamamızın görünümü (android kullanan bir mobile telefonda) aşağıdaki gibidir.

Örnek  1-0 görünüm biçimi.

İç İçe Sayfalar

Yukarıdaki sayfa yapısı ile ilgili güzel şeylerden birisi de tek bir HTML sayfası içinde birden fazla sayfa oluşturabilmemizdir. Yukarıdaki örnek uygulamamız için ikinci bir sayfa oluşturmak istersek ayrı bir HTML sayfa açmamıza gerek yoktur. Böylece bir tek HTML dosyası içerisinde birden fazla sayfaya ait kodları yazabiliriz. İşte örnek uygulamamıza ait kaynak kodlarımız.

Örnek  2-0 html

<html>

    <head>

    <title>ilk örneğimiz</title>

    <META http-equiv=content-type content=text/html;charset=iso-8859-9>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

<!-- İlk sayfamız başlangıç -->

<section id="ilksayfa" data-role="page">

<header data-role="header"><h1>Header alanımız</h1></header>

<div class="content" data-role="content">

<p>İlk sayfamız</p>

<a href="#ikincisayfa">İkinci sayfaya git</a>

</div>

<footer data-role="footer"><h1>Footer alanımız</h1></footer>

</section>

<!-- İlk sayfamız bitiş -->

<!-- İkinci sayfamız başlangıç -->

<section id="ikincisayfa" data-role="page">

<header data-role="header"><h1>Header alanımız</h1></header>

<div class="content" data-role="content">

<p>İkinci sayfamız</p>

</div>

<footer data-role="footer"><h1>Footer alanımız</h1></footer>

</section>

<!-- İkinci sayfamız bitiş -->

</body>

</html>

Örnek  2-0 görünüm biçimi.

Örnek  2-0 ikinci sayfa görünüm biçimi.

Dikkat ederseniz data-role="page" niteliği olan iki section tag’imizden sadece ilki göründü. JQuery Mobile otomatik olarak bir HTML sayfası içerisinde yer alan birden fazla data-role="page" niteliğindeki tag’lerden sadece ilkini görüntüler. İlk section tag’imiziçerisinden a tag’inin href niteliği ile ikinci section tag’imize çağrıda bulunduğumuzda JQuery Mobile mobil tarayıcımızda ikinci bir sayfa olarak görüntüleme yapar. İkinci sayfamızda bizim yazmadığımız fakat kendiliğinden beliren bir navigasyon butonu yer almakta, bunu JQuery Mobile kendisi sayfalarımızda herhangi bir yönlendirme olduğunda otomatik olarak sayfamıza eklemektedir. Bir sayfadan diğerine geçişlerde istersek birbirinden farklı efektler uygulayabiliriz. Bunun için yapmamız gereken tek şey a tag’imize data-transition niteliğini eklememiz. Bu niteliğe uygulayabileceğimiz efekt listesi.

slide

Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda soldan sağa, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise sağdan sola sayfalarımızı kaydırarak getirir. Eğer sayfalarımızdaki a taglarımıza herhangi bir data-transition belirtmezsek sayfamızda varsayılan olarak bu efekt kullanılır.

slideUp

Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda aşağıdan yukarı, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise yukarıdan aşağı sayfalarımızı kaydırarak getirir.

slideDown

Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda yukarıdan aşağı, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise aşağıdan yukarı sayfalarımızı kaydırarak getirir.

pop

Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda içeriden dışarı doğru büyüyerek, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise dışarıdan içeri doğru küçülerek sayfalarımızı getirir.

fade

Sayfalarımız içerisinde herhangi bir link’e veya navigasyon butonuna  tıkladığımızda soldurarak sayfalarımızı getirir.

flip

Sayfalarımız içerisinde herhangi bir link’e veya navigasyon butonuna  tıkladığımızda çevirerek sayfalarımızı getirir.

İkinci örneğimizde yer alan a tag’imize bir efekt uygulamak istersek kod bloğumuz aşağıdaki gibi düzenlenmelidir.

<a href="#ikincisayfa" data-transition="fade">İkinci sayfaya git</a>

Yukarıda belirtilen tablodaki sayfa geçiş efektlerimizi daha eğlenceli bir hale getirmek için açılan sayfalarımızı köşeleri yuvarlanmış bir dialog penceresi içinde de gösterebiliriz. Bunun için yapmamız gereken tek şey a tag’imize data-rel niteliğini eklemektir. İşin eğlenceli yani ise her bir efekt sayfamızda açılacak olan dialog penceresi için farklı geçişler sağlayacaktır.  Sayfamızda data-transition niteliğini kullanmadan dialog penceresi içerisinde sayfamızı görüntülemek istediğimizde varsayılan efekt olarak “pop” efekti uygulanacaktır. İkinci örneğimizde yer alan son sayfamızı bir dialog penceresi içerisinde göstermek istersek kod blogumuz aşağıdaki gibi düzeltilmelidir.

<a href="#ikincisayfa" data-rel="dialog" data-transition="flip">İkinci sayfaya git</a>

Örnek  2-0 ikinci sayfa dialog görünüm biçimi.

Temalar

Şimdiye kadar geliştirmiş olduğumuz uygulamalarda hep aynı temayı kullandık (siyah) oysa JQuery Mobile bizlere birden fazla hazır temayı basit bir biçimde kullanım için sunmaktadır. JQuery Mobile’ın şu ana kadar geliştirmiş olduğu beş adet hazır teması bulunmaktadır. Tabii ki bu beş tema dışında bizler de kendimize ait yeni temalar geliştirebiliriz. Uygulamalarımızda temaları bütün bir sayfamıza uygulayabildiğimiz gibi sayfamızda yer alan header, content, footer veya diğer  tag’lerimize de ayrı ayrı uygulayabiliriz. Hazır durumda kullanabileceğimiz temalar aşağıda listelenmiştir.

Renk

Renk Kodu

Siyah

a

Mavi

b

Gri

c

Gri ve Beyaz

d

Sarı

e

Geliştirmiş olduğumuz uygulamalarımıza yeni temalar atamak için data-theme niteliğini kullanmamız yeterlidir. Uygulamalarımız içerisinde tema kullanmazsak varsayılan olarak siyah (a) temasını kullacaktır.

<div class="header" data-role="header" data-theme="b" ><h1>Header alanımız</h1></div>

Örnekte header alanına mavi renkli temayı uyguladık.

Dialog Kutuları

Vazgeçilmezlerden olan dialog kutularının kullanımı da jQuery Mobile’da oldukça basit. Dialog kutusuna çevirmek istediğimiz nesneye data-rel="dialog" uygulayarak o nesneyi bir dialog kutusuna çevirmiş oluruz. Ayrıca data-transition özelliği ile slideup, pop, flip gibi efektler de uygulayabiliriz.

<p><a href="#Dialog" data-rel="dialog" data-transition="slideup">Dialog</a></p>
Tarih:
Hit: 449633
Yazar: KopukKopca



Yorumlar

Yorum yapabilmek için üye girişi yapmalısınız.

Yorumlar

pesimistzombie tarafından yazıldı. Tarih: 10/Ağu/16 01:17
mobile jquery fazla tutulmadı ve çok hantal hala daha günümüzde xhtml + saf javascript kullanılıyor mobil sitelerde. Bununla beraber çeşitli front-end çalışmalar var daha başarılı olarak jquery altyapılı. Kısaca jquery mobiledan uzak durmakta yarar var.