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>

亲自试一试