สร้างเว็บไซต์บนมือถือด้วย jQuery Mobile

เนื้อหา

• วิธีเขียนโค้ดหลายหน้าในไฟล์ HTML เดียว
• คำอธิบาย
• วิธีใช้กล่องโต้ตอบและช่วงการเปลี่ยนภาพ
• การเปลี่ยนที่สามารถใช้ได้
• คำอธิบาย
• วิธีสร้างปุ่ม
• คำอธิบาย
• วิธีสร้างแถบนำทาง
• วิธีเขียนโค้ด HTML สำหรับแถบนำทาง:
• วิธีจัดรูปแบบเนื้อหาด้วย jQuery Mobile
• สไตล์เริ่มต้นที่ jQuery Mobile ใช้
• คำอธิบาย
• วิธีใช้ธีมกับองค์ประกอบ HTML
• สองวิธีในการใช้ธีม:
• คำอธิบาย
• มุมมอง

นี่คือข้อความที่ตัดตอนมาจากบทที่ 15 ของ HTML5 และ CSS3 ของ Murach โดย Zak Ruvalcaba และ Anne Boehm

jQuery Mobile เป็นไลบรารี JavaScript แบบโอเพ่นซอร์สข้ามแพลตฟอร์มฟรีที่คุณสามารถใช้เพื่อพัฒนาเว็บไซต์บนอุปกรณ์เคลื่อนที่ ไลบรารีนี้ให้คุณสร้างเพจที่มีลักษณะและความรู้สึกเหมือนเพจของแอพพลิเคชั่นมือถือดั้งเดิม

แม้ว่าปัจจุบัน jQuery Mobile จะมีให้บริการเป็นเวอร์ชันทดสอบเบต้า แต่เวอร์ชันนี้ก็มีคุณลักษณะทั้งหมดที่คุณต้องการสำหรับการพัฒนาเว็บไซต์บนอุปกรณ์เคลื่อนที่ที่ยอดเยี่ยมอยู่แล้ว ดังนั้นคุณสามารถเริ่มใช้งานได้ทันที คุณยังสามารถคาดหวังว่าเวอร์ชันนี้จะได้รับการปรับปรุงอย่างต่อเนื่องดังนั้น jQuery Mobile จะดีขึ้นเท่านั้น

ในบทความนี้คุณจะได้เรียนรู้เทคนิคพื้นฐานในการสร้างหน้าเว็บไซต์บนอุปกรณ์เคลื่อนที่ ซึ่งจะรวมถึงการใช้กล่องโต้ตอบปุ่มและแถบนำทาง

วิธีเขียนโค้ดหลายหน้าในไฟล์ HTML เดียว

ตรงกันข้ามกับวิธีที่คุณพัฒนาหน้าเว็บสำหรับเว็บไซต์หน้าจอ jQuery Mobile ให้คุณสร้างหลายหน้าในไฟล์ HTML เดียว นี่แสดงโดยรูปที่ 15-7 ที่นี่คุณจะเห็นสองหน้าของไซต์พร้อมกับ HTML สำหรับหน้าเหล่านี้ สิ่งที่น่าแปลกใจคือทั้งสองหน้าถูกเข้ารหัสภายในไฟล์ HTML ไฟล์เดียว

สำหรับแต่ละหน้าคุณโค้ดองค์ประกอบ div 1 รายการโดยมี "page" เป็นค่าของแอตทริบิวต์ data-role จากนั้นภายในองค์ประกอบ div แต่ละองค์ประกอบคุณจะเขียนโค้ดองค์ประกอบ div สำหรับส่วนหัวเนื้อหาและส่วนท้ายของแต่ละหน้า หลังจากนั้นเมื่อโหลดไฟล์ HTML หน้าแรกในเนื้อหาของไฟล์จะปรากฏขึ้น

ในการเชื่อมโยงระหว่างหน้าในไฟล์ HTML คุณใช้ตัวยึดตำแหน่งดังที่แสดงในรูปที่ 7-11 ของบทที่ 7 ตัวอย่างเช่นองค์ประกอบ a> ในหน้าแรกในตัวอย่างนี้จะไปที่ "#toobin" เมื่อผู้ใช้แตะที่ องค์ประกอบ h2 หรือ img ที่เข้ารหัสเป็นเนื้อหาสำหรับลิงค์นี้ นี่หมายถึงองค์ประกอบ div ที่มี "toobin" เป็นแอตทริบิวต์ id ซึ่งหมายความว่าการแตะที่ลิงก์จะนำผู้อ่านไปยังหน้าที่สองในไฟล์

