ถัดไป ก่อนหน้า

3.4 Content Formatting

     b. Layout grids

   ไม่แนะนำให้ใช้การจัดlayoutแบบหลายๆคอลัมน์ในโทรศัพท์มือถือเพราะความกว้างของหน้าจอ แคบ หากจำเป็นต้องวางองค์ประกอบในพื้นที่เล็กๆไว้ด้านข้าอาจใช้ elements :side-by-side เช่นปุ่มหรือแท็บนำทาง
   framework ของ jQuery Mobile มีวิธีในการสร้างคอลัมน์ที่ง่ายๆด้วย CSS-based โดยเรียกใช้ class : ui-grid ซึ่งมีให้เลือกอยู่ 4 รูปแบบ

• 2 คอลัมน์ ใช้ class : ui-grid-a
• 3 คอลัมน์ ใช้ class : ui-grid-b
• 4 คอลัมน์ ใช้ class : ui-grid-c
• 5 คอลัมน์ ใช้ class : ui-grid-d

   โดย Grid จะมีความกว้าง 100% โดยไม่มี borders , backgrounds, padding และ margins จึงไม่ควรแก้ไขรูปแบบของ elementภายใน ซึ่งพื้นที่ของ grid จะมีelement ui-block-a/b/c/d/ อยู่ภายในฟอร์มของGrid โดยแต่ละ block element float side-by-side ซึ่ง class: ui-block-a จะclears the floats และจะขึ้นบรรทัดใหม่

Grid แบบ 2 คอลัมน์(Two column grids)

   การสร้าง layout แบบ 2 คอลัมน์ (50/50%) จะเริ่มต้นด้วย class : ui-grid-a และเพิ่มพื้นที่ย่อยๆลงไปในคลาสโดยจะเพิ่ม ui-block-a เพื่อสร้างคอลัมน์แรก และ ui-block-bเป็นคอลัมน์ที่สอง ตัวอย่างค่าเริ่มต้นของ default grid blocks ที่ไม่มีการกำหนดรูปแบบ โดยจะแสดงเนื้อหาง่ายๆแบบ side-by-side.

CD ไฟล์: Two column grids.html

   Class ของ grid สามารถนำไปใช้ในส่วนอื่ๆนได้ เช่น เพิ่ม ui-grid-a ลงใน fieldset และเพิ่มclass ui-blockลงในนั้น 2 ปุ่ม โดยแต่ละปุ่มจะมีความกว้าง 50%ของหน้าจอ

CD ไฟล์: Applied Grid classes to any container.html

การเพิ่มขอบ (margin) ซ้ายและขวา ที่ปุ่มในตาราง(grid)

• ในกรณีที่มี 1 ปุ่ม สามารถครอบด้วย Class ที่ชื่อว่า ui-grid-solo และครอบปุ่มด้วย div class ui-block-

วิธีนี้ปุ่มจะมีขอบที่เท่ากัน

CD ไฟล์: Add margin to buttons in a grid.html

   ถ้าไม่ได้ใช้ attribute : data-theme จากระบบ theming สามารถเพิ่ม element และเรียกใช้ grid ได้ ด้วยการเพิ่ม class 2 class โดยเพิ่ม class: ui-bar เพื่อใช้เป็นค่า default bar padding และ เพิ่ม class : ui-bar-e เพื่อใช้เป็น gradient ของ background และรูปแบบของ font และใช้ attribute : inline style="height:120px" เพิ่มลงในแต่ละตารางเพื่อกำหนดความสูงมาตรฐาน

CD ไฟล์: Not used data-theme attributes.html

Grid แบบ 3 คอลัมน์(Three-column grids)

   องค์ประกอบของ grid layoutแบบอื่นๆ ใช้ class=ui-grid-b บนพื้นที่แม่ และเพิ่ม class: ui-block-a/b/c ลงในแต่ละชั้นเพื่อสร้าง layout 3 คอลัมน์ (33/33/33%) หมายเหตุ: ในการสร้าง grid layout บล็อกเหล่านี้จะเรียกใช้ class : theme จึงทำให้มองเห็นได้อย่างชัดเจน

CD ไฟล์: Three-column grids.html

ตัวอย่าง 3 คอลัมน์ที่มีปุ่มอยู่ภายใน

ตัวอย่างหน้าจอ

Grid แบบ 4 คอลัมน์(Four-column grids)

   4 คอลัมน์จะแบ่งเป็น 25/25/25/25% โดยจะถูกสร้างขึ้นโดยการระบุ class = ui-grid-c บนพื้นที่แม่ และเพิ่มอีก 4 block

ตัวอย่างหน้าจอ

Grid แบบ 5 คอลัมน์(Five-column grids)

   5 คอลัมน์จะแบ่งเป็น 20/20/20/20/20% จะถูกสร้างขึ้นโดยการระบุ class = ui-grid-d บนพื้นที่แม่ และเพิ่มอีก 5 block

Grid แบบหลายๆแถว(Multiple row grids)

   มีการออกแบบมาเพื่อครอบItemsหลายๆแถว เช่นเพิ่ม block 9 blockลงใน 3 คอลัมน์ โดยจะถูกครอบเป็น 3 แถว โดยแต่ละแถวจะมี 3 items ซึ่งเป็นกฎของ cssที่จะ clear the floats และขึ้นบรรทัดใหม่

ตัวอย่างหน้าจอ

Grids in toolbars

   Gridจะเป็นประโยชน์สำหรับการสร้างlayoutภายในtoolbarได้ เช่น สร้าง 3 คอลัมน์ใน footer

ตัวอย่างหน้าจอ