jQuery Mobile Data Özellikleri

jQuery Data Özellikleri

jQuery Mobile, mobil cihazlar için "dokunmayı dostu" güzel bir görünüm oluşturmak için HTML5 data-* özelliklerini kullanır.

Aşağıdaki referans listesinde, kalın değerler varsayılan değerleri belirler.

Button

data-role="button" ile etiketlenen bağlantılar. Araç çubuğundaki düğme elementleri ve bağlantılar ile girdi alanları, düğme tarzı otomatik olarak ayarlanır, data-role="button" gerekmez.

Data Özellikleri Değer Açıklama
data-corners true | false Düğmenin yuvarlak köşeleri olup olmadığını belirleyin.
data-icon Ikons Reference Düğmenin ikonunu belirleyin. Varsayılan olarak, hiçbir ikon yoktur.
data-iconpos sol | sağ | üst | alt | notext İkonun konumunu belirtir.
data-iconshadow true | false Düğme ikonunun gölgesi olup olmadığını belirleyin.
data-inline true | false Düğmenin satır içinde olup olmadığını belirleyin.
data-mini true | false Düğmenin küçük olup olmadığını belirleyin.
data-shadow true | false Düğmenin gölgesi olup olmadığını belirleyin.
data-theme harf (a-z) Düğmenin temel rengini belirleyin.

İpucu:Birden fazla düğme birleştirmek için, düğmeleri belirlemek için data-role="controlgroup" ve data-type="horizontal|vertical" özelliklerine sahip bir konteyner kullanın.

Checkbox

label ve type="checkbox" olan input çiftler halinde gelir. Otomatik olarak düğme tarzı olarak ayarlanır, data-role gerekmez.

Data Özellikleri Değer Açıklama
data-mini true | false Onay kutusunun küçük ebatlı mı geniş ebatlı mı olacağını belirler.
data-role none jQuery Mobile'nın onay kutusunu düğme tarzı olarak ayarlamasını önler.
data-theme harf (a-z) Onay kutusunun temel rengini belirler.

İpucu:Birden fazla onay kutusunu bir araya getirmek için data-role="controlgroup" ve data-type="horizontal|vertical" kullanarak yatay mı dikey mi olacağını belirleyin.

Collapsible

Başlık öğesi, bu öğenin ardından data-role="collapsible" özelliğine sahip konteyner içindeki herhangi bir HTML işareti.

Data Özellikleri Değer Açıklama
data-collapsed true | false İçerik kapanmalı mı açılmalı mı olacağını belirler.
data-collapsed-icon Ikons Reference Küçük ebatlı butonun simgesini belirler. Varsayılan "plus"dır.
data-content-theme harf (a-z) Küçük ebatlı içeriğin temel rengini belirler. Ayrıca küçük ebatlı içeriğe kenarlıklar ekler.
data-expanded-icon Ikons Reference İçerik açıldığında küçük ebatlı butonun simgesini belirler. Varsayılan "çıkıntı"dır.
data-iconpos sol | sağ | üst | alt İkonun konumunu belirtir.
data-inset true | false Küçük ebatlı butonun kenarlıklarını ve dış kenar boşluklarını sahip olup olmayacağını belirler.
data-mini true | false Küçük ebatlı mı geniş ebatlı mı olacağını belirler.
data-theme harf (a-z) Küçük ebatlı butonun temel rengini belirler.

Collapsible Set

data-role="collapsible-set" özelliğine sahip konteyner içindeki küçük ebatlı içerik blokları.

Data Özellikleri Değer Açıklama
data-collapsed-icon Ikons Reference Küçük ebatlı butonun simgesini belirler. Varsayılan "artı"dır.
data-content-theme harf (a-z) Küçük ebatlı içeriğin temel rengini belirler.
data-expanded-icon Ikons Reference İçerik açıldığında küçük ebatlı butonun simgesini belirler. Varsayılan "çıkıntı"dır.
data-iconpos sol | sağ | üst | alt | notext İkonun konumunu belirtir.
data-inset true | false Collapsibles'in kenarlıklarını ve dış kenar boşluklarını sahip olup olmayacağını belirler.
data-mini true | false Küçük ebatlı mı geniş ebatlı mı olacağını belirler.
data-theme harf (a-z) Küçük ebatlı koleksiyonların temel rengini belirler.

