jQuery Mobile Page

Magsimula sa jQuery Mobile

Paalala:Bagaman ang jQuery Mobile ay ginagamit sa lahat ng mobile device, maaring mayroong problema sa pagkakompatibilidad sa desktop computer (dalawa sa limitadong suporta ng CSS3).

Kaya sa pamamagitan ng tutorial na ito, rekomendamos na gamitin ninyo ang Google Chrome browser upang makuha ang pinakamahusay na karanasan sa pagbabasa.

Mga halimbawa

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Maligayang pagdating sa aking homepage</h1>
  </div>
  <div data-role="content">
    <p>Ako ay isang mobile developer!</p>
  </div>
  <div data-role="footer">
    <h1> Teksto ng Footer</h1>
  </div>
</div>
</body>

Try It Yourself

Halimbawa ng paliwanag:

  • data-role="page" ay ang pahina na ipapakita sa browser
  • data-role="header" ay gumagawa ng toolbar sa itaas ng pahina (kadalasang ginagamit para sa pamagat at search button)
  • data-role="content" ay nagtatalaga ng nilalaman ng pahina, katulad ng teksto, imahe, form at button at iba pa
  • data-role="footer" ay gumagawa ng toolbar sa ilalim ng pahina

Sa mga container na ito, maari mong idagdag ang anumang HTML element - talata, imahe, pamagat, listahan at iba pa.

Paalala:Ang HTML5 data-* property ay ginagamit upang gumawa ng "touch-friendly" na interaksyon sa mobile devices sa pamamagitan ng jQuery Mobile.

Magdagdag ng Pahina sa jQuery Mobile

Sa jQuery Mobile, puwedeng gumawa ng maraming pahina sa isang lamang file na HTML.

Gumamit ng tunay na id upang paghihiwalay ang bawat pahina, at gamitin ang atrributo ng href upang kumonekta sila sa isa't isa:

Mga halimbawa

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Lumipat sa Pahina Dalaw</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

Try It Yourself

Komento:Ang mga web application na may maraming nilalaman ay maaaring makasakit ng panahon ng pagkakarga (katulad ng teksto, link, imahe at script at iba pa). Kung ayaw mong gamitin ang mga internal na link na pahina, gamitin ang panlabas na file:

<a href="externalfile.html">Lumipat sa panlabas na pahina</a>

Gumamit ng pahina bilang popup window

Ang popup window ay isang uri ng window na ginagamit upang ipakita ang impormasyon o humingi ng input.

Kung gusto mong gumawa ng isang popup window kapag ang user ay may click sa link, magdagdag ng data-rel="dialog" sa link na iyon:

Mga halimbawa

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Go to Page Two</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

Try It Yourself