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ı;