Content

data-role="content" özelliğine sahip konteyner.

Data Özellikleri Değer Açıklama
data-theme harf (a-z) İçeriklerin temel rengini belirler. Varsayılan "c" dir.

Controlgroup

data-role="controlgroup" özelliğine sahip <div> veya <fieldset> konteyneri. Tek türdeki birden fazla düğme tarzı input'ü (bağlantı tabanlı düğmeler, tek seçenek düğmeleri, onay kutuları, seçim menüleri) bir araya getirir.

Data Özellikleri Değer Açıklama
data-mini true | false Yerleştirme küçük boyutlu mu geniş boyutlu mu olacağını belirler.
data-type yatay | dikey Yerleştirme yöntemini yatay mı dikey mi gösterir.

Dialog

data-role="dialog" olan konteyner veya data-rel="dialog" bağlantısı.

Data Özellikleri Değer Açıklama
data-close-btn-text sometext Sadece diyaloğun kapatma düğmesinin metnini belirler.
data-dom-cache true | false Bireysel sayfalar için jQuery DOM önbelleğini temizlemeyi belirler (eğer true olarak ayarlanırsa, DOM yönetimine dikkat edilmesi ve tüm mobil cihazlarda tamamen test edilmesi gerekir).
data-overlay-theme harf (a-z) Konuşma sayfasının arka plan (arka) rengini belirleyin.
data-theme harf (a-z) Diyalog sayfasının temel rengini belirler.
data-title sometext Diyalog sayfasının başlığını belirler.

Enhancement

data-enhance="false" veya data-ajax="false" özellikleri olan konteyner.

Data Özellikleri Değer Açıklama
data-enhance true | false Eğer "true" olarak ayarlanırsa (varsayılan), jQuery Mobile sayfaya stil ekler ve mobil cihazlara daha uygun hale getirir. Eğer "false" olarak ayarlanırsa, çerçeve sayfanın stillerini ayarlamaz.
data-ajax true | false Sayfanın AJAX ile yüklenip yüklenmeyeceğini belirler.

Açıklama:data-enhance="false", örneğin $.mobile.ignoreContentEnabled=true ile kullanılır, jQuery Mobile'nin otomatik olarak sayfa stilleri eklemesini önler.

When $.mobile.ignoreContentEnabled is set to true, any links or form elements in containers with data-ajax="false" are ignored by the framework's navigation functionality.

Fieldcontainer

label/form element çiftlerinin data-role="fieldcontain" konteynerini sarar.

Sabit Araç Çubuğu

data-role="header" veya data-role="footer" özellikleri ve data-position="fixed" özelliği olan konteyner.

Data Özellikleri Değer Açıklama
data-disable-page-zoom true | false Kullanıcının sayfayı büyütebilme yeteneği belirler.
data-fullscreen true | false Araç çubuğunun her zaman üstte veya altta olup olmadığını belirler.
data-tap-toggle true | false Kullanıcının araç çubuğunun görünürlüğünü tıklama/çıkışla değiştirebilme yeteneği belirler.
data-transition slide | fade | none Tıklama/çıkışta geçiş efekti belirler.
data-update-page-padding true | false resize, transition ve "updatelayout" olayları olduğunda sayfanın üst, alt ve iç dolgu mesafelerini günceller (jQuery Mobile, iç dolgu mesafelerini "pageshow" olayı olduğunda günceller).
data-visible-on-page-show true | false Ana sayfa gösterilirken araç çubuğunun görünürlüğünü belirler.

Yan Yana Geçiş Düğmesi

data-role="slider" özelliğine sahip bir <select> elementi ve iki <option> elementi.

