Rakkoc.Com Recep Akkoç / Rakkocun Yazıtları

11Mar/120

JQuery Mobil ile Geliştirilmiş 15 Mobil Site Örneği

Merhaba sevgili okurlarim,

Mobile cihazlarla uyumlu olarak gelistirilmis jquerymobile kutuphanesini incelemeye devam etmekteyim. Nerler yapilabildigini kendi sitesinden goruyor okuyorum ama millet neler yapiyor bunlari gormek istedim.

JQuery Mobile bütün popüler mobil cihazları destekleyen, dokunmatik ekranlar için optimize edilmiş bir framework. Alt yapısında JQuery ve JQuery UI framework’lerini kullanan JQuery Mobile kullanıcı arabirimi olarak HTML5 üst yapısını kullanıyor ve bu biz programcılar acısından cok zevkli olyuor 🙂

Piyasada tanitilan 15 siteyi ekliyecegim alta ama ondan once Jquery mobile ile kodlanmis ve kodlanmasinin her adiminini gordugum cok kisa bir surede hazirlanmis olan microsoft  sharepoint ile senkron calisan m.turkcell.com.tr sitesini koymak koyuyorum (ekran resmi elimde yok diye sadece onlarinda jquery mobile kullandigini bildirmek istedim)

1. Obama 2012

Barack Obama’nın sitesinin mobil versiyonu.

2. Box.net

Box.net’in mobil versiyonu. Kolayca dosya paylaşımını ve dosyalarınıza erişmenizi sağlıyor.

3. Slideshare

Sunu paylaşımında dünyanın en büyük topluluğu olan Slideshare’ın mobil versiyonu.

4. OpenTable

OpenTable’ın masa rezervasyonunu mobil ortama taşıyan sitesi.

5. Sea-Doo

Sea-Doo tekneleri/deniz taşıtlarının mobil sitesi.

6. Moulin Rouge

Dünyanın en ünlü gece kulübünün mobil sitesi.

7. LIFE

LIFE.com, Profosyonel fotoğrafçılığın en büyük topluluğu olan life.com’un mobil versiyonu.

8. Stedesign

Web tasarımcı Stefano Tirloni’nin mobil portfolyosu.

9. BBC Radio 1

BBC Radyonun mobil versiyonu.

10. Woos

İlginç insanlar ve yerler.

11. Zaarly

Alıcı ile satıcıyı gerçek zamanlı olarak buluşturan Zaarly’nin mobil sitesi.

12. Sears

Sears’ın mobil sitesi.

13. Yasalam

Körfez bölgesinin en büyük kent festivali olan Yasalam’ın mobil sitesi.

14. Abu Dhabi Ocean Racing

Abu Dabi okyanus yarış takımının mobil sitesi.

15. junkyard.se

Kaykay, snowboard ve sokak giyim perakendecisi olan Junkyard’ın mobil sitesi.

10Mar/120

Jquery mobile 2. sayfa – Jquery mobile çoklu sayfa örneği

Merhaba arkadaslar;

daha önce sizinle jquery mobile giris dersini paylaşmıştım şimdide çoklu sayfa örneği paylaşmak istedim. örnegin kodlarını sunmadan önce size görüntüsünü ve calışan linkini vermek istedim.

Link : http://rakkoc.com/jquerymobile/coklusayfa.htm

kodlar :

<html> 

 <head> 

  <title>Mobile Jquery Örneği</title> 

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

  <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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>

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>