jQuery Mobile Framework Kullanımı

Uzun bir süre önce çektiğim dersleri yeniden yükledim.. Bu dersler ile projelerinizin mobil versiyonlarını hazırlayabilirsiniz.. Bunu jQuery Mobile Framework’ünü kullanarak kolayca yapabiliyorsunuz, zaten dersleri incelediğinizde ne kadar kolay olduğunu anlayacaksınız 🙂 Yararlı olması dileğiyle.

Giriş Dersi;

Veri alışverişi için kullandığımız data’ların niteliklerini bu bölümde inceleyeceğiz.. Yazı olarak türkçeleştirdiğim dökümanıda sizler için ekliyorum;

Button (data-role=”button”)

data-corners = ovallikleri ayarlamamızı sağlar.. Sabit değeri true’dur.. Ve true | false değerleri alabilir.. False değeri aldığında ovallikler kalkacaktır.
data-icon = Nesneye bazı belli başlı ikonları atamamızı sağlar.. Bu niteliğe değer olarak şunları girebiliriz; (home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search)
data-iconpos = Nesneye uygulanan ikonun pozisyonunu belirler.. Alabileceği değerler (left | right | top | bottom | notext)’dir.. Sabit değeri left’dir.. Ve notext olarak belirlendiğinde nesnede sadece ikon kalacaktır.. Adı üstünde metinsiz = no text 🙂
data-iconshadow = Nesneye uygulanan ikonun gölgesinin varolup olmayacağını belirliyoruz.. Sabit değeri true’dur. Alabileceği değerler (true | false)’dur. False değerini uyguladığınızda birşey değişmiyormuş gibi gelebilir ilk etapta, o yüzden ikona yakınlaşın ve dikkatlice bakın gölgenin gittiğini göreceksiniz 🙂
data-inline = Bu nitelikle nesneyi blok seviyesinden satıriçi (inline) seviyesine getiriyoruz.. Yani nesnenin genişliği içerdiği içeriğe bağlı olarak artıp, azalıyor.. Sabit değeri false’dır.. Alabileceği değerler ise (true | false).. True değeri belirlendiğinde nesne satıriçi hale gelir.
data-shadow = Nesnenin gölgesinin varolup olmayacağını belirleriz.. Sabit değeri true’dur. Alabileceği değerler ise (true | false)..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise c’dır.

Checkbox (data-role gerektirmez)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
Not: Tipi checkbox olması yetmiyor inputun.. Ayrıca id’si olmalı ve bu id’ye ait labeli oluşturulmalı.. Örnek verecek olursam;

<input type="checkbox" id="prototurk" />
<label for="prototurk">Kuralları Kabul Et</label>

Collapsible (data-role=”collapsible”)

data-collapsed = Açılır içeriğin otomatik olarak açık gelip gelmeyeceğini bu nitelik ile belirleriz.. Sabit değeri true’dur.. Yani bunun anlamı içerik kapalı gelsin tıklandığında açılsındır kısaca 🙂 False yaparsak açık gelecektir.. Tıklandığında yine kapanabilme özelliği var. Alabildiği değerler (true | false)
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-content-theme = Nesnenin kapalı olan içeriğinin temasını değiştirmek için kullanılır.. Yani tıkladığımızda açılacak olan nesnenin teması 🙂 Alabileceği değerler data-theme niteliğindekiler ile aynıdır. (a | b | c | d | e)..

