ກະວຸດ jQuery Mobile

ຄູ່ມືບັນພິມສຳລັບການສ້າງຄູ່ມືບັນພິມທີ່ສະໜັບສະໜູນການກະຈາຍຄຳລັບຕະຫລາດ

ສ້າງຄູ່ມືບັນພິມໃນ jQuery Mobile

ຄູ່ມືບັນພິມ jQuery Mobile ສາມວິທີທີ່ສາມາດສ້າງໄດ້:

  • ນຳໃຊ້ <button> ປະເພດ
  • ນຳໃຊ້ <input> ປະເພດ
  • ນຳໃຊ້ <a> ປະເພດ data-role="button"

<button>

<button>ຄູ່ມືບັນພິມ</button>

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

<input>

<input type="button" value="ຄູ່">

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

<a>

<a href="#" data-role="button">ຄູ່</a>

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

ຄຳແນະນຳ:ຄູ່ຂອງ jQuery Mobile ແມ່ນຈະມີການຮັບຮູບການທີ່ຫຼາກຫຼາຍໃນອຸປະກອນສັນນິຄ້າຫົວໜ້າ. ພວກເຮົາຮັບປະກັນວ່າທ່ານຈະໃຊ້ <a> element ກັບ data-role="button" ເພື່ອສ້າງການເຊື່ອມຕໍ່ບົດຄືນລະຫວ່າງບົດຄືນ ແລະ <input> ຫຼື <button> element ສຳລັບການສະໜັບສະໜູນການສະໜັບສະໜູນຟອມ.

ຄູ່ຫຼິ້ນບົດຄືນ

ຖ້າທ່ານຕ້ອງການທີ່ຈະເຊື່ອມຕໍ່ບົດຄືນວິທີຈະການທີ່ບໍ່ມີການບໍ່ມີການຄັບຄັບ data-role="button" <a> element:

ກໍານົດ

<a href="#pagetwo" data-role="button">ຄົນທີ່ໄດ້ໄປຫາບົດຄືນ</a>

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

ຄູ່ກາງ

ໂດຍປົກກະຕິຄູ່ຈະກວມຄືນຄວາມກວມກັບຄວາມກວມກັບຄວາມທີ່ບໍ່ມີການບໍ່ມີການຄັບຄັບ. ຖ້າທ່ານຕ້ອງການທີ່ຄູ່ຈະຕອບກັບການກວມກັບຄວາມທີ່ບໍ່ມີການບໍ່ມີການຄັບຄັບຫຼືຖ້າທ່ານຕ້ອງການທີ່ຈະສະແດງຄູ່ຈາກສອງຫຼືຫຼາຍຄູ່ແບບທີ່ກະພິບກັນ，ຂໍ້ສະເໜີ data-inline="true":

ກໍານົດ

<a href="#pagetwo" data-role="button" data-inline="true">ຄົນທີ່ໄດ້ໄປຫາບົດຄືນ</a>

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

ຄູ່ປະຕິບັດລວມກັນ

jQuery Mobile ຍັງມີວິທີການຊັບພະຍາຍາມທີ່ງາມສຳລັບການລວມຄູ່ປະຕິບັດ:

ກະຈາຍ data-role="controlgroup" ກັບ data-type="horizontal|vertical" ເພື່ອກຳນົດການລວມກັນຄູ່ປະຕິບັດຄືກັບລະບົບສະພາບພາຍໃນ:

ກໍານົດ

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">ຄູ່ 1</a>
  <a href="#anylink" data-role="button">ຄູ່ 2</a>
  <a href="#anylink" data-role="button">ຄູ່ 3</a>
</div>

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

ຄຳແນະນຳ:ໂດຍປົກກະຕິຄູ່ປະຕິບັດການລວມກັນແມ່ນຫຼິ້ນຢ່າງຕາມຕົວຊີວິດທີ່ບໍ່ມີການບໍ່ມີການຄັອບຄັບທາງຫຼັງແລະຄວາມລະອຽດ. ແລະພຽງແຕ່ຄູ່ປະຕິບັດທໍາອິດແລະຄູ່ປະຕິບັດສຸດທ້າຍຈະມີການປອດວຽງທີ່ຫຼັກ. ແລະຫຼັງຈາກທີ່ລວມກັນຈະສ້າງຕັດຮູບແບບທີ່ສວຍງາມ.

ຄູ່ປະຕິບັດກັບຄືນ

ສຳລັບທີ່ຈະສ້າງຄູ່ປະຕິບັດກັບຄືນ，ລະບຸບັນດາຄູ່ມູນ data-rel="back" (ຈະຖືກລົບລ້າງຄູ່ມູນ href ຂອງຫົວໂຈມ):

ກໍານົດ

<a href="#" data-role="button" data-rel="back">ກັບຄືນ</a>

ທ່ານຕິດຕາມທີ່ຈະທົດສອບ

ມັນມີຫຼາຍກວ່ານັ້ນສຳລັບບັນດາຄູ່ມູນ data-* ສຳລັບຄູ່ປະຕິບັດ

ຄວາມຈຳນວນ ຄວາມມູນ ການອະທິບາຍ ກໍານົດ
data-corners true | false ການຄວາມມີສີຫຼັງຂອງກະຕ້າ. ການທົດລອງ
data-mini true | false ການຄວາມມີກະຕ້ານແບບນ້ອຍ. ການທົດລອງ
data-shadow true | false ການຄວາມມີສີຫຼັງຂອງກະຕ້າ. ການທົດລອງ

ສຳລັບຂໍ້ມູນທັງໝົດຂອງ jQuery Mobile data-* 属性, ກະລຸນາເຂົ້າມາທີ່ ຄູ່ມື jQuery Mobile Data 属性.

ການສະແດງຫລັງຈາກກະຕ້າສະແຫວງບັນບາງ.