jQuery Mobile Layout Grid

JQRUERY MOBILE : LAYOUT GRIDS (jm07) How to : 1.Download Aurasma App 2.Scan QR Code with Line 3.Scan picture Create by Natcha Thapthimsri Management Information System

วตั ถปุ ระสงค์ หนงั สอื เลม่ นจี ้ ดั ทำขนึ ้ โดยผ้จู ดั ทำมี วตั ถุประสงค์ ดงั นี ้•เพ่อื ให้ผ้อู ำ่ นได้รบั ควำมรู้เกี่ยวกับ jQuery MobileLayout Grid​•เพอ่ื ให้ผ้อู ำ่ นสำมำรถนำควำมรู้ในหนังสือเลม่ นีไ้ ปปรบั ใช้ในวิชำเรียนได้•เพ่อื ให้ผ้อู ำ่ นฝึกทกั ษะกำรเขียน C​ oding​•สำมำรถนำไปเป็นส่อื ประกอบกำรเรียนกำรสอนได้ 2

CONTENTLAYOUT GRIDS 4-5 CUSTOMIZE GRIDS 6 MULTIPLE ROWS 7 RESPONSIVE GRID 8-9แบบทดสอบLayout Grid 10REFERENCES 11 3

LAYOUT GRIDS➢Grid แปลว่า ตะแกรง โดยในการออกเบบเวบ็ ไซตด์ ว้ ย JQUERY MOBILE Grid คอื การแสดงขอ้ มลู ใน ลกั ษณะตารางปกติ ต่างจาก<table> ตรงที่ Grid ทา หนา้ ทกี่ าหนดโครงของตารางเป็น (Layout Grid)➢Grid ที่ JQUERY เตรียมมาใหน้ น้ั จะใชพ้ ้นื ท่ี แนวนอน ความกวา้ ง100% เนื่องจากอปุ กรณ์มขี นาด ควIาNมSกTวRา้ งUหCนTาI้ OจอNตS่าFงOกRนั USE➢Grid ที่ JQUERY มี 5 ลกั ษณะ

Coding การทา Layout Grid 5<div class=\"ui-grid-a\"> <div class=\"ui-block-a\"> <a href=\"#\" class=\"ui-btn ui-corner-all uishadow\">First Column Button</a><br> <span>First Column: This is some text. Thisis some text. This is some text. This is some text. This issome text. </span></div> <div class=\"ui-block-b\"> <a href=\"#\" class=\"ui-btn ui-corner-all uishadow\">Second Column Button</a><br> <span>Second Column: This is some text.This is some text. This is some text. This is sometext.</span> </div></div>

CUSTOMIZE GRIDS➢Customize Grid คอื การทผี่ อู้ อกแบบเวบ็ ตอ้ งการ ปรบั ปรุง Style ของ Grid ในส่วนของ CSS 6Coding การปรบั ปรุง Style <style> font-weight : bold; text-aling : center;.ui-block-a,.ui-block-b,.ui-block-c { padding : 30px; } background-color : ; </style border : 1px solid black; height : 100px;

MULTIPLE ROWS➢Multiple Row หรอื การทาตารางแบบหลายแถว เรา สามารถนา CSS ทป่ี ระกาศใช้ เรยี กใชไ้ ดต้ ลอดเวลาCoding การทาตารางแบบหลายแถว 7 <div data-role=\"main\" class=\"ui-content\"> <p>Three-column Layout:</p> <div class=\"ui-grid-b\"> <div class=\"ui-block-a\" style=\"border:1px solid black;\"><span>Some Text</span></div> <div class=\"ui-block-b\" style=\"border:1px solid black;\"><span>Some Text</span></div> <div class=\"ui-block-c\" style=\"border:1px solid black;\"><span>Some Text</span></div> </div> </div

RESPONSIVE GRID➢Responsive Grids คือ Grids หรอื ตาราง ที่ ตอบสนองผใู้ ช้ กรณีทหี่ นา้ จอ Web Browser มกี าร ปรบั เปลย่ี นขนาดไป หรอื แกนทใ่ี ชอ้ ปุ กรณเ์ ปลยี่ นไป หนา้ เวบ็ ก็จะถกู ปรบั ใหส้ อดคลอ้ งกบั หนา้ จอขนาดนนั้ ๆ โดยเพมิ่ value ในสว่ นของ Class ใน div 8

Coding การทาให้ Grid ตอบสนองต่อผูใ้ ช้<div class=\"ui-grid-b ui-responsive\"><div class=\"ui-block-a\"> <a href=\"#\" class=\"ui-btn ui-corner-all ui-shadow\">First ColumnButton</a><br> <span>First Column: This is sometext. This is some text. This is some text.This is some text. This is some text.</span></div><div class=\"ui-block-b\"> <a href=\"#\" class=\"ui-btn ui-corner-all ui-shadow\">Second ColumnButton</a><br> <span>Second Column: This issome text. This is some text. This is sometext. This is some text.</span></div><div class=\"ui-block-c\"> <a href=\"#\" class=\"ui-btn ui-corner-all ui-shadow\">Third ColumnButton</a><br> <span>ThirdColumn: This is some text. This is some text.This is some text. This is some text.</span></div></div> 9

แบบทดสอบjQuery Mobile : Layout Grid 10

REFERENCES •อาจารย์ ณฐั ภทั ร แกว้ รตั นภทั ร.(2560). Responsive Web Design ,2, 136-143 •เน้ือหา : http://demos.jquerymobile.c om/1.4.1/grids/​ นางสาวณชั ชา ทบั ทมิ ศรี รหสั นกั ศึกษา 60123468043 11

JQRUERY MOBILE :LAYOUT GRIDS 12