[COLOR=Red]Button (data-role="button")[/COLOR]
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.
[COLOR=Red]Checkbox (data-role gerektirmez)[/COLOR]
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;
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)..
[COLOR=Red]Collapsible set (data-role="collapsible-set")[/COLOR]
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)
[COLOR=Red]Dialog (data-role="page" için data-rel="dialog")[/COLOR]
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.)
[COLOR=Red]Content (data-role="content")[/COLOR]
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.
[COLOR=Red]Field container (data-role="fieldcontain")[/COLOR]
label ile form elemanlarının yanyana dizilmesini sağlar.
[COLOR=Red]Flip toggle switch (data-role="slider")[/COLOR]
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.
[COLOR=Red]Footer (data-role="footer")[/COLOR]
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.
[COLOR=Red]Header (data-role="header")[/COLOR]
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.
[COLOR=Red]Link (data-role="button")[/COLOR]
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.
[COLOR=Red]Listview (data-role="listview")[/COLOR]
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.
[COLOR=Red]Listview[/COLOR]
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.
[COLOR=Red]Page (data-role="page")[/COLOR]
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 :)
[COLOR=Red]Radio button (type="radio")[/COLOR]
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.
[COLOR=Red]Select[/COLOR]
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.
[COLOR=Red]Slider (type="range")[/COLOR]
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;
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.
Kaynak: http://www.prototurk.com/jquery-mobile-framework-e-giris.html
