CSMJU jQuery Mobile

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

3.4 Content Formatting

การจัดรูปแบบเนื้อหา

   jQuery Mobile สามารถเรียกใช้เพื่อกำหนดค่าของ widgets และ utilities เพื่อแสดงเนื้อหา โดยมีลักษณะของ HTML และ layout grids ที่เรียบง่ายสำหรับสร้างlayoutหลายๆคอลัมน์ รวมทั้งยังสามารถเรียกใช้ collapsibles และ accordions เพื่อจัดการเนื้อหาบนหน้าจอขนาดเล็กได้อีกด้วย

     a. Basic HTML Style

   วิธีการเริ่มต้นคือการจัดแต่งเนื้อหาใน jQuery Mobile ให้เป็นเรื่องง่าย โดยใช้ light hand เพื่อให้แสดงส่วนสำคัญของเบราว์เซอร์และ เพิ่มบิตของ paddingเพื่อให้สามารถอ่านสะดวก สบายมากขึ้น และใช้ theming system เข้ามาช่วยเกี่ยวกับ font และ colors

   ค่าเริ่มต้นรูปแบบของ HTML markup(Default HTML markup styling)

     ค่าเริ่มต้นของธีม ธีมของ jQuery Mobile จะใช้ HTML และขนาดที่มาตรฐานเพื่อ element มาร์กอัปมาตรฐานเช่น ในส่วน headers, paragraph content, block quotes, anchor links, standard ordered, tables ,unordered และ definition lists

CD: Heading.html

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

   ตัวอย่างการเพิ่ม styles tables และ fieldsets ให้อ่านง่าย และแทนที่ด้วยรูปแบบที่สร้างขึ้นเองโดยเรียกใช้ ไฟล์ CSS และ Java Scriptที่สร้างขึ้นเอง เช่น


<script src="jqm-docs.js"></script>
<link rel="s
tylesheet" href="jqm-docs.css"/>

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

  • Unordered list item 1
  • Unordered list item 1
  • Unordered list item 1
  1. Ordered list item 1
  2. Ordered list item 1
  3. Ordered list item 1
Definition term
I'm the definition text
Definition term
I'm the definition text
Travel Itinerary
Flight: From: To:
Total: 3 flights
JetBlue 983 Boston (BOS) New York (JFK)
JetBlue 354 San Francisco (SFO) Los Angeles (LAX)
JetBlue 465 New York (JFK) Portland (PDX)