ການສ້າງລະບົບ jQuery Mobile

ການສ້າງລະບົບ jQuery Mobile

jQuery Mobile ສະໜອງຫ້າບຸນຮູບແບບທີ່ຕ່າງກັນຈາກ "a" ຫາ "e" - ບໍລິການແບບພາບສີສາມະຍາຂອງບຸນຂັ້ນມາດາວ, ບໍລິການແບບບໍ່ເລິກ, ບຸນຂອງຂັ້ນມາດາວ, ແລະ ອື່ນໆ. ບໍລິການແບບຂອງ jQuery Mobile ແມ່ນຖືກສ້າງຈາກຫຼາຍຜົນງານທີ່ເຫັນໄດ້ທັງຫຼາຍສີ.

ສຳລັບການກຳນົດຮູບແບບຂອງຄອມພິວເຕີ້ແຫ່ງຂ້ອຍອະນຸຍາດໃຊ້ປະເພດ data-theme ແລະໃຫ້ພັນທະສາດສະເພາະໜຶ່ງອີກ:}}

<div data-role="page" data-theme="a|b|c|d|e">
ຄູ່ມື ການອະທິບາຍ ຕົວຢ່າງ
a ມີມາສີສີທີ່ສະເພາະສີສີທໍາ. ການທົດລອງ
b ມີມາສີສີທີ່ສະເພາະສີສີທໍາ / ມີມາສີສີທີ່ສະເພາະສີສີຂີ້ງ ການທົດລອງ
c ມີມາສີສີຫຼັງໃນສີສີສະເພາະສີສີຂີ້ງ ການທົດລອງ
d ມີມາສີສີຫຼັງໃນສີສີທໍາ ການທົດລອງ
e ມີມາສີສີຂີ້ງໃນສີສີຫຼັງ ການທົດລອງ

ຄຳແນະນຳ:ຄວາມຊີ້ວັດທີ່ຈະປະສົມພາສາຫົວໜ້າທີ່ຂ້ອຍອະນຸຍາດ!

ໂດຍຜົນຕໍາຫລວດ jQuery Mobile ມີ ພາສາຫົວໜ້າແລະຫົວເຫດ "a" ແລະ ຫົວເຫດຫົວໜ້າໃຊ້ "c" ແລະສີສະເພາະສີຂີ້ງ (ສີຂີ້ງ). ແຕ່ເຈົ້າສາມາດປະສົມພາສາຫົວໜ້າທີ່ຂ້ອຍອາດອະນຸຍາດ.

ຫົວໜ້າຫົວເຫດຫົວໜ້າຫົວເຫດ

ອິດສະຫຼະການ

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

ທຳການທັນອິດ

ຫົວໜ້າການໂອລົມປະຈຳລັດ

ອິດສະຫຼະການ

<a href="#pagetwo" data-rel="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>

ທຳການທັນອິດ

ຫົວໜ້າຫົວເຫດຫົວໜ້າ

ອິດສະຫຼະການ

<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>

ທຳການທັນອິດ

ອາກາດຫົວໜ້າ

ອິດສະຫຼະການ

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

ທຳການທັນອິດ

ຂັ້ນຫົວແລະຫົວເຫດໃນຫົວໜ້າແລະຫົວເຫດ

ອິດສະຫຼະການ

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">ບ້ານ</a>
  <h1>ຕັ້ງຂອງຂ້ອຍ</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">ຄົ້ນຫາ</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">ປະຕູ 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">ປະຕູ 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">ປະຕູ 3</a>
</div>

ທຳການທັນອິດ

ລະບົບການນຳທາງລະບາຍ

ອິດສະຫຼະການ

<div data-role="footer" data-theme="e">
  <h1>ລົງມາຂັດຂ້ອງບັນທຶກຢູ່ບາງບ່ອນດັ່ງກ່າວ</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">ປະຕູ 1</a></li>
      <li><a href="#" data-icon="arrow-r">ປະຕູ 2</a></li>
      <li><a href="#" data-icon="arrow-r">ປະຕູ 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >ປະຕູ 4</a></li>
    </ul>
  </div> 
</div>

ທຳການທັນອິດ

ລະບົບລະບາຍປະຕູດຳນຳແລະຂັດຂ້ອງ

ອິດສະຫຼະການ

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>ການຄົ້ນຫາຂ້ອຍ - ຂ້ອຍສາມາດປິດລົງ!</h1>
  <p>ຂ້ອຍແມ່ນຂັດຂ້ອງຂວາງ.</p>
</div>

ທຳການທັນອິດ

ລະບົບລະບາຍ

ອິດສະຫຼະການ

<ul data-role="listview" data-theme="e">
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">ລາຍການຢ່າງ</a></li>
  <li data-theme="b"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>

ທຳການທັນອິດ

ຮູບແບບພາບປະເພດທີ່ຈັບການປິດປະກອບ

ອິດສະຫຼະການ

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

ທຳການທັນອິດ

ຮູບແບບສຳນັກງານປິດປະກອບພາບປະເພດ

ອິດສະຫຼະການ

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

ທຳການທັນອິດ

ຮູບແບບສຳນັກງານພາບປະເພດ

ອິດສະຫຼະການ

<label for="name">ຊື່ທັງໝົດ:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">ເລືອກສີທີ່ທ່ານມັກ:</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>

ທຳການທັນອິດ

ຮູບແບບສຳນັກງານປິດປະກອບພາບປະເພດ

ອິດສະຫຼະການ

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>ການກົດສະຫຼົກ - ຂ້ອຍມີການປິດປະກອບ!</legend>

ທຳການທັນອິດ

ສະເໜີຮູບແບບໃໝ່

jQuery Mobile ຍັງອະນຸຍາດທ່ານສະເໜີຮູບແບບໃໝ່ໃຫ້ເວັບໄຊທີ່ເຄືອງຍົນມືຖື。

ທ່ານຈະຕ້ອງເຮັດການແກ້ໄຂບັນຍັດ CSS (ເມື່ອຍັງມີ jQuery Mobile) ເພື່ອໃຫ້ສະເໜີຫຼືແກ້ໄຂຮູບແບບໃໝ່ຫຼືບັນຍັດໃໝ່。ພຽງແຕ່ສ້າງການສໍາເນົາຮູບແບບຫຼືຫົວອິດສະຫຼະການໂດຍການໃຫ້ອິດສະຫຼະການຈາກ (f-z) ແລະດັດແປງເປັນສີແລະຫົວໜ້າທີ່ທ່ານມັກກັບນັ້ນອີກ。

ທ່ານຈະສາມາດໃຊ້ຮູບແບບພາບປະເພດເລື່ອງໃນເອກະສານ HTML ເພື່ອສະເໜີຮູບແບບໃໝ່ - ສະເໜີພາບແບບສຳນັກງານໂດຍການໃຫ້ມອດ ui-bar-(a-z) ແລະ ສຳນັກງານໃນຮູບແບບ ui-body-(a-z)：

ອິດສະຫຼະການ

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

ທຳການທັນອິດ