Muonekano wa jQuery Mobile

Muonekano wa jQuery Mobile

jQuery Mobile inaofa mita mabaki ya muundo ya kifaa kumi kumi na moja, kutoka "a" hadi "e" - kila muundo una mabaki ya rangi tofauti ya misa, matabaka, kikapteni, na kila moja ya kuzingatia. Moja ya muundo za jQuery Mobile inajumuisha matukio ya muonekano na rangi tofauti.

Kuwa na uwezo wa kumizingatia habari ya programu, tumia propeti ya data-theme, na tuma uwezo hilo kwa sababu ya hiyo kwa herufi:}}

<div data-role="page" data-theme="a|b|c|d|e">
Wazitoa Maelezo Mfano
a Kwa ujumbe. Matukio ya kijani kina mawili ya kijani Michezo
b Matukio ya kijani kina mawili ya kijani / Matukio ya kijani kina mawili ya kijani Michezo
c Matukio ya kijani kina mawili ya kijani Michezo
d Matukio ya kijani kina mawili ya kijani Michezo
e Matukio ya kijani kina mawili ya kijani Michezo

Tahara:Chukua mifupi yako yafupi!

Kwa ujumbe, jQuery Mobile inatumia mifupi ya "a" kwa kichwa cha ukurasa na chini cha ukurasa, na mifupi ya "c" kwa maudhui ya kichwa cha ukurasa (kijani kibao). Kuna uwezo wako wa kushirikisha mifupi.

Mifupi ya ukurasa, maudhui na chini cha ukurasa

Mifano

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

Jifunze tena

Mifupi wa dialog

Mifano

<a href="#pagetwo" data-rel="dialog">Nenda ku ukurasa wa mifupi wa dialog</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>

Jifunze tena

Mifupi ya kifungo

Mifano

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

Jifunze tena

Mifupi ya ikoni

Mifano

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

Jifunze tena

Mifupi na mizigo ya kichwa cha ukurasa na chini cha ukurasa

Mifano

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Nyumbani</a>
  <h1>Karibuni Kwa Ukurasa Wako</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Tafuta</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Tupu 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Tupu 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Tupu 3</a>
</div>

Jifunze tena

Kifaa cha kuandaa orodha ya muundo

Mifano

<div data-role="footer" data-theme="e">
  <h1>Weka Ujumbe wa Kufikia Hapa</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Tupu 1</a></li>
      <li><a href="#" data-icon="arrow-r">Tupu 2</a></li>
      <li><a href="#" data-icon="arrow-r">Tupu 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Tupu 4</a></li>
    </ul>
  </div> 
</div>

Jifunze tena

Mwongozo wa kikao na maudhui ya kigeni

Mifano

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Bonyeza nime - Nina inaendelea!</h1>
  <p>Nina ni maudhui ya kigeni.</p>
</div>

Jifunze tena

Orodha ya Muundo

Mifano

<ul data-role="listview" data-theme="e">
  <li><a href="#">Mwongozo wa Orodha</a></li>
  <li data-theme="a"><a href="#">Mwongozo wa Kikoa</a></li>
  <li data-theme="b"><a href="#">Mwongozo wa Orodha</a></li>
  <li><a href="#">Mwongozo wa Orodha</a></li>
</ul>

Jifunze tena

Muungano wa muundo wa mabomu ya kusaidia

Mifano

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

Jifunze tena

Muungano wa muundo wa orodha kina

Mifano

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

Jifunze tena

Muungano wa muundo wa mupepeo

Mifano

<label for="name">Jina Kuu:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Chagua rangi yako ya chaguo:</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>

Jifunze tena

Muungano wa muundo wa kifungo kina

Mifano

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Angalia nini - Mimi ni kijifungaji!</legend>

Jifunze tena

Ongeza mstari mpya

jQuery Mobile inahofuza pia kuingiza mstari mpya kwenye picha ya mkataba wa mobile.

Tumia usimamizi wa CSS (kama jQuery Mobile ilikuwa imewaumishwa) kuongeza au kuhusisha mstari mpya. Kwa hivyo, kisia sehemu ya stili, kurekebisha kwa herufi (f-z) kwa kirekebisha kwa kikoa, na kubadilisha kwa rangi na fonti zilizofikirika.

Inaweza pia kuzingatia kwa kuingiza kikoa cha msingi kwenye wasifu wa HTML kuongeza stili zingine - ongeza kikoa kwa uwanja wa kifungo la ui-bar-(a-z), na kuingiza kikoa kwa kikoa cha kijadili la ui-body-(a-z):

Mifano

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

Jifunze tena