Data Özellikleri Değer Açıklama
data-mini true | false Açıklayıcı, küçük veya normal boyutta mı olacağını belirtir.
data-role none jQuery Mobile'nın düğme tarzı olarak düğme geçişlerini ayarlamasını önler.
data-theme harf (a-z) Düğme geçişinin temel rengi belirtir.
data-track-theme harf (a-z) Kanalın temel rengi belirtir.

Alt

data-role="footer" özelliğine sahip konteyner.

Data Özellikleri Değer Açıklama
data-id sometext Tekil ID belirtir. Sabit altlıklar için gereklidir.
data-position inline | duraş Sayfa altının sayfa içeriği ile yatay ilişki içinde mi kalacağını, yoksa altta mı kalacağını belirt.
data-fullscreen true | false Sayfa her zaman altta kalır ve sayfa içeriğini kaplar (azca şeffaf).
data-theme harf (a-z) Sayfa altının temel rengi. Varsayılan "a".

Açıklama:Tam ekran konumunu etkinleştirmek için data-position="duruş" kullanın, ardından bu elemente data-fullscreen özelliğini ekleyin.

Başlık

data-role="header" özelliğine sahip konteyner.

Data Özellikleri Değer Açıklama
data-id sometext Tekil ID belirtir. Sabit başlıklar için gereklidir.
data-position inline | duraş Sayfa başlığının sayfa içeriği ile yatay ilişki içinde mi kalacağını, yoksa üstte mi kalacağını belirt.
data-fullscreen true | false Sayfa her zaman üstte kalır ve sayfa içeriğini kaplar (azca şeffaf).
data-theme harf (a-z) Sayfa başlığının temel rengi. Varsayılan "a".

Açıklama:Tam ekran konumunu etkinleştirmek için data-position="duruş" kullanın, ardından bu elemente data-fullscreen özelliğini ekleyin.

Bağlantı

Tüm bağlantılar, data-role="button" bağlantıları ve form gönderme düğmeleri de dahil.

Data Özellikleri Değer Açıklama
data-ajax true | false Sayfanın AJAX ile yüklenip yüklenmeyeceğini belirler, kullanıcı deneyimini ve geçişi iyileştirir. Eğer false olarak ayarlanırsa, jQuery Mobile normal bir sayfa istemcisini kullanır.
data-direction ters Geçiş animasyonunu tersine çevir (sadece sayfa veya diyalog için)
data-dom-cache true | false Belirli sayfaların jQuery DOM önbelleğini temizlemek mi yoksa temizlememek mi (eğer true olarak ayarlanırsa, DOM yönetimine dikkat edilmesi ve tüm mobil cihazlarda tam test edilmesi gerekir).
data-prefetch true | false Sayfanın DOM'a önceden alınmasını ve kullanıcı ziyaret ettiğinde kullanılabilir hale gelmesini sağlar.
data-rel geri | diyalog | dış | açılır Bağlantıların nasıl davranacağına dair seçenekleri belirt. Geri - Tarihte bir adım geri git. Diyalog - Sayfayı diyalog olarak aç, tarihte kaydetme. Dış - Başka bir alan bağlantısına. Aç - Açılır pencereyi aç.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Bir sayfadan bir sonraki sayfaya nasıl geçileceğini belirleyin. jQuery Mobile geçişlerine bakın.
data-position-to origin | jQuery selector | window Popup'ın konumunu belirleyin. Başlangıç - Varsayılan. Bağlantısını açarken açılır. jQuery seçici - Belirtilen element üzerinde açılır. Pencere - Pencere ekranının ortasında açılır.

List

data-role="listview" özniteliğine sahip <ol> veya <ul>.

Data Özellikleri Değer Açıklama
data-autodividers true | false Liste öğelerini otomatik olarak ayırmayı belirtir.
data-count-theme harf (a-z) Sayı balonunun ana renkini belirtir. Varsayılan "c"dir.
data-divider-theme harf (a-z) Liste ayraççısının ana renkini belirtir. Varsayılan "b"dir.
data-filter true | false Listeye araştırma çubuğu eklenip eklenmeyeceğini belirtir.
data-filter-placeholder sometext Araştırma çubuğundaki metni belirtir. Varsayılan "Filter items..."dir.
data-filter-theme harf (a-z) Araştırma filtresinin ana renkini belirtir. Varsayılan "c"dir.
data-icon Ikons Reference Listenin simgesini belirtir.
data-inset true | false Listeye yuvarlak köşe ve dış boşluk stilleri eklenip eklenmeyeceğini belirtir.
data-split-icon Ikons Reference Ayırma butonunun simgesini belirtir. Varsayılan "arrow-r"dir.
data-split-theme harf (a-z) Ayırma butonunun ana renkini belirtir.Varsayılan "b"dir.
data-theme harf (a-z) Listenin ana renkini belirtir.

List item

data-role="listview" özniteliğine sahip <ol> veya <ul> içindeki <li>.

Data Özellikleri Değer Açıklama
data-filtertext sometext Filtreleme elementinde aranan metni belirtir. Bu metin, gerçek liste öğesi metni yerine arınır.
data-icon Ikons Reference Liste öğesinin simgesini belirtir.
data-role list-divider Liste öğesinin ayraçğını belirtir.
data-theme harf (a-z) Liste öğesinin ana renkini belirtir.

Açıklama:data-icon özniteliği yalnızca bağlantı içeren liste öğelerine uygulanır.

Navbar

data-role="navbar" özniteliğine sahip konteyner içindeki <li> öğesi.

Data Özellikleri Değer Açıklama
data-icon Ikons Reference Liste öğesinin simgesini belirtir.
data-iconpos sol | sağ | üst | alt | notext İkonun konumunu belirtir.

İpucu:Navigasyon çubuğu, theme-swatch'ı ebeveyn konteynerinden devralır. Navigasyon çubuğuna data-theme özniteliği ayarlamak mümkün değildir. navbar içindeki her bağlantıya ayrı olarak data-theme özniteliği ayarlanabilir.

Page

data-role="page" özniteliğine sahip konteyner.

Data Özellikleri Değer Açıklama
data-add-back-btn true | false Geri butonunu otomatik olarak ekler, sadece başlıkta kullanılır.
data-back-btn-text sometext Geri butonunun metnini belirtir.
data-back-btn-theme harf (a-z) Geri butonunun ana renkini belirtir.
data-close-btn-text harf (a-z) Açık buton metnini belirtir.
data-dom-cache true | false Belirli sayfaların jQuery DOM önbelleğini temizlemek mi yoksa temizlememek mi (eğer true olarak ayarlanırsa, DOM yönetimine dikkat edilmesi ve tüm mobil cihazlarda tam test edilmesi gerekir).
data-overlay-theme harf (a-z) Konuşma sayfasının arka plan (arka) rengini belirleyin.
data-theme harf (a-z) Sayfanın temel rengini belirleyin. Varsayılan olarak "c".
data-title sometext Sayfanın başlığını belirleyin.
data-url url Bu değer, URL'yi güncellemek için kullanılır, sayfa istekleri için kullanılmaz.

Popup

data-role="popup" özelliğine sahip konteyner.

Data Özellikleri Değer Açıklama
data-corners true | false Popup'ın köşelerde yuvarlak olup olmadığını belirleyin.
data-overlay-theme harf (a-z) Popup'ın arka plan (arka) rengini belirleyin. Varsayılan olarak şeffaf arka plan (none) ayarlanır.
data-shadow true | false Popup'ın gölgesi olup olmadığını belirleyin.
data-theme harf (a-z) Popup'ın temel rengini belirleyin. Varsayılan olarak geçerli, "none" olarak şeffaf ayarlanır.
data-tolerance 30, 15, 30, 15 Pencere kenarlarına (top, right, bottom, left) olan mesafeyi belirleyin.

