jQuery Mobile Tema

jQuery Mobile Tema

jQuery Mobile, "a" ile "e" arasında beş farklı stil teması sunar - her tema, farklı renkli düğmeler, çubuklar, içerik blokları vb. içerir. jQuery Mobile'deki bir tema, çeşitli görünen etkiler ve renklerden oluşur.

Uygulamanın görünümünü özelleştirmek için data-theme özniteliğini kullanın ve bu özelliğe bir harf atayın:}}

<div data-role="page" data-theme="a|b|c|d|e">
Değer Açıklama Örnek
a Öntanımlı. Siyah arka plan üzerinde beyaz metin. Test
b Mavi arka plan üzerinde beyaz metin / Gri arka plan üzerinde siyah metin Test
c Açık gri arka plan üzerinde siyah metin Test
d Beyaz arka plan üzerinde siyah metin Test
e Sarı arka plan üzerinde siyah metin Test

İpucu:Sevdiklerinizi karıştırın!

Öntanımlı olarak, jQuery Mobile başlıklar ve alt başlıklar için "a" temasını, başlık içeriği için "c" temasını (açık gri) kullanır. Ancak, temaları karıştırmakta serbestsiniz.

Temalı sayfa, içerik ve alt başlık

Örnek

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Kendi Kendine Deneyin

Temalı diyalog

Örnek

<a href="#pagetwo" data-rel="dialog">Temalı Diyalog Sayfasına Git</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Kendi Kendine Deneyin

Temalı düğmeler

Örnek

<a href="#" data-role="button" data-theme="a">Düğme</a>
<a href="#" data-role="button" data-theme="b">Düğme</a>
<a href="#" data-role="button" data-theme="c">Düğme</a>

Kendi Kendine Deneyin

Temalı simgeler

Örnek

<a href="#" data-role="button" data-icon="plus" data-theme="e">Artı</a>

Kendi Kendine Deneyin

Sayfa başlığı ve alt başlığındaki temalı düğmeler

Örnek

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Ana Sayfa</a>
  <h1>Benim Ana Sayfama Hoş Geldiniz</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Ara</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Düğme 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Düğme 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Düğme 3</a>
</div>

Kendi Kendine Deneyin

Temalı navigasyon çubuğu

Örnek

<div data-role="footer" data-theme="e">
  <h1>Yardım Metnini Buraya Ekle</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Düğme 1</a></li>
      <li><a href="#" data-icon="arrow-r">Düğme 2</a></li>
      <li><a href="#" data-icon="arrow-r">Düğme 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Düğme 4</a></li>
    </ul>
  </div> 
</div>

Kendi Kendine Deneyin

Temalı katlanabilir düğme ve içerik

Örnek

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Bana tıkla - Açılır!</h1>
  <p>Genişletilmiş içerikim.</p>
</div>

Kendi Kendine Deneyin

Temalı liste

Örnek

<ul data-role="listview" data-theme="e">
  <li><a href="#">List Elemanı</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">List Elemanı</a></li>
  <li><a href="#">List Elemanı</a></li>
</ul>

Kendi Kendine Deneyin

Temalı bölme düğmesi

Örnek

<ul data-role="listview" data-split-theme="e">

Kendi Kendine Deneyin

Temalı katlanabilir liste

Örnek

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Kendi Kendine Deneyin

Temalı Form

Örnek

<label for="name">Tam Ad:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Sevdiğiniz Renği Seçin:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Kırmızı</option>
  <option value="green">Yeşil</option>
  <option value="blue">Mavi</option>
</select>

Kendi Kendine Deneyin

Temalı katlanabilir form

Örnek

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Ben katlanabilirim - Bana tıkla!</legend>

Kendi Kendine Deneyin

Yeni Tema Ekle

jQuery Mobile, mobil sayfalara yeni temalar eklemenize de izin verir.

Yeni temaları eklemek veya düzenlemek için CSS dosyasını düzenleyin (örneğin, jQuery Mobile indirilmişse). Biraz stil kopyalayıp, harf adı (f-z) ile sınıfları yeniden adlandırın ve istediğiniz renk ve yazı tipine ayarlayın:

HTML belgesinde temaları kullanarak yeni stiller ekleyebilirsiniz - araç çubuğuna ui-bar-(a-z) sınıfı ekleyin ve içeriğe ui-body-(a-z) sınıfı ekleyin:

Örnek

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

Kendi Kendine Deneyin