Mawaka wa jQuery Mobile

Kuanza kwa jQuery Mobile

Mafano:Ingawa jQuery Mobile inayofaa kwa kila kifaa cha mkiaji, inaweza kuwa na matokeo ya kufadika kwenye kompyuta kwenye mabaya (kwa sababu ya matokeo ya kufadika ya CSS3).

Kwa hivyo katika mafunzo hii, tunasidhaia kwamba uningie kwenye kifungu cha Google Chrome kwa kumwambia mawasiliano bora.

mifano

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Karibuni kwenye wiziwa wako</h1>
  </div>
  <div data-role="content">
    <p>Ninijua mtengenezaji wa kifaa cha mkiaji!</p>
  </div>
  <div data-role="footer">
    <h1>Matukio ya chumba cha chilimo</h1>
  </div>
</div>
</body>

Jifunze Kupiga Matokeo

Mafano ya mawasiliano:

  • data-role="page" kina kumekua ukurasa iliyonunuliwa kwenye kifungu cha kikemia
  • data-role="header" kina kumuea toolbar kwenye juu ya ukurasa (kama kichwa na gomboni za utafutaji).
  • data-role="content" kina kumekua maadili ya ukurasa, kama matukio, picha, formu na gumba na mengineo.
  • data-role="footer" kina kumuea toolbar kwenye chini ya ukurasa

Kwenye mifumo hii, unaweza kuongeza mifano ya HTML yoyote - matukio, picha, kichwa, orodha na mengineo.

Mafano:Mafano ya HTML5 data-* hupeana mifano ya uharibifu kwa kila kifaa cha mkiaji kwa sababu ya uwanja wa kumtumia kwa kina.

Kuingia kwenye ukurasa kwenye jQuery Mobile

Kwenye jQuery Mobile, unaweza kumuea ukurasa zaidi kwenye faili ya HTML moja.

Tumia id kipya kwa kuzungumza kila ukurasa na tumia properti ya href kuihakikisha kuwasiliana kwa kina:

mifano

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">ngooza kwenye ukurasa pili</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Nenda Kwa Ukurasa wa Kwanza</a>
  </div>
</div>

Jifunze Kupiga Matokeo

Mafano:Mfumo wa web na mawasiliano mengi inaathiriwa wakati wa kuchukua muda (kama matukio, viungo, picha na script na mengineo)

<a href="externalfile.html">ngooza kwenye ukurasa mpya</a>

Tumia ukurasa kama dialogi

Dialogi ina uwanja wa kusonikisha habari au kumwambia wasiliana.

Kwa kuwaonyesha dialogi kwa sababu ya uharibifu wa mtumishi (kama kuingia kwa kifungu), ingia data-rel="dialog" kwenye kiungo hicho:

mifano

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Nenda Kwa Ukurasa wa Pili</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Nenda Kwa Ukurasa wa Kwanza</a>
  </div>
</div>

Jifunze Kupiga Matokeo