ການສ້າງກັບກັບ jQuery Mobile

ການຈັດການອາຄານ jQuery Mobile

jQuery Mobile ຍັງມີການຈັດການສະໜາມວົງກວ້າງຕາມ CSS. ແຕ່ບໍ່ມີຄວາມເຫັນດີໃນການໃຊ້ການຈັດການສະໜາມການອອກອາກາດໃນອຸປະກອນສະໜາມນີ້, ຍ້ອນວ່າວົງກວ້າງຈອງອຸປະກອນສະໜາມນີ້ຈະຍັງຈຳນວນຫຼາຍ.

ແຕ່ບາງຄັ້ງທ່ານຕ້ອງທີ່ຈະຈັດການທີ່ນ້ອຍຫຼາຍກວ່າ, ເຊັ່ນວ່າຕັບຕາຍຫຼືການນຳທາງ, ຄືກັບການສະໜາມອາກາດດຽວກັນ. ໃນບໍລິສັດນີ້, ການຈັດການສະໜາມການອອກອາກາດແມ່ນຂັ້ນສະຖານທີ່ຫຼາຍຄວາມມະນຸດສະດຸ.

ວົງກວ້າງຂອງມຸມສະຖານທີ່ແມ່ນມີວົງກວ້າງດຽວກັນ (ວົງກວ້າງທັງໝົດ 100%), ບໍມີວົງກວ້າງ, ພາບຫຼັງ, ຂອບເຂດດ້ານອອກຫຼາຍ ຫຼື ບໍຂອບເຂດດ້ານໃນ.

ມີປະເພດຈັດການສະໜາມທີ່ຫຼາຍພຽງສີ່ປະເພດ:

ປະເພດມຸມສະຖານທີ່: ວົງກວ້າງ ການຈັດການວົງກວ້າງຂອງການອອກອາກາດ: ກັບ ຄວາມຈະຕັດ
ui-grid-a 2 50% / 50% ui-block-a|b ການທົດລອງ
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c ການທົດລອງ
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d ການທົດລອງ
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e ການທົດລອງ

ຄຳເຕືອນ:ໃນການຈັດການສະໜາມການອອກອາກາດ, ດ້ວຍຈຸດສະໜາມທີ່ຕ່າງກັນຂອງການອອກອາກາດ, ສິບລົດພາຍໃນສາມການ ປະເພດ ui-block-a|b|c|d|e. ການອອກອາກາດຈະຍ້າຍຕາມທີ່ສະໜາມກັນ.

ຄວາມຈະຕັດ 1: ສໍາລັບ ປະເພດ ui-grid-a (ການຈັດການສະໜາມສອງການ): ຕ້ອງໃຫ້ມີສິບລົດພາຍໃນ ປະເພດ ui-block-a, ui-block-b.

ຄວາມຈະຕັດ 2: ສໍາລັບ ປະເພດ ui-grid-b (ການຈັດການສະໜາມສາມການ): ຕ້ອງໃຫ້ມີສິບລົດພາຍໃນ ປະເພດ ui-block-a, ui-block-b, ui-block-c.

ຈັດການຊັບສິນມຸມສະຖານທີ່ສະໜາມ:

ທ່ານສາມາດຈັດການຊັບສິນບັນດາການຫຼັງໃນ CSS:

ຄວາມຈະຕັດ

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

ທຳການທົດລອງດ້ວຍຕົວເອງ

ທ່ານສາມາດຈະຈັດການຊັບສິນບັນດາການຫຼັງໃນການໃຊ້ກົດລະບຽບບໍລິໂພກ:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

ຫຼາຍອອກມາໃນການສະແດງຕາມການ:

ມີການບັນທຶກຫຼາຍອອກມາໃນການສະແດງຕາມການ:

ຄວາມເຫັນ:ui-block-a-class ຈະສ້າງປະຕູໃໝ່ຕະຫຼອດ:

ຄວາມຈະຕັດ

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

ທຳການທົດລອງດ້ວຍຕົວເອງ