สารบัญ:
มีวิธีการที่เป็นที่นิยมมากในหมู่ผู้เขียนโปรแกรม HTML5 และ CSS3 ในการสร้างเว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ด้วย AJAX และนั่นก็คือการใช้ไลบรารี add-on ใน jQuery เรียก jQuery Mobile Jquery Mobile เป็นชุดที่มีประสิทธิภาพของโค้ด JavaScript และ CSS ที่สร้างขึ้นที่ด้านบนของไลบรารี
ไลบรารี jQuery ทำงานโดยใช้หน้า HTML5 ปกติและแก้ไขในรูปแบบที่เลียนแบบรูปลักษณ์ดั้งเดิม โค้ดมีลักษณะคล้ายกับ HTML ทั่วไป:
JQuery Mobile Demoเว็บไซต์ jQuery Mobile
นี่คือรายการธรรมดา
- มีลักษณะคล้าย
รายละเอียดบางส่วนทำให้หน้าเว็บนี้กลายเป็นสิ่งประหลาดบนมือถือ:
-
รวม jQuery mobile CSS
นี่เป็นไฟล์ CSS พิเศษที่ออกแบบมาเพื่อแปลงองค์ประกอบ HTML ลงในมือถือของตน แม้ว่าคุณจะสามารถดาวน์โหลดได้เองนักพัฒนาซอฟต์แวร์ส่วนใหญ่จะเชื่อมโยงไปยังเว็บไซต์ jQuery โดยตรง
-
รวมไลบรารี jQuery มาตรฐาน
ส่วนมากของโค้ดใช้ jQuery ดังนั้นรวมห้องสมุด jQuery ไว้ด้วย อีกครั้งคุณต้องดึง jQuery จากเว็บไซต์ jQuery หลัก
-
รวมไลบรารีมือถือ jQuery
นี่คือไลบรารี JavaScript ที่ขยายห้องสมุดเพื่อเพิ่มพฤติกรรมเฉพาะมือถือใหม่
-
เพิ่มแอตทริบิวต์ data-page = "page" ลงใน div หลัก
สร้าง div หลักในหน้าเว็บของคุณและระบุแอตทริบิวต์ดังกล่าว นี่เป็นแอตทริบิวต์บทบาทข้อมูลที่กำหนดเองที่เพิ่มโดย jQuery mobile jQuery ดูข้อมูลบทบาทขององค์ประกอบต่างๆและใช้ลักษณะและการเปลี่ยนแปลงลักษณะการทำงานกับองค์ประกอบเหล่านี้โดยอัตโนมัติ กำหนดหน้าบทบาทข้อมูลหลักของคุณ ซึ่งจะบอกให้เบราว์เซอร์ทราบว่า div ทั้งหมดเป็นเพจ
-
ระบุธีมข้อมูล
คุณสามารถใช้ชุดรูปแบบข้อมูลกับองค์ประกอบใดก็ได้ แต่คุณมักใช้ชุดรูปแบบกับเพจ jquery mobile มาพร้อมกับธีมเริ่มต้นจำนวนหนึ่งที่เรียกว่า "a" ผ่าน "e. "ทดลองเพื่อหาคนที่คุณชอบหรือคุณสามารถสร้างแบบจำลองของคุณเองด้วยโทรศัพท์มือถือรุ่นพิเศษ ThemeRoller
-
เพิ่ม div เพิ่มเติมภายในเพจของคุณ
เพิ่ม div อีกสักสองสามอันภายในส่วน div ของคุณ โดยทั่วไปคุณจะมีสามส่วน: ส่วนหัวเนื้อหาและส่วนท้าย
-
ระบุส่วนหัวของ div ด้วย data-role = "header"
การวางข้อมูลส่วนหัวของคุณไว้ในส่วน div ที่มีบทบาทข้อมูล "ส่วนหัว" คุณจะบอก jQuery เพื่อใช้องค์ประกอบนี้เป็นส่วนหัวของอุปกรณ์เคลื่อนที่และใช้รูปแบบที่เหมาะสม ส่วนหัวส่วนใหญ่ประกอบด้วยแท็ก
โดยทั่วไปคุณจะระบุส่วนหัวที่ต้องการแก้ไขด้วยแอตทริบิวต์ data-position = "fixed" เพื่อให้แน่ใจว่าส่วนหัวจะอยู่ในตำแหน่งหากเนื้อหาในส่วนที่เหลือถูกเลื่อนไปซึ่งเป็นลักษณะการทำงานทั่วไปในแอปพลิเคชันบนมือถือ
-
ตั้งค่า div เนื้อหา
เพิ่ม div ด้วย data-role = "content" เพื่อตั้งค่าพื้นที่เนื้อหาหลักของเพจ องค์ประกอบหลักใด ๆ ของไซต์ควรไปในส่วนนี้
-
ลิงก์ใด ๆ สามารถแปลงเป็นปุ่มได้
การประชุมมาตรฐานในเว็บแอปคือการเปลี่ยนลิงก์เป็นปุ่มที่มีเป้าหมายขนาดใหญ่กว่าการป้อนข้อมูลจากเมาส์ คุณสามารถแปลงลิงก์ใด ๆ ลงในปุ่มได้โดยง่ายโดยการเพิ่มคุณลักษณะ "data-role =" button "ลงในแท็ก anchor
-
แปลงรายการให้เป็นจำนวนการดูตัวอย่างบนมือถือ
รายการมีข้อกำหนดพิเศษในโลกมือถือ คุณสามารถใช้แอตทริบิวต์ data-role เพื่อเปิดรายการใด ๆ ลงใน listView
-
สร้างส่วนท้าย
เพิ่มอีก div หนึ่งชุดโดยตั้งค่าบทบาทข้อมูลเป็น "ท้ายกระดาษ" โดยปกติส่วนท้าย (เช่นส่วนหัว) จะถูกกำหนดด้วยแอตทริบิวต์ตำแหน่งข้อมูล