data-rel="popup" özelliğine sahip bağlantılar:

Data Özellikleri Değer Açıklama
data-position-to origin | jQuery selector | window Popup'ın konumunu belirleyin. Origin -Varsayılan. Popup, açan bağlantı üzerinde yer alır. jQuery selector - Popup, belirtilen elemanın üzerinde yer alır. Window - Popup, pencere ekranının ortasında yer alır.
data-rel popup Açılan popup'ları açmak için kullanılır.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Bir sayfadan bir sonraki sayfaya nasıl geçileceğini belirleyin. jQuery Mobile geçişlerine bakın.

Radyo Düğmesi

label ile type="radio" olan input'a karşılık gelenler otomatik olarak düğme tarzı olarak ayarlanır, data-role gerekmez.

Data Özellikleri Değer Açıklama
data-mini true | false Düğmenin küçük mu yoksa normal boyutlu mu olacağını belirleyin.
data-role none jQuery Mobile'yi kullanarak seçenek düğmelerini geliştirilmiş düğmeler tarzında ayarlayın.
data-theme harf (a-z) Seçenek düğmesinin temel rengini belirleyin.

İpucu:Birden fazla seçenek düğmesinin bir araya getirilmesi için data-role="controlgroup" ve data-type="horizontal|vertical" kullanarak düğmelerin yatay mı yoksa dikey olarak bir araya getirileceğini belirtin.

Select

Tüm <select> elementleri. Otomatik olarak düğme stili olarak ayarlanır, date-role gerekmez.

Data Özellikleri Değer Açıklama
data-icon Ikons Reference Select elementinin ikonunu belirtir. Varsayılan "arrow-d"tir.
data-iconpos sol | sağ | üst | alt | notext İkonun konumunu belirtir.
data-inline true | false Select elementinin satır içi olup olmadığını belirtir.
data-mini true | false Select elementinin küçük boyutlu mu yoksa normal boyutta mı olacağını belirtir.
data-native-menu true | false False olarak ayarlanırsa, jQuery'nin kendi özelleştirilmiş seçim menüsünü kullanır (tüm mobil cihazlarda tutarlı bir görünüm için önerilir).
data-overlay-theme harf (a-z) jQuery tarafından tanımlanmış seçim menüsünün temel rengini belirtir (data-native-menu="false" ile birlikte kullanılır).
data-placeholder true | false Doğal select'in <option> elementleri üzerinde ayarlanabilir.
data-role none jQuery Mobile'ı kullanarak select elementini düğme stili olarak ayarlar.
data-theme harf (a-z) Select elementinin temel rengini belirtir.

İpucu:Birden fazla select elementi birleştirmek için data-role="controlgroup" ve data-type="horizontal|vertical" kullanarak bu elementin düzeltik mi olacak şekilde belirleyin.

Slider

type="range" olan input elementi. Otomatik olarak düğme stili olarak ayarlanır, data-role gerekmez.

Data Özellikleri Değer Açıklama
data-highlight true | false Kaydırıcı yuvasının vurgulanıp vurgulanmayacağını belirtir.
data-mini true | false Kaydırıcı küçük boyutlu mu yoksa normal boyutta mı olacağını belirtir.
data-role none jQuery Mobile'ı kullanarak kaydırıcı düğme stillerini yerleştir.
data-theme harf (a-z) Kaydırıcı kontrolü (input, handle ve track) temel rengini belirtir.
data-track-theme harf (a-z) Kaydırıcı yuvasının temel rengini belirtir.

Text input & Textarea

type="text|search|etc." olan input elementi veya textarea elementi. Otomatik olarak stillendirilir, data-role gerekmez.

Data Özellikleri Değer Açıklama
data-mini true | false Input elementinin küçük olup olmadığını belirler.
data-role none jQuery Mobile'yi input/textarea'ın düğme tarzını ayarlamak için yerleştirir.
data-theme harf (a-z) Giriş alanlarının temel renklerini belirler.