jQuery Mobile Temalar
jQuery Mobile iki farklı tarzı temalar sağlar "a" ve "b" vb düğmesi, barlar, içerik bloklar için farklı renklerle her biri ve -.
Kullanmak, başvurunuzun görünümünü özelleştirmek için data-theme niteliğini ve bir harfle niteliği atamak:
<div data-role="page" data-theme="a|b" >
| değer | Açıklama | Örnek |
|---|---|---|
| a | sayfa içeriği için açık gri bir arka plan üzerinde siyah metin Üstbilgi ve altbilgiler için gri bir arka plan üzerine siyah metin düğmeleri için açık gri bir arka plan üzerinde siyah metin Aktif düğmeler için mavi bir arka plan üzerinde beyaz metin linklere Mavi metin Açık gri metin (placeholder) veya siyah metin (value) giriş alanlarının beyaz zemin üzerine | Dene |
| b | sayfa içeriği için koyu gri zemin üzerine beyaz metin Üstbilgi ve altbilgiler için koyu gri zemin üzerine beyaz metin düğmeleri için kömür zemin üzerine beyaz metin Bir üzerinde beyaz metin "cyan" aktif düğmeler için mavi arka "Cyan" linklere mavi metin Gri metin (placeholder) veya beyaz metin (value) giriş alanlarının siyah arka plan üzerinde | Dene |
Ile düğmeleri için class="ui-btn" kullanın "ui-btn-a|b" butonuna ya gri stil sınıfını (default) : veya siyah
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
"a" teması çoğu elemanları kullanılır ve alt öğeler genellikle üst biriminin temasını devralır (or page) .
Tema kullanımını Üstbilgi ve Altbilgi
Örnek
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Kendin dene " Iletişim kutuları içinde tema kullanımını Üstbilgi ve Altbilgi
Örnek
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> Kendin dene " tema kullanımını Düğmeler
tema kullanımını Simgeler
Örnek
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Kendin dene " tema kullanımını Popup'lar
Üstbilgi ve altbilgi tema kullanımını Düğmeler
Örnek
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Kendin dene " Tema kullanımını Navigasyon Barlar
Örnek
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> Kendin dene " tema kullanımını Paneller
Katlanır Düğme ve İçerik temalara
Örnek
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> Kendin dene " tema kullanımını Listeleri
Örnek
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> Kendin dene " Tema kullanımını Bölünmüş Düğmeler
Katlanır Listelerini temalara
Örnek
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Kendin dene " tema kullanımını Formları
Örnek
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> Kendin dene " Katlanır Formlar temalara
Örnek
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Kendin dene " Yeni Temalar Ekle
jQuery Mobile ayrıca mobil sayfalara yeni temalar eklemenizi sağlar.
Ekle veya CSS dosyasını düzenleyerek yeni temalar düzenlemek (if you have download jQuery Mobile) . Sadece stilleri bloğunu kopyalayıp bir mektup adıyla sınıfları adlandırmak (cz) ve istediğiniz gibi renkleri ve yazı tiplerini ayarlayın.
Ayrıca HTML belgesindeki tema sınıfları kullanarak yeni stiller ekleyebilirsiniz - sınıf eklemek "ui-bar-(az) " araç çubukları için, "ui-body-(az) " içerik ve için ui-page-theme-(az) sayfası için ":
Örnek
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Kendin dene " jQuery Mobile önceki sürümlerinde JavaScript unsuru ebeveynin temasını miras nasıl işlemek için kullanılır. 1.4 itibariyle çerçevesi geliştirilmiş performans odaklı ve JavaScript saf CSS ile değiştirilmiştir.
: JQuery Mobile ekibi kendi özel tema oluşturmak için yardımcı bir araç yaratmış ThemeRoller . Ayrıca yeni sürüm ile uyumlu hale getirmek için Eski temaları yükseltmek için bu aracı kullanabilirsiniz.