jQuery Veri Özellikleri
jQuery Mobile kullanan HTML5 data-* öznitelik bir oluşturmak için "touch-friendly" mobil cihazlar için ve çekici bir görünüm.
Aşağıdaki referans listesi için bold value varsayılan değerini belirtir.
düğme
1.4 sürümü kullanımdan kaldırıldı. Kullanım CSS Sınıfları yerine. Ile Köprüler data-role="button" . Araç çubukları ve giriş alanlarında Düğme elemanları ve bağlantılar otomatik düğmeler olarak gerek tarz data-role="button" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-corners | true | false | düğmesi yuvarlatılmış köşeler var ya da değil belirtir |
| data-icon | Icons Reference | düğmenin simgesini belirtir. Standart hiçbir simgedir |
| data-iconpos | left | right | top | bottom | notext | simgesinin konumunu belirtir |
| data-iconshadow | true | false | düğmesi simgesi gölgeleri sahip olmayan veya belirtir |
| data-inline | true | false | düğme satır içi veya olmaması gerektiğini belirtir |
| data-mini | true | false | düğme, küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-shadow | true | false | düğme gölgeleri sahip olmayan veya belirtir |
| data-theme | letter (a-z) | düğmenin teması rengini belirtir |
Grubun birden düğmeler için bir kapsayıcı kullanmak data-role="controlgroup" ile birlikte öznitelik data-type="horizontal|vertical" grup düğmeleri edip yatay veya dikey belirtmek için.
Onay Kutusu
Etiketlerin ve girdilerin çiftleri type="checkbox" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-mini | true | false | Onay kutusu küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-role | none | jQuery Mobile düğmeler gibi stil onay kutularına önler |
| data-theme | letter (a-z) | onay kutusunu teması rengini belirtir |
Grup çoklu onay kutuları için, kullanımı data-role="controlgroup" ile birlikte data-type="horizontal|vertical" grubu, yatay veya dikey olarak onay kutuları olup olmadığını belirtmek için kullanılır.
katlanır
Ile bir kap içinde herhangi bir HTML işaretlemesi ve ardından bir başlık elemanı data-role="collapsible" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-collapsed | true | false | İçerik kapalı veya genişletilmesi gerektiğini belirtir |
| data-collapsed-cue-text | sometext | ekran okuyucu yazılımı ile kullanıcılar için sesli geri bildirim sağlamak için bazı metni belirtir. Standart olan "click to collapse contents" . |
| data-collapsed-icon | Icons Reference | katlanabilir düğmeye simgesini belirtir. Standart olan "plus" |
| data-content-theme | letter (a-z) | katlanabilir içeriğin tema rengini belirtir. Ayrıca katlanabilir içeriğe yuvarlatılmış köşeler ekler misin |
| data-expanded-cue-text | sometext | ekran okuyucu yazılımı ile kullanıcılar için sesli geri bildirim sağlamak için bazı metni belirtir. Standart olan "click to expand contents" . |
| data-expanded-icon | Icons Reference | içerik genişletildiğinde katlanabilir düğmeye simgesini belirtir. Standart olan "minus" |
| data-iconpos | left | right | top | bottom | simgesinin konumunu belirtir |
| data-inset | true | false | katlanabilir düğmesi yuvarlatılmış köşeler ve bazı farkla ya da değil ile tarz gerekip gerekmediğini belirtir |
| data-mini | true | false | katlanabilir düğmeler küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-theme | letter (a-z) | katlanabilir düğmeye tema rengini belirtir |
Katlanır Seti
Bir kap içinde katlanabilir içeriği blok data-role="collapsibleset" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-collapsed-icon | Icons Reference | katlanabilir düğmeye simgesini belirtir. Standart olan "plus" |
| data-content-theme | letter (a-z) | katlanabilir içeriğin tema rengini belirtir |
| data-expanded-icon | Icons Reference | içerik genişletildiğinde katlanabilir düğmeye simgesini belirtir. Standart olan "minus" |
| data-iconpos | left | right | top | bottom | notext | simgesinin konumunu belirtir |
| data-inset | true | false | collapsibles yuvarlatılmış köşeleri ve bazı farkla ya da değil ile tarz gerekip gerekmediğini belirtir |
| data-mini | true | false | katlanabilir düğmeler küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-theme | letter (a-z) | katlanabilir setin tema rengini belirtir |
içerik
1.4 sürümü kullanım dışı ve 1.5 kaldırılacaktır. Ile Konteyner data-role="content" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-theme | letter (a-z) | içeriğin tema rengini belirtir |
Kontrol grubu
Bir <div> veya <fieldset> kap data-role="controlgroup" . Gruplar, tek tip (bağlantı tabanlı düğmeler, radyo düğmeleri, onay kutuları seçeneğini elementler) birden düğme tarzı girişler. Form onay kutuları ve radyo düğmeleri gruplama için, <fieldset> kap içine önerilir <div> ile "ui-fieldcontain" etiketi stil geliştirmek için, sınıf.
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-exclude-invisible | true | false | yuvarlatılmış köşeler atama görünmez çocukları dışlamak belirtir |
| data-mini | true | false | Grubun küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-theme | letter (a-z) | controlgroup teması rengini belirtir |
| data-type | horizontal | vertical | grup yatay veya dikey olarak gösterilip gösterilmemesi gerektiğini belirtir |
diyalog
Ile bir kap data-dialog="true" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-close-btn | left | right | none | kapatma düğmesi konumunu belirtir |
| data-close-btn-text | sometext | kapatma düğmesi için metni belirtir |
| data-corners | true | false | iletişim yuvarlak köşelere sahip olmadığını belirtir |
| data-dom-cache | true | false | tek tek sayfalar için jQuery DOM önbelleği veya olmasın temizlemek için belirtir (true olarak ayarlanırsa, tüm mobil cihazlarda iyice DOM Kendinizi ve testi yönetmek için özen gerekir) |
| data-overlay-theme | letter (a-z) | Bindirme belirtir (background) iletişim sayfasının rengine |
| data-theme | letter (a-z) | iletişim sayfasının tema rengini belirtir |
| data-title | sometext | iletişim sayfası için başlığını belirtir |
Artırma
Ile bir kap data-enhance="false" ya da data-ajax="false"
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-enhance | true | false | Olarak ayarlanırsa "true" , (default) jQuery Mobile otomatik olarak mobil cihazlar için uygun hale, sayfa stil olacaktır. Olarak ayarlanırsa "false" , çerçeve sayfasını stilini olmaz |
| data-ajax | true | false | ajax veya olmasın sayfalarını yüklemek için belirtir |
Not: data-enhance="false" birlikte kullanılması gerekir $.mobile.ignoreContentEnabled=true" otomatik stil sayfalarına jQuery Mobile durdurmak için.
Içeride herhangi bir bağlantı veya form elemanı data-ajax="false" zaman konteynerlerin çerçevenin navigasyon işlevselliği ile göz ardı edilecektir $.mobile.ignoreContentEnabled true olarak ayarlanır.
Saha Konteyner
1.4 sürümü kullanım dışı ve 1.5 kaldırılacaktır. Kullan class="ui-fieldcontain instead" . Ile bir kap data-role="fieldcontain" etiketi / form elemanı çifti sarılı.
Sabit Araç Çubuğu
Ile bir kap data-role="header" ya da data-role="footer" ile birlikte data-position="fixed" özelliği.
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-disable-page-zoom | true | false | kullanıcı / ölçek sayfasını yakınlaştırmak veya değil mümkün olup olmadığını belirtir |
| data-fullscreen | true | false | araç çubukları her zaman üst ve / veya alt kısmında konumlandırılmalıdır belirtir |
| data-tap-toggle | true | false | kullanıcı musluklar / tıklama veya olmasın araç çubuğu-görünürlüğünü değiştirmek mümkün olup olmadığını belirtir |
| data-transition | slide | fade | none | Bir musluk / tıklama oluştuğunda geçiş efektini belirler |
| data-update-page-padding | true | false | Her iki üst ve sayfanın alt dolgu boyutlandırma, geçiş ve güncellenecektir belirtir "updatelayout" olayları (jQuery Mobile always updates the padding on the "pageshow" event) |
| data-visible-on-page-show | true | false | üst sayfa gösterildiğinde araç çubuğu-görünürlüğünü belirtir |
Ayaklı kumandalı düğme
Bir <input type="checkbox"> veri-rolü ile "flipswitch" :
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-mini | true | false | Anahtar küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-on-text | sometext | Belirtir "on" Flip anahtarı metin (default is "On" ) |
| data-off-text | sometext | Belirtir "off" Flip anahtarı metni (default is "Off" ) |
Alt Bilgi
Ile bir kap data-role="footer" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-id | sometext | benzersiz kimliğini belirtir. Kalıcı alt bilgiler için gereklidir |
| data-position | inline | fixed | altbilgi sayfa içeriği ile inline olmalıdır veya alt kısmında konumlandırılmış kalır belirtir |
| data-fullscreen | true | false | Altbilgi daima altta ve sayfa içeriğinin üzerine yerleştirilmelidir belirtir (slightly see-through) ya da değil |
| data-theme | letter (a-z) | altbilgi teması rengini belirtir |
Not: Kullanım tam ekran pozisyonu sağlamak data-position="fixed" ve sonra eklemek data-fullscreen elemana niteliğini.
Başlık
Ile bir kap data-role="header" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-id | sometext | benzersiz kimliğini belirtir. kalıcı başlıklar için gerekli |
| data-position | inline | fixed | başlık sayfası içeriğinin satır içi olmalı veya üstünde konumlandırılmış kalır belirtir |
| data-fullscreen | true | false | Başlık her zaman üstte ve sayfa içeriğinin üzerine yerleştirilmelidir belirtir (slightly see-through) ya da değil |
| data-theme | letter (a-z) | Başlığın tema rengini belirtir |
Not: Kullanım tam ekran pozisyonu sağlamak data-position="fixed" ve sonra eklemek data-fullscreen elemana niteliğini.
Girdiler
Ile Girdiler type="text|search|etc." ya da textarea elements .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-clear-btn | true | false | Girdi bir olması gerekip gerekmediğini belirtir "clear" düğmesini |
| data-clear-btn-text | text | Bir metni belirtir "clear" butonuna. Standart olan "clear text" |
| data-mini | true | false | giriş küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-role | none | jQuery Mobile düğmeler gibi stil giriş / textareas için önler |
| data-theme | letter (a-z) | giriş alanı teması rengini belirtir |
bağlantı
Tüm bağlantılar.
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-ajax | true | false | gelişmiş kullanıcı deneyimi ve geçişler için ajax sayfalarını yüklemek için belirtir. Yanlış olarak ayarlanırsa, jQuery Mobile normal sayfa isteği yapacağız. |
| data-direction | reverse | Ters geçiş animasyonu (only for page or dialog) |
| data-dom-cache | true | false | tek tek sayfalar için jQuery DOM önbelleği veya olmasın temizlemek için belirtir (true olarak ayarlanırsa, tüm mobil cihazlarda iyice DOM Kendinizi ve testi yönetmek için özen gerekir) |
| data-prefetch | true | false | hazır olduklarında böylece kullanıcı bunları ziyaret ettiğinde DOM'ye sayfaları ön getirmek belirtir |
| data-rel | back | dialog | external | popup | Bağlantı nasıl davranması gerektiğini için bir seçenek belirtir. Geri - bir adım geri tarihinin taşır. Dialog - Tarihte izlenmez bir diyalog gibi bir bağlantı açar. Dış - Başka bir alana bağlamayı için. Pop-up - bir pop-up pencere açar. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Bir sayfadan diğerine geçiş için nasıl belirler. Bizim bakın jQuery Mobile Geçişler bölüm. |
| data-position-to | origin | jQuery selector | window | pop-up kutularının konumunu belirtir. Menşei - Varsayılan. onu açan bağlantısı üzerinden açılır pencere yerleştirir. jQuery seçici - Belirtilen öğenin üzerine açılır pencere konumlandırır. Pencere - pencere ekranın ortasında açılır pencere konumlandırır. |
Liste
Bir <ol> veya <ul> ile data-role="listview" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-autodividers | true | false | otomatik liste öğeleri veya olmasın bölmek için belirtir |
| data-count-theme | letter (a-z) | sayım balonunun tema rengini belirtir |
| data-divider-theme | letter (a-z) | Liste bölücü teması rengini belirtir |
| data-filter | true | false | Bir listedeki ya da olmasın, bir arama kutusu eklemek belirtir |
| data-filter-placeholder | sometext | 1.4 sürümü kullanımdan kaldırıldı. Yerine HTML yer tutucu özelliği kullanın. Arama kutusunun içindeki metni belirtir. Standart olan "Filter items..." |
| data-filter-theme | letter (a-z) | arama filtresinin tema rengini belirtir |
| data-icon | Icons Reference | Listenin simgesini belirtir |
| data-inset | true | false | Liste yuvarlatılmış köşeler ve bazı farkla ya da değil ile tarz gerekip gerekmediğini belirtir |
| data-split-icon | Icons Reference | Bölünmüş düğmesinin simgesini belirtir. Standart olan "arrow-r" |
| data-split-theme | letter (a-z) | Bölünmüş düğmeye tema rengini belirtir |
| data-theme | letter (a-z) | Listenin tema rengini belirtir |
Liste öğesi
Bir <li> bir iç <ol> veya <ul> ile data-role="listview" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-filtertext | sometext | elemanlarını filtrelerken aramak için metni belirtir. Bu metin, daha sonra yerine fiili liste öğesi metninin filtre edilecektir |
| data-icon | Icons Reference | liste öğesinin simgesini belirtir |
| data-role | list-divider | Liste öğeleri için bir böleni belirtir |
| data-theme | letter (a-z) | liste öğesinin tema rengini belirtir |
Not: data-icon bağlantıları ile liste öğeleri tek işi bağlıyor.
Navbar'ın
<li> ile bir kap içinde elemanları data-role="navbar" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-icon | Icons Reference | liste öğesinin simgesini belirtir |
| data-iconpos | left | right | top | bottom | notext | simgesinin konumunu belirtir |
Navbars kendi üst kaptan tema-örneğini devralır. Ayarlamak mümkün değildir data-theme bir Menü ye niteliği. data-theme nitelik gezinme çubuğu içine her bağlantı için ayrı ayrı ayarlanabilir.
Sayfa
Ile bir kap data-role="page" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-dom-cache | true | false | tek tek sayfalar için jQuery DOM önbelleği veya olmasın temizlemek için belirtir (true olarak ayarlanırsa, tüm mobil cihazlarda iyice DOM Kendinizi ve testi yönetmek için özen gerekir) |
| data-overlay-theme | letter (a-z) | Bindirme belirtir (background) iletişim sayfaların renk |
| data-theme | letter (a-z) | Sayfanın tema rengini belirtir |
| data-title | sometext | sayfa başlığını belirtir |
| data-url | url | url sayfasını istemek için kullanılan yerine, URL'yi güncellemek için değer |
Aniden belirmek
Ile bir kap data-role="popup" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-corners | true | false | Popup yuvarlak köşelere sahip olmadığını belirtir |
| data-dismissible | true | false | Popup Popup dışında tıklayarak veya vermeyerek kapatılmalıdır belirtir |
| data-history | true | false | açıldığında açılan bir tarayıcı geçmişi öğesi oluşturmak belirtir. False olarak ayarlanırsa, bu bir geçmişi öğesi oluşturmaz ve sonra tarayıcınızın aracılığıyla kapatılabilen olmayacak "Back" düğmesini |
| data-overlay-theme | letter (a-z) | Bindirme belirtir (background) açılan kutunun rengini. Standart şeffaf arka plan (none) . |
| data-shadow | true | false | pop-up kutusu gölgeler sahip olmayan veya belirtir |
| data-theme | letter (a-z) | Açılır kutuda teması rengini belirtir. Standart miras, "none" şeffaf pop-up setleri |
| data-tolerance | 30, 15, 30, 15 | Pencerenin kenarlarından mesafeyi belirtir ( top, right, bottom, left ) |
Olan bir çapa data-rel="popup" :
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-position-to | origin | jQuery selector | window | pop-up kutularının konumunu belirtir. Menşei - Varsayılan. onu açan bağlantısı üzerinden açılır pencere yerleştirir. jQuery seçici - Belirtilen öğenin üzerine açılır pencere konumlandırır. Pencere - pencere ekranın ortasında açılır pencere konumlandırır. |
| data-rel | popup | pop-up kutusunu açmadan için |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Bir sayfadan diğerine geçiş için nasıl belirler. Bizim bakın jQuery Mobile Geçişler bölüm. |
Radyo düğmesi
Ile etiket ve girdilerin çiftleri type="radio" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-mini | true | false | düğme, küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-role | none | JQuery Mobile tarzı için önler radiobuttons gelişmiş düğmeler olarak |
| data-theme | letter (a-z) | radyo düğmesinin tema rengini belirtir |
Grup çoklu radyo düğmeleri için kullanmak data-role="controlgroup" ile birlikte data-type="horizontal|vertical" yatay veya dikey olsun gruba düğmeleri belirtmek için.
seçmek
Tüm <select> elemanları.
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-icon | Icons Reference | seçme elemanının simgesini belirtir. Standart olan "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | simgesinin konumunu belirtir |
| data-inline | true | false | seçme elemanı satır içi veya olmaması gerektiğini belirtir |
| data-mini | true | false | select küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-native-menu | true | false | false olarak ayarlandığında, bu (eğer seçme menüsü tüm mobil cihazlarda aynı görüntülemek istiyorsanız önerilir) jQuery'nin kendi özel seçme menüsünü kullanır |
| data-overlay-theme | letter (a-z) | JQuery'nin kendi özel seçme menüsünün tema rengini belirtir (birlikte kullanılır data-native-menu="false" ) |
| data-placeholder | true | false | Bir ayarlanabilir <option> bir yerli olmayan seçme unsuru |
| data-role | none | jQuery Mobile düğmeler gibi stil seçme elemanlarına önler |
| data-theme | letter (a-z) | seçme elemanının teması rengini belirtir |
Grup katına, elemanlarını seçmek kullanmak data-role="controlgroup" ile birlikte data-type="horizontal|vertical" yatay veya dikey olsun gruba unsurları belirtmek için.
kaydırıcı
Ile Girdiler type="range" .
| Veri nitelik | değer | Açıklama |
|---|---|---|
| data-highlight | true | false | kaydırıcı parça vurgulanan veya olmasın çıkarılacağını belirtir |
| data-mini | true | false | kaydırıcı küçük veya normal boyutta olması gerekip gerekmediğini belirtir |
| data-role | none | jQuery Mobile düğmeler gibi stil kaydırıcı kontrollerine önler |
| data-theme | letter (a-z) | kaydırıcı denetiminin tema rengini belirtir (giriş, idare ve takip) |
| data-track-theme | letter (a-z) | kaydırıcı parçanın teması rengini belirtir |