[jQuery Mobile] Web/App Hybrid 만들기 6. ui-grid

6. ui-grid

6-1. ui-grid-a

<fieldset class="ui-grid-a">
  <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div> 
</fieldset> 

6-2.ui-grid-b

<div class="ui-grid-b">
  <div class="ui-block-a"><button type="button" data-theme="c">Hmm</button></div>
  <div class="ui-block-b"><button type="button" data-theme="a">No</button></div>
  <div class="ui-block-c"><button type="button" data-theme="d">Yes</button></div>
</div>

6-3. ui-grid-c

25%/25%/25%/25%로 grid 4개로 컬럼을 만들 수 있습니다.

6-4. ui-grid-d

20%/20%/20%/20%/20%로 grid 5개로 컬럼을 만들 수 있습니다.

6-5. 응용

Multiple row grids

Grids in toolbars

사이즈 조절은 style="width=100%" 로 조절할 수 있습니다.

<fieldset class="ui-grid-a">   <div class="ui-block-a" style="width:75%"><input type="text" /></div> <div class="ui-block-b" style="width:25%"><button type="submit" >전송</button></div>  </fieldset>