แม้ว่าตัวอย่างนี้จะแสดงเพียงสองหน้า แต่คุณสามารถโค้ดหลายหน้าภายในไฟล์ HTML เดียวได้ อย่างไรก็ตามโปรดจำไว้ว่าทุกหน้าพร้อมกับไฟล์รูปภาพ JavaScript และ CSS จะโหลดด้วยไฟล์ HTML ไฟล์เดียว ด้วยเหตุนี้เวลาในการโหลดจะมากเกินไปหากคุณเก็บเพจไว้มากเกินไปในไฟล์เดียว ในกรณีนี้คุณสามารถแบ่งหน้าของคุณเป็นไฟล์ HTML ได้มากกว่าหนึ่งไฟล์

HTML สำหรับสองหน้าในเนื้อหาของไฟล์ HTML หนึ่งไฟล์:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> ลำโพง 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 ตุลาคม 2554 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - องค์ประกอบของผู้พูด - -> / section> ส่วนท้าย data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> ศาลากลาง SJV / h1> / header> ส่วน data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "เจฟฟรีย์ Toobin "> p> ผู้เขียนหนังสือขายดีที่สะเทือนใจ i> The Nine:! - THE COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

คำอธิบาย

• เมื่อคุณใช้ jQuery Mobile คุณไม่จำเป็นต้องพัฒนาไฟล์ HTML แยกกันสำหรับแต่ละหน้า แต่ภายในองค์ประกอบเนื้อหาของไฟล์ HTML เดียวคุณจะเขียนโค้ดองค์ประกอบ div 1 รายการสำหรับแต่ละหน้าโดยตั้งค่าแอตทริบิวต์ data-role เป็น "page"
• สำหรับแต่ละองค์ประกอบ div คุณตั้งค่าแอตทริบิวต์ id เป็นค่าตัวยึดที่สามารถเข้าถึงได้โดยแอตทริบิวต์ href ในองค์ประกอบ a> ของเพจอื่น ๆ

วิธีใช้กล่องโต้ตอบและช่วงการเปลี่ยนภาพ

รูปที่ 15-8 แสดงวิธีสร้างกล่องโต้ตอบที่เปิดขึ้นเมื่อมีการแตะลิงค์ ในการทำเช่นนั้นให้คุณเขียนโค้ดกล่องโต้ตอบเช่นเดียวกับที่คุณทำกับหน้าใด ๆ แต่ในองค์ประกอบ a> ที่ไปยังหน้านั้นคุณเขียนโค้ดแอตทริบิวต์ data-rel โดยมี "dia-log" เป็นค่าของมัน

ดังตัวอย่างในรูปนี้ไฟล์ jQuery Mobile CSS จัดรูปแบบกล่องโต้ตอบแตกต่างจากหน้าเว็บปกติ ตามค่าเริ่มต้นกล่องโต้ตอบจะมีพื้นหลังสีเข้มพร้อมข้อความเบื้องหน้าสีขาวและส่วนหัวและส่วนท้ายจะไม่ขยายความกว้างของหน้า กล่องโต้ตอบจะมี“ X” ในส่วนหัวที่ผู้ใช้ต้องแตะเพื่อกลับไปยังหน้าที่แล้ว

เมื่อคุณเขียนโค้ด a> องค์ประกอบที่ไปยังหน้าหรือกล่องโต้ตอบอื่นคุณยังสามารถใช้แอตทริบิวต์การเปลี่ยนข้อมูลเพื่อระบุการเปลี่ยนหนึ่งในหกรายการที่สรุปไว้ในตารางในรูปนี้ การเปลี่ยนแต่ละครั้งมีขึ้นเพื่อเลียนแบบเอฟเฟกต์ที่อุปกรณ์เคลื่อนที่อย่าง iPhone ใช้

การเปลี่ยนที่สามารถใช้ได้

HTML ที่เปิดหน้าเป็นกล่องโต้ตอบที่มีการเปลี่ยน "ป๊อป":

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML ที่เปิดหน้าที่มีการเปลี่ยน "จาง":

a href = "# toobin" data-transition = "fade">