Collapsible set (data-role=”collapsible-set”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-content-theme = Nesnenin kapalı olan içeriğinin temasını değiştirmek için kullanılır.. Yani tıkladığımızda açılacak olan nesnenin teması 🙂 Alabileceği değerler data-theme niteliğindekiler ile aynıdır. (a | b | c | d | e).. (Ufak bir hatırlatma yapayım bunu ayarladığınızda birşey değişmiyorsa daha önce siz collapsible’da tema atadığınızdan olabilir)

Dialog (data-role=”page” için data-rel=”dialog”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
(Birkaç niteliği daha var.. Ancak çalışmadığı ya da henüz ben çalıştıramadığım için eklemedim.. Bunlara jquerymobile.com’da docs bölümünden bakabilirsiniz.)

Content (data-role=”content”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Field container (data-role=”fieldcontain”)

label ile form elemanlarının yanyana dizilmesini sağlar.

Flip toggle switch (data-role=”slider”)

Bu nitelik select tagına uygulanıyor..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-track-theme = Select’deki değer değiştikten sonraki kısmın rengini belirler.. Alabileceği değerler data-theme ile aynıdır.

Footer (data-role=”footer”)

Adının evrenselliğinden bileceğiniz gibi sayfanın en altını temsil eder 🙂
data-id = Benzersiz bir kimlik atayıp düzenlemek isterseniz bu niteliği kullanabilirsiniz.
data-position = Footer’ın pozisyonunu belirler.. Tek bir değeri vardır oda fixed’dır.. Yani içerik kaysa bile footerın altta sabit kalmasını sağlar..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Header (data-role=”header”)

Adının evrenselliğinden bileceğiniz gibi sayfanın en üstünü temsil eder 🙂
data-position = Header’ın pozisyonunu belirler.. Tek bir değeri vardır oda fixed’dır.. Yani içerik kaysa bile headerın üstte sabit kalmasını sağlar..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Link (data-role=”button”)

data-ajax = Bu değer sabit olarak true’dur.. Eğer false atanırsa ajax etkileşimi duracaktır.. Normal bir link gibi sayfa yenilenerek geçiş yapılacaktır. Alabileceği değerler (true | false)
data-rel = Bu nitelik 3 değer alır.. Bunlar (back | dialog | external).. “back” yazılırsa bir önceki sayfaya geri döndürme linki oluşturmuş oluruz.. “dialog” yazılırsa açılacak linki dialog penceresinde açtırmış oluruz.. “external” yazılırada herhangi bir dış bağlantıya gideceğimizi belirtiriz 🙂
data-transition = Veri geçişi anlamına gelen bu nitelik ile sayfalar arası nasıl geçiş yapacağımızı belirliyoruz.. Alabileceği değerler (slide | slideup | slidedown | pop | fade | flip).. Sabit değeri slide’dır.

Listview (data-role=”listview”)

Adındanda anlaşılacağı üzere bu nitelik listeler içindir.
data-dividertheme = Listeleri bölen başlık olarak belirlenmiş (data-role=”list-divider”) listelerin temasını değiştirmek için kullanılır. Alabildiği değerler (a | b | c | d | e)..
data-filter = Listelerde filtreleme yapmak istersek bu niteliğe true değerini verebiliriz.. Böylece bir arama kutusu belirir ve burada filtreleyerek listelerde arama yapabiliriz.
data-filter-placeholder = filtrelemek için çıkan arama kutusunun default yazısını değiştirir.. placeholder niteliğini bilenler bilecektir 🙂
data-filter-theme = filtremele için çıkan arama kutusunun temasını değiştirmek için kullanılır.. Alabileceği değerler tahmin ettiğiniz gibi (a | b | c | d | e)..
data-inset = Türkçe karşılığını ifade ediyormu bilmiyorum ama true değerini verirseniz listenizi adam ediyor diyebiliriz 🙂 margini ayarlıyor, köşeleri yuvarlıyor, kutunuza gölge veriyor vs…
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Listview

Adındanda anlaşılacağı üzere bu nitelik listeler içindir. Sadece li tagları için daha doğrusu 🙂
data-role = li taglarında başlık yapmak istediğimize bu niteliği atayıp değer olarakda list-divider yazarız..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Page (data-role=”page”)

data-overlay-theme = sayfa dialog ile açıldığında sayfanın temasını belirleyebiliriz.. Alacağı değerler (a | b | c | d | e)
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-title = Dialog ile sayfa açıldığında title’ı dinamik olarak değiştirmek için kullanılır.. Başlık girilir değer olarak 🙂

Radio button (type=”radio”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Select

data-icon = Select’in ikonunu değiştirmek için bu niteliği kullanırız.. Alabileceği değerler (home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search)
data-iconpos = İkonun pozisyonunu belirlemek için bu niteliği kullanırız.. Alabileceği değerler (left | right | top | bottom | notext).. Sabit değeri right’dır.
data-inline = Select’i blok seviyesinden satıriçi (inline) seviyesine getirmek için bu niteliğe true değerini vermemiz yeterlidir.. Böylece selectin genişliği içerdiği içerik kadar olacaktır. Aldığı değerler (true |false).. Sabit değeri false’dır.
data-native-menu = Select’e bastığımızda açılan kısmı menü şeklinde göstermek istersek bu niteliğe false değerini atamamız gerekir.. Alabileceği değerler (true | false).. Sabit değeri ise true’dur.
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Slider (type=”range”)

Ve işte input slider 🙂 iPhone’de sıkça kullanılan bir form elemanı bilirsiniz.. İnput’un type niteliği range olmalıdır. Ayrıca value, min ve max nitelikleride belirlenmelidir.. Kod;

<input type="range" name="slider" value="60" min="0" max="100" />

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-track-theme = slider’ın arka kısmının temasını ayarlamak için kullanılır. Alacağı değerler data-theme ile aynıdır.

Tema Yapımı;

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery Mobile Framework Kullanımı” üzerine 33 yorum

  1. peki bunu elimizdeki mevcut tarasıma nasıl uygularız 🙂 yani birde mobile için ayrı tasarım mı yapmamız gerekiyor.

  2. Hıımm anladım yani bir web sitesi yaptıysak eğer mobile olmasını istiyorsak mobile tasarımını farklı yapıcaz fakat telefon yada ıpad ile giriş yapıldığında otomatik algılama olayı soru işareti kaldı şimdide 🙁

  3. teşekkürler ders icin… uzun zamandır ben android surumleri icin jquery mobile kullanmak istiyordum. bu da vesile oldu… fakat birde o word belgesini de siteye koymus olsaydın daha iyi olacaktı … en azından üç aşagı beş yukarı bakardık o kodlamalara da …

  4. inşallah yakın zamanda tekrar yazıp kaynak dosya olarak eklerim, teşekkürler.

  5. Tayfun bey dersler için teşekkürler
    inş derslerin devamı gelir ve Phone gapla ilgili de çalışma yaparsanız seviniriz

  6. Güzel anlatım olmuş. Çok faydalandım.
    Elinizdeki word dosyasını siteye ekleme şansınız yok mu acba?

  7. @Dursun TAŞ, orjinal dosyayı bulamadım ancak gerekli açıklamayı konuya dahil ettim.

  8. @Murat TAŞTAN, kısmen yeterli.. Responsive işlemi için js, jquery ve css kullanılabilir.. Ben css derslerinde işin css'e düşen kısmını anlatacağım.

  9. Müthiş yararlı çalışmalar. çok teşekkür ederim. Muhammed Said'e katılıyorum, phonegap içinde bir örneklendirme yaparsanız tadından yenmez 🙂 ve birde, bu jquery mobile da panel tarzı kullanımı olan birşeyler var mıdır? Xml ile çalışmak mümkün müdür? Vee Splash screen i nasıl yapabiliriz 🙂

    Teşekkürler,

    Başarılar, iyi çalışmalar..

  10. @Burak, panel derken hocam? Panel yapmak istiyorsan aynı mantıkta yapabilirsin.. XML, jSon artık ne ile çalışacaksan 🙂 Hiç farketmez. Splash screen olayınıda anlayamadım?

  11. Gayet anlaşılır , gayet öğretici ve eğlenceli bir anlatım. Benim gibi jQuery Mobile başlayanlar için en ideal ilk adım bence. Teşekkür ederim fakat dersler devam ederse çok memnun olurum 😀 YouTube kanalını takip ediyorum jQuery dersleri ve konu anlatımlarını gün gün fakat birşey sorabilir miyim ? jQuery kodları mantıken jQuery Mobile içinde çalışmaz mı? Günlerdir uğraşıyorum çıkaramadım da. Şimdiden teşekkürler..

  12. @Serbay ACAR, elbette çalışır. Ancak nerede ne yapacağına bağlı bir durum biraza.

  13. çok keyifli ve anlaşılır bir şekilde anlatmışsınız. çok teşekkürler.

  14. merhaba ben jQuery hiç bilmyorum ödevim jQuery de web sitesi yapma ben tasırımını yaptım ama programda ne için ne kulllanacagımı bılmıyorum örnegin buton yapacagım bunun icin ne kulllanmam gerekıyor yardıcı olur musunuz

    1. jquery ile web sitesi yapmak diye bir şey yoktur. web sitesinin ön yüzünü html/css ile arkayüzünü herhangi bir programlama dili ile yaparsınız. Yani jQuery olmadan da web sitesi yapılabilir önce buna bir netlik getirelim. Sizin ne yapmak istediğinizi öğrenebilirsem belki yardımcı olabilirim.

  15. S.a jquery mobil üzerinden kendi capimda amatör bir mobil site gibi bir sey olusturmak istedim. Fakat film yayinlamaya kalktigimda mp4 formatinda beceremedigim icin direk vk.com gibi sitelerden html kaynak kodlari ile kopyala yapistir yaparak filmleri yerlestirmeyi basardim. Bu seferde filmi actigimde sayfada geri buttonuna basinca yada farkli bir sayfaya gectigimde videonun calismasi devam ediyor ve sesler geliyor kapanmiyor. Bir nevi sayfa kendini yenilemeden direk geri dedigimde sonraki menüye geciyor. Videoyu actigim bölüme geldigimde kendini kapatmamis hala calisir vaziyette oldugunu görüyorum. Uzun lafin kisasi ben sayfadan ayrildigimda nasil geride kalan sayfadaki video kendini otomatikmen kapatir. Arastirmalar yaptim bir cok kisi bu konuda sikayetci, ama sonucu yazan göremedim. Daha cok yeniyim sizin sayenizde bir seyler ögrenmeye ve yapmaya calisiyorum. Simdiden tesekkür ederim.

    1. Küçük bir eklenti hazırlamak lazım önce;

      jQuery.fn.refresh = function(){
          var current = $(this).html();
          $(this).html( current );
          return this;
      }

      Daha sonra örneğin başka bir linke tıkladığında bunu jquery ile yakala;

      $('a').on('click', function(){
          // kodlar
      });

      ve yenilemek istediğin divi refresh ettir;

      $('a').on('click', function(){
          $('#player').refresh();
      });
  16. öncelikle cok tesekkür ederim gösterdiginiz ilgi icin
    Yapmayi deneyecegim umarim becerebilirim.
    Bu konu üzerine dilerim bir video cekip youtube da yayinlarsiniz benim gibi bir cok amatör kisi bu konuda takilip kalmis:)

  17. Selamlar,
    Öncelikle çok teşekkür ederim çok yararlı bir ders olmuş.
    ben birşey sormak istiyorum. bu mobile sitesine logo eklediğimiz zaman onu nasıl otomatik ölçeklendirebiliriz. css te çeşitli şekillerde denedim ama yapamadım. yardımız için şimdiden teşekkürler.

  18. tayfun hocam gayet başarılı bir çalışma elinize sağlık 🙂 çok teşekkürler.. 🙂

  19. Yine yardımın yetişti. 🙂 Hemşehrim Kardeşime, İstanbul’dan selamlar.

  20. Merhaba bu html ile yazdığımız kodları yaptığımız mobil siteyi apk olarak kaydedip yayınlıyabiliyor muyuz

  21. @Besim Öznalçin, APK olarak yayınlamak için ya Hybrid ya da Native uygulama yapmanız gerekiyor. Native yapmak zor ve zahmetli, ancak Hybrid uygulamaları html-css-javascript ile yapmak mümkün. Bunun için PhoneGap’e bir gözatın.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir