jQuery Mobile 主题

jQuery Mobile 主题

jQuery Mobile ay nagbibigay ng limang iba't ibang tema ng estilo, mula sa "a" hanggang "e" - bawat tema ay may iba't ibang kulay ng pindutan, bar, bloke ng nilalaman, at iba pa. Ang isang tema ng jQuery Mobile ay binubuo ng maraming makikita na epekto at kulay.

Para sa pagtitingnan ng hitsura ng aplikasyon, gamitin ang attribute na data-theme, at tapos na ito ay magbigay ng isang titik:

<div data-role="page" data-theme="a|b|c|d|e">
Halaga Paglalarawan Halimbawa
a Default. Teksto na puti sa pangalawang kulay ng kulay (black) na background Test
b Teksto na puti sa pangalawang kulay ng kulay (asul) na background / Teksto na puti sa pangalawang kulay ng kulay (puti) na background Test
c Teksto na puti sa pangalawang kulay ng kulay (liwanag na puti) na background Test
d Teksto na puti sa pangalawang kulay ng kulay (puti) na background Test
e Teksto na puti sa pangalawang kulay ng kulay (oranje) na background Test

Paalala:Mix ang tema na gusto mo!

Pangkaraniwan, gumagamit ang jQuery Mobile ng tema "a" para sa header at footer, at tema "c" para sa content ng header (liwanag na puti). Gayunpaman, maaari mong malaya na maghahalo ng mga tema.

Tema na pahina, content at pahina

实例

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

亲自试一试

Tema na dialog

实例

<a href="#pagetwo" data-rel="dialog">Ipaalam ang Pahina ng Dialog na may Tema</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>

亲自试一试

Tema na button

实例

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

亲自试一试

Tema na icon

实例

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

亲自试一试

Pamagat at pahina na may buton na tema

实例

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
  <h1>Malugod na Magpunta sa Aking Homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>

亲自试一试

Tema na navigasyon

实例

<div data-role="footer" data-theme="e">
  <h1>Maglagay ng Tekstong Kalagayan dito</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">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>

亲自试一试

Tema na button na mabuksan at nilalaman

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Mag-click sa akin - ako ay mabuksan!</h1>
  <p>Ako ang pinakalatag na nilalaman.</p>
</div>

亲自试一试

Tema na listahan

实例

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

亲自试一试

Theme-ized split button

实例

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

亲自试一试

Theme-ized collapsible list

实例

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

亲自试一试

Theme-ized form

实例

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="a">
<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>

亲自试一试

Theme-ized collapsible form

实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

亲自试一试

Magdagdag ng bagong tema

Pinapayagan din ng jQuery Mobile ang pagdagdag ng bagong tema sa mobile page.

Magdagdag o i-edit ang bagong tema sa pamamagitan ng pagbabago ng CSS file (tulad ng inilagay na jQuery Mobile). Kopiin lamang ang isang bahagi ng estilo, at maitawid ang pangalan ng klase gamit ang titik (f-z), at i-adjust sa iyong paboritong kulay at font style.

Maaari ka ring magdagdag ng bagong estilo sa pamamagitan ng paggamit ng klase ng tema sa dokumentong HTML - magdagdag ng klase sa toolbar na ui-bar-(a-z), at magdagdag ng klase sa nilalaman na ui-body-(a-z):

实例

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

亲自试一试