คำอธิบาย

• HTML สำหรับไฟล์ กล่องโต้ตอบ ถูกเข้ารหัสด้วยวิธีการเข้ารหัสหน้าใด ๆ อย่างไรก็ตามองค์ประกอบ a> ที่เชื่อมโยงไปยังหน้าจะมีแอตทริบิวต์ data-rel โดยมี "กล่องโต้ตอบ" เป็นค่า ในการปิดกล่องโต้ตอบผู้ใช้แตะ X ในส่วนหัวของกล่อง
• ในการระบุวิธีเปิดเพจหรือกล่องโต้ตอบคุณสามารถใช้แอตทริบิวต์การเปลี่ยนข้อมูลกับค่าใดค่าหนึ่งในตารางด้านบน หากอุปกรณ์ไม่รองรับการเปลี่ยนแปลงที่คุณระบุแอตทริบิวต์จะถูกละเว้น
• การจัดรูปแบบสำหรับกล่องโต้ตอบทำได้โดยไฟล์ jQuery Mobile CSS

วิธีสร้างปุ่ม

รูปที่ 15-9 แสดงวิธีใช้ปุ่มเพื่อนำทางจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง ในการทำเช่นนั้นคุณเพียงแค่ตั้งค่าแอตทริบิวต์ data-role สำหรับ a> element เป็น "button" จากนั้น jQuery Mobile จะจัดการส่วนที่เหลือให้
อย่างไรก็ตามคุณยังสามารถตั้งค่าคุณลักษณะอื่น ๆ สำหรับปุ่มต่างๆ ตัวอย่างเช่นหากคุณต้องการให้ปุ่มสองปุ่มขึ้นไปปรากฏเคียงข้างกันเช่นปุ่มสองปุ่มแรกในรูปนี้คุณสามารถตั้งค่าแอตทริบิวต์ data-inline เป็น "true" ได้

หากคุณต้องการเพิ่มไอคอน 18 ไอคอนที่มีให้โดย jQuery Mobile ลงในปุ่มคุณจะต้องเขียนโค้ดแอตทริบิวต์ data-icon ด้วย ตัวอย่างเช่นปุ่มที่สามในตัวอย่างนี้ใช้ไอคอน "ลบ" และปุ่มที่สี่ใช้ไอคอน "บ้าน" ไอคอนทั้งหมดเหล่านี้ดูเหมือนไอคอนที่คุณอาจเห็นในแอปพลิเคชันมือถือที่มาพร้อมเครื่อง อนึ่งไอคอนเหล่านี้ไม่ใช่ไฟล์แยกต่างหากที่เพจต้องเข้าถึง แต่จะมีให้โดยไลบรารี jQuery Mobile

หากคุณต้องการจัดกลุ่มปุ่มสองปุ่มขึ้นไปในแนวนอนเช่นปุ่มใช่ไม่ใช่และอาจจะในรูปนี้คุณสามารถโค้ดองค์ประกอบ a> สำหรับปุ่มภายในองค์ประกอบ div ที่มี "กลุ่มควบคุม" เป็นแอตทริบิวต์บทบาทข้อมูลและ "แนวนอน" เป็นแอตทริบิวต์ประเภทข้อมูล หรือหากต้องการจัดกลุ่มปุ่มในแนวตั้งคุณสามารถเปลี่ยนแอตทริบิวต์ประเภทข้อมูลเป็น "แนวตั้ง"

หากคุณตั้งค่าแอตทริบิวต์ data-rel สำหรับปุ่มเป็น "back" และแอตทริบิวต์ href เป็นสัญลักษณ์ปอนด์ (#) ปุ่มจะกลับไปที่หน้าที่เรียกมัน กล่าวอีกนัยหนึ่งคือปุ่มทำงานเหมือนปุ่มย้อนกลับ นี่แสดงโดยปุ่มสุดท้ายในเนื้อหาของเพจ

สองปุ่มสุดท้ายแสดงให้เห็นว่าปุ่มต่างๆปรากฏในส่วนท้ายของหน้าอย่างไร ไอคอนและข้อความจะเป็นสีขาวตัดกับพื้นหลังสีดำ ในกรณีนี้แอตทริบิวต์คลาสสำหรับส่วนท้ายจะถูกตั้งค่าเป็น "ui-bar" ซึ่งจะบอก jQuery Mobile ว่าควรเพิ่มพื้นที่รอบ ๆ เนื้อหาของส่วนท้ายอีกเล็กน้อย คุณจะได้เรียนรู้เพิ่มเติมในรูปที่ 15-12

HTML สำหรับปุ่มในส่วน:

! - สำหรับปุ่มแบบอินไลน์ให้ตั้งค่าแอตทริบิวต์ data-line เป็น true -> a href = "#" data-role = "button" data-inline = "true"> ยกเลิก / a> a href = "#" data -role = "button" data-inline = "true"> ตกลง / a>! - ในการเพิ่มไอคอนลงในปุ่มให้ใช้แอตทริบิวต์ data-icon -> a href = "#" data-role = "button "data-icon =" delete "> ลบ / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - ในการจัดกลุ่มปุ่มให้ใช้องค์ประกอบ div กับ แอตทริบิวต์ที่ตามมา -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> ใช่ / a> a href = "#" data-role = "button" data-icon = "arrow-d"> ไม่ / a> a href = "#" data-role = "button"> อาจจะ / a> / div>! - ถึง รหัสปุ่มย้อนกลับตั้งค่าแอตทริบิวต์ data-rel เป็น back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> กลับไปหน้าก่อนหน้า / a >

HTML สำหรับปุ่มในส่วนท้าย:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> เพิ่มใน Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> ทวีตหน้านี้ / a> / footer>

คำอธิบาย

• ในการเพิ่มปุ่มลงในหน้าเว็บให้คุณเขียนโค้ด a> องค์ประกอบโดยตั้งค่าแอตทริบิวต์ data-role เป็น "button"

วิธีสร้างแถบนำทาง

รูปที่ 15-10 แสดงวิธีเพิ่มแถบนำทางในเว็บเพจ ในการทำเช่นนั้นคุณเขียนโค้ดองค์ประกอบ div โดยตั้งค่า data-role เป็น“ navbar” ภายในองค์ประกอบนี้คุณเขียนโค้ดองค์ประกอบ ul ที่มีองค์ประกอบ li ที่มีองค์ประกอบ a> สำหรับรายการในแถบนำทาง อย่างไรก็ตามโปรดทราบว่าคุณไม่ได้เขียนโค้ดแอตทริบิวต์ data-role สำหรับองค์ประกอบ a>

ในการเปลี่ยนสีของรายการในแถบการนำทางโค้ดในตัวอย่างนี้จะมีแอตทริบิวต์ data-theme-b สำหรับแต่ละรายการ ด้วยเหตุนี้ jQuery Mobile จึงเปลี่ยนสีพื้นหลังของแต่ละรายการจากสีดำซึ่งเป็นค่าเริ่มต้นเป็นสีน้ำเงินที่น่าสนใจ นอกจากนี้รหัสนี้ยังตั้งค่าแอตทริบิวต์คลาสสำหรับปุ่มที่ใช้งานอยู่เป็น“ ui-btn-active” ดังนั้น jQuery Mobile จึงเปลี่ยนสีของปุ่มที่ใช้งานเป็นสีฟ้าอ่อน สิ่งนี้แสดงให้เห็นว่าคุณสามารถเปลี่ยนการจัดรูปแบบที่ใช้โดย jQuery Mobile ได้อย่างไรและคุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งต่อไป

HTML สำหรับแถบนำทาง:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> หน้าแรก / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> ลำโพง / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> ติดต่อเรา / a> / li> / ul> / div> / header>

วิธีเขียนโค้ด HTML สำหรับแถบนำทาง:

• รหัสองค์ประกอบ div ภายในองค์ประกอบส่วนหัว จากนั้นตั้งค่าแอตทริบิวต์ data-role สำหรับองค์ประกอบ div เป็น "navbar"
• ภายในองค์ประกอบ div รหัสองค์ประกอบ ul ที่มีองค์ประกอบ li หนึ่งรายการสำหรับแต่ละลิงก์
• ภายในแต่ละองค์ประกอบ li ให้โค้ด a> องค์ประกอบที่มีแอตทริบิวต์ href ที่ใช้ตัวยึดสำหรับหน้าที่ลิงก์ควรไป จากนั้นตั้งค่าแอตทริบิวต์ไอคอนข้อมูลเป็นไอคอนที่คุณเลือก
• สำหรับรายการที่ใช้งานอยู่ในแถบนำทางให้ตั้งค่าแอตทริบิวต์คลาสเป็น“ ui-btn-active”จากนั้นสีของรายการนี้จะอ่อนกว่ารายการอื่น ๆ ในแถบนำทาง
• คุณควรใช้แอตทริบิวต์ data-theme เพื่อใช้ธีม jQuery Mobile กับแต่ละรายการในแถบนำทาง มิฉะนั้นปุ่มในแถบจะเป็นสีเดียวกับส่วนหัวที่เหลือ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ธีมโปรดดูรูปที่ 15-12

วิธีจัดรูปแบบเนื้อหาด้วย jQuery Mobile

อย่างที่คุณเห็นแล้ว jQuery Mobile จะจัดรูปแบบส่วนประกอบของหน้าเว็บโดยอัตโนมัติตามสไตล์ชีตของตัวเอง ตอนนี้คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งนั้นรวมถึงวิธีปรับแต่งสไตล์เริ่มต้นที่ jQuery Mobile ใช้

สไตล์เริ่มต้นที่ jQuery Mobile ใช้

รูปที่ 15-13 แสดงสไตล์เริ่มต้นที่ jQuery Mobile ใช้สำหรับองค์ประกอบ HTML ทั่วไป สำหรับรูปแบบทั้งหมด jQuery Mobile อาศัยเอ็นจิ้นการเรนเดอร์ของเบราว์เซอร์ดังนั้นสไตล์ของตัวเองจึงมีน้อย ซึ่งจะช่วยให้เวลาในการโหลดเร็วขึ้นและลดค่าใช้จ่ายที่ CSS มากเกินไปจะกำหนดบนหน้าเว็บ

อย่างที่คุณเห็นการจัดแต่งทรงผมของ jQuery Mobile นั้นมีประสิทธิภาพมากจนคุณไม่จำเป็นต้องปรับเปลี่ยนสไตล์โดยจัดเตรียมสไตล์ชีต CSS ของคุณเอง ตัวอย่างเช่นระยะห่างระหว่างรายการในรายการที่ไม่เรียงลำดับและการจัดรูปแบบของตารางเป็นที่ยอมรับในแบบที่เป็นอยู่ นอกจากนี้ประเภทสีดำบนพื้นหลังสีเทายังสอดคล้องกับการจัดรูปแบบสำหรับแอปพลิเคชันมือถือดั้งเดิม

คำอธิบาย

• โดยค่าเริ่มต้น jQuery Mobile จะนำสไตล์ไปใช้กับองค์ประกอบ HTML สำหรับเพจโดยอัตโนมัติ สไตล์เหล่านี้ไม่เพียง แต่น่าสนใจ แต่ยังเลียนแบบสไตล์เนทีฟของเบราว์เซอร์ด้วย
• ตามค่าเริ่มต้น jQuery Mobile จะใช้ช่องว่างภายในเล็กน้อยที่ด้านซ้ายขวาด้านบนและด้านล่างของแต่ละหน้าบนอุปกรณ์เคลื่อนที่
• โดยค่าเริ่มต้นลิงก์จะมีขนาดใหญ่กว่าข้อความปกติเล็กน้อย ทำให้ผู้ใช้แตะลิงก์ได้ง่ายขึ้น
• โดยค่าเริ่มต้นลิงก์จะขีดเส้นใต้ด้วยสีน้ำเงินเป็นสีแบบอักษร

วิธีใช้ธีมกับองค์ประกอบ HTML

ในบางกรณีคุณอาจต้องการเปลี่ยนรูปแบบเริ่มต้นที่ jQuery Mobile ใช้ คุณเคยเห็นสิ่งนั้นในแถบนำทางของรูปที่ 15-10 ในการเปลี่ยนสไตล์เริ่มต้นคุณสามารถใช้ห้าธีมที่ jQuery Mobile มีให้ สรุปได้ในรูปที่ 15-12 อีกครั้งธีมเหล่านี้มีขึ้นเพื่อเลียนแบบลักษณะที่ปรากฏของแอปพลิเคชันมือถือดั้งเดิม

วิธีหนึ่งในการใช้ธีมคือการโค้ดแอตทริบิวต์ data-theme โดยมีตัวอักษรของธีมเป็นค่า คุณเห็นสิ่งนี้ในแถบนำทางในรูปที่ 15-10 และคุณจะเห็นสิ่งนี้ในรหัสสำหรับแถบนำทางที่สองในรูปนี้ ที่นี่แอตทริบิวต์ data-theme ใช้ธีม“ e” กับส่วนหัวและธีม“ d” กับรายการในแถบนำทาง

วิธีอื่นในการใช้ธีมคือการตั้งค่าแอตทริบิวต์คลาสสำหรับองค์ประกอบเป็นชื่อคลาสที่ระบุธีม นี่แสดงโดยตัวอย่างแรกหลังตาราง ที่นี่แอตทริบิวต์คลาสใช้เพื่อใช้ทั้งคลาส "ui-bar" และ "ui-bar- b" กับองค์ประกอบ div ด้วยเหตุนี้ jQuery Mobile จะใช้สไตล์เริ่มต้นสำหรับแถบกับองค์ประกอบก่อนจากนั้นจึงใช้ธีม b กับสไตล์นั้น ในหน้าถัดไปคุณจะเห็นตัวอย่างอื่น ๆ ของการจัดแต่งทรงผมประเภทนี้

โปรดทราบว่าตารางในรูปนี้ระบุว่าให้ใช้ธีมเท่าที่จำเป็น นั่นเป็นเพราะใช้สีส้มซึ่งเหมาะสำหรับการเน้นเสียง แต่ไม่น่าสนใจในปริมาณมาก นี่แสดงโดยส่วนหัวที่สองและแถบนำทางในรูปนี้ซึ่งมีแนวโน้มที่จะสั่นสะเทือนเมื่อคุณเห็นเป็นสี

โดยทั่วไปควรใช้สไตล์เริ่มต้นและสามธีมแรกซึ่งมักจะทำงานร่วมกันได้ดี จากนั้นคุณสามารถทดลองใช้ธีม d และ e เมื่อคุณคิดว่าคุณต้องการอะไรเพิ่มเติม

HTML สำหรับส่วนหัวที่สองและแถบนำทาง:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> หน้าแรก / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> ลำโพง / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> ข่าวสาร / a> / li> / ul> / div> / header>

ธีม jQuery Mobile ทั้งห้า:

สองวิธีในการใช้ธีม:

โดยใช้แอตทริบิวต์ data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> หน้าแรก / a> / li>

โดยใช้แอตทริบิวต์คลาสที่ระบุธีม:

div> แถบ / div>

คำอธิบาย

• ด้วยการใช้ห้าธีมที่มาพร้อมกับ jQuery Mobile คุณสามารถปรับเปลี่ยนสไตล์เริ่มต้นสำหรับองค์ประกอบ HTML ได้อย่างเหมาะสม
• แม้ว่าคุณจะสามารถใช้สไตล์ชีต CSS ของคุณเองกับแอปพลิเคชัน jQuery Mobile ได้ แต่คุณควรหลีกเลี่ยงการทำเช่นนั้นทุกครั้งที่ทำได้

มุมมอง

การใช้อุปกรณ์เคลื่อนที่เพิ่มขึ้นอย่างรวดเร็วในช่วงไม่กี่ปีที่ผ่านมา ด้วยเหตุนี้การออกแบบเว็บไซต์ที่ใช้งานง่ายจากอุปกรณ์เหล่านี้จึงมีความสำคัญมากขึ้นเรื่อย ๆ แม้ว่าโดยปกติจะหมายถึงการพัฒนาเว็บไซต์แยกต่างหาก แต่อาจเป็นส่วนสำคัญในการรักษาสถานะของคุณบนอินเทอร์เน็ต

โชคดีที่งานสร้างเว็บไซต์บนมือถือกลายเป็นเรื่องง่ายขึ้นมากเมื่อมี jQuery Mobile หน้าเว็บบนอุปกรณ์เคลื่อนที่ไม่ได้ จำกัด เฉพาะหน้าแบบคงที่ที่มีส่วนหัวย่อหน้าลิงก์และภาพขนาดย่ออีกต่อไป ด้วย jQuery Mobile ตอนนี้นักพัฒนาเว็บสามารถสร้างเว็บไซต์ที่มีคุณลักษณะมากมายซึ่งมีลักษณะและความรู้สึกเหมือนแอปพลิเคชันบนมือถือทั่วไป