Forum
Aktif konular
Üyeler
Kurallar
Arama
Jquery Mobile Giriş Jquery Mobile Giriş
-
Ş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.
ilk örneğimiz
< ="text/" ="http://code.jquery.com/jquery-1.4.3.min.js">
< ="text/" ="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js">
Header alanımız
İlk sayfamız
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.
Header alanımız
İlk sayfamız
Footer alanımız
Ö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
ilk örneğimiz
< ="text/" ="http://code.jquery.com/jquery-1.4.3.min.js">
< ="text/" ="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js">
Header alanımız
İlk sayfamız
İkinci sayfaya gitFooter alanımız
Header alanımız
İkinci sayfamız
Footer alanımız
Ö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.
İkinci sayfaya git
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.
İkinci sayfaya git
Ö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.
data-theme="b">Header alanımız
Ö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.
-
resimler ortada yok dayı .
bi el at istersen
-
Hacı uğraşıyorum ama yapamadım editörler bi el atabilirler mi ?? ayrıca kodlarda piyasada yok :(
-
sen konuyu komple pastebin.com a yaz :)
biz oradan okuyalım
-
Twitter bunu yazdı:
-----------------------------sen konuyu komple pastebin.com a yaz :)
biz oradan okuyalım
-----------------------------Burdan oku : http://www.recepselli.com/jquery-mobile-giris-Yazisi/171.aspx
-
Hocam mobiledan baglandgni anlayan bir kod paylasabilir misin
-
Mobil için ülkemizde internet paketleri hala mb oranlarındayken JQuery Mobile alt yapısında bir site tasarlamak intihar demektir. Sadece akıllı telefonlar için mobil tasarımı JQuery Mobile ile yapmak intihar x 2 demektir.
@ZoRKaYa http://detectmobilebrowsers.com/
-
pesimistzombie bunu yazdı:
-----------------------------Mobil için ülkemizde internet paketleri hala mb oranlarındayken JQuery Mobile alt yapısında bir site tasarlamak intihar demektir. Sadece akıllı telefonlar için mobil tasarımı JQuery Mobile ile yapmak intihar x 2 demektir.
@ZoRKaYa http://detectmobilebrowsers.com/
-----------------------------sebeb ? Açıklama yapar mısın yani turkcell alt yapısı bana sorarsan gayet iyi ve jquery mobile ilede gayet iyi işler çıkarıyorlar
-
Hocam sebep aramaya gerek yok bir 6300 ile bir de androidli bir telefon ile giriş yap aynı siteye sebebi görebilirsin :) her telefon için ayrı ayrı alt yapı ve arayüz hazırlamaktansa mobile xhtml arayüzü ile yazar geçerim siteyi. Ufacık bir gif yüzünden mb bitiyor, telefon kilitleniyor diye arkamızdan söven insanlar, hala renksiz ekran c55 kullanarak nete giren insanlar var ve bunlar azımsanamayacak kadar aktif kullanıcılar.
12 senedir mobil telefonlar için sohbet siteleri hazırlıyorum jQ mobile geçmeyi ben de istiyorum ancak jQ mobile geçtiğim an anca yeni nesil telefonları kullanan 3 5 kullanıcıyla sinek avlıyor olurum. Daha 1 2 senesi var bana kalırsa o nedenle sıcak bakmıyorum henüz.
-
şu jquery dedikleri nedir hocam html - php gibi birşey mi yoksa css gibi birşey mi yoksa apayrı birşey mi?
-
tahag bunu yazdı:
-----------------------------şu jquery dedikleri nedir hocam html - php gibi birşey mi yoksa css gibi birşey mi yoksa apayrı birşey mi?
-----------------------------javascriptin hazır bi kütüphanesi hocam güzel görsel efectli şeyler falaz hazırlıyorsun kolaylıkla
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla