วิธีการสร้างพื้นฐาน JQuery Mobile Page สำหรับ HTML5 and CSS3 Programming - dummies

มีวิธีการที่เป็นที่นิยมมากในหมู่ผู้เขียนโปรแกรม HTML5 และ CSS3 ในการสร้างเว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ด้วย AJAX และนั่นก็คือการใช้ไลบรารี add-on ใน jQuery เรียก jQuery Mobile Jquery Mobile เป็นชุดที่มีประสิทธิภาพของโค้ด JavaScript และ CSS ที่สร้างขึ้นที่ด้านบนของไลบรารี

ไลบรารี jQuery ทำงานโดยใช้หน้า HTML5 ปกติและแก้ไขในรูปแบบที่เลียนแบบรูปลักษณ์ดั้งเดิม โค้ดมีลักษณะคล้ายกับ HTML ทั่วไป:

JQuery Mobile Demo

เว็บไซต์ jQuery Mobile

นี่คือรายการธรรมดา

• มีลักษณะคล้าย

จาก > HTML All in One for Dummies

รายละเอียดบางส่วนทำให้หน้าเว็บนี้กลายเป็นสิ่งประหลาดบนมือถือ:

1. รวม jQuery mobile CSS

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

2. รวมไลบรารี jQuery มาตรฐาน

   ส่วนมากของโค้ดใช้ jQuery ดังนั้นรวมห้องสมุด jQuery ไว้ด้วย อีกครั้งคุณต้องดึง jQuery จากเว็บไซต์ jQuery หลัก

3. รวมไลบรารีมือถือ jQuery

   นี่คือไลบรารี JavaScript ที่ขยายห้องสมุดเพื่อเพิ่มพฤติกรรมเฉพาะมือถือใหม่

4. เพิ่มแอตทริบิวต์ data-page = "page" ลงใน div หลัก

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

5. ระบุธีมข้อมูล

   คุณสามารถใช้ชุดรูปแบบข้อมูลกับองค์ประกอบใดก็ได้ แต่คุณมักใช้ชุดรูปแบบกับเพจ jquery mobile มาพร้อมกับธีมเริ่มต้นจำนวนหนึ่งที่เรียกว่า "a" ผ่าน "e. "ทดลองเพื่อหาคนที่คุณชอบหรือคุณสามารถสร้างแบบจำลองของคุณเองด้วยโทรศัพท์มือถือรุ่นพิเศษ ThemeRoller

6. เพิ่ม div เพิ่มเติมภายในเพจของคุณ

   เพิ่ม div อีกสักสองสามอันภายในส่วน div ของคุณ โดยทั่วไปคุณจะมีสามส่วน: ส่วนหัวเนื้อหาและส่วนท้าย

7. ระบุส่วนหัวของ div ด้วย data-role = "header"

   การวางข้อมูลส่วนหัวของคุณไว้ในส่วน div ที่มีบทบาทข้อมูล "ส่วนหัว" คุณจะบอก jQuery เพื่อใช้องค์ประกอบนี้เป็นส่วนหัวของอุปกรณ์เคลื่อนที่และใช้รูปแบบที่เหมาะสม ส่วนหัวส่วนใหญ่ประกอบด้วยแท็ก

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

8. ตั้งค่า div เนื้อหา

   เพิ่ม div ด้วย data-role = "content" เพื่อตั้งค่าพื้นที่เนื้อหาหลักของเพจ องค์ประกอบหลักใด ๆ ของไซต์ควรไปในส่วนนี้

9. ลิงก์ใด ๆ สามารถแปลงเป็นปุ่มได้

   การประชุมมาตรฐานในเว็บแอปคือการเปลี่ยนลิงก์เป็นปุ่มที่มีเป้าหมายขนาดใหญ่กว่าการป้อนข้อมูลจากเมาส์ คุณสามารถแปลงลิงก์ใด ๆ ลงในปุ่มได้โดยง่ายโดยการเพิ่มคุณลักษณะ "data-role =" button "ลงในแท็ก anchor

10. แปลงรายการให้เป็นจำนวนการดูตัวอย่างบนมือถือ

    รายการมีข้อกำหนดพิเศษในโลกมือถือ คุณสามารถใช้แอตทริบิวต์ data-role เพื่อเปิดรายการใด ๆ ลงใน listView

11. สร้างส่วนท้าย

    เพิ่มอีก div หนึ่งชุดโดยตั้งค่าบทบาทข้อมูลเป็น "ท้ายกระดาษ" โดยปกติส่วนท้าย (เช่นส่วนหัว) จะถูกกำหนดด้วยแอตทริบิวต์ตำแหน่งข้อมูล