วิธีการสร้างเอกสารเคลื่อนที่แบบมัลติเพจสำหรับการเขียนโปรแกรม HTML5 และ CSS3 - dummies

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

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

หลังจากการเปลี่ยนภาพอ่อน ๆ หน้าถัดไปจะปรากฏขึ้น ปุ่มนี้มีปุ่มสองปุ่มในส่วนหัว การกด Next จะนำผู้ใช้ไปยังหน้าเว็บที่สาม

หน้าเว็บที่สามคุ้นเคยเป็นอย่างมาก แต่คราวนี้มีปุ่มเดียวที่ด้านซ้ายของส่วนหัวและอีกปุ่มหนึ่งในพื้นที่เนื้อหาหลัก

สิ่งที่น่าสนใจเกี่ยวกับสามหน้านี้คือพวกเขาไม่ใช่สามหน้าเลย! ทั้งหมดนี้เป็นเพียงหน้าเดียวที่ออกแบบมาเพื่อทำหน้าที่เหมือนหน้าเว็บอื่น ๆ สามหน้า ข้อดีของข้อตกลงนี้มีอยู่สองข้อ

ทำให้ระบบมีความสอดคล้องและปรับปรุงเวลาในการโหลด ไม่มีเวลาล่าช้า:

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

นี่คือโค้ดสำหรับ multiPage html อย่างครบถ้วน

มีหลาย html #foot {font-size: 75%; แบบอักษร: ตัวเอียง; text-align: center;} pre {margin-left: auto; ขอบขวา: อัตโนมัติ; พื้นหลังสี: สีขาว;

หน้า

หน้า 2
หน้า 3
จาก HTML All in One for Dummies

prev
หน้าสอง
ถัดไป
หน้าสองเป็นเหมือนกับส่วนแรกยกเว้นไม่ใช่เป็นอันดับแรกและมีข้อความมากกว่าปุ่ม เป็นหน้าที่สอง ถ้าคุณชอบคนแรกฉันคิดว่าคุณสามารถย้อนกลับไปได้ แต่คุณควรไปที่หน้าถัดไปเพราะฉันได้ยินว่ามันเยี่ยมจริงๆ จาก HTML ทั้งหมดในหนึ่งสำหรับ Dummies

prev
หน้าสาม
3333333 3 3 33333 3 3 3 3333333
ไปที่ดัชนี จาก HTML ทั้งหมดในหนึ่งสำหรับ Dummies

แม้ว่าโค้ดสำหรับตัวอย่างนี้จะยาว แต่ก็ไม่ได้ทำลายพื้นใหม่มากนัก
โหลดเนื้อหามือถือ jQuery

ดึงไฟล์ CSS และ JavaScript ที่จำเป็นจาก jQuery com เว็บไซต์
ใช้ CSS ของคุณเอง

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

1. สร้างหน้าเว็บของคุณ

   คุณสามารถสร้างหน้าเว็บได้มากเท่าที่คุณต้องการ แต่ทั้งหมดทำตามรูปแบบโทรศัพท์มือถือ jQuery แบบเดียวกันเช่นเดียวกัน: สร้างหน้าเว็บด้วยส่วนหัวเนื้อหาและส่วนท้าย ใช้แอตทริบิวต์ data-role เพื่อระบุบทบาทของแต่ละ div

2. ตั้งชื่อแต่ละ divs ระดับหน้าเว็บที่มีแอตทริบิวต์ id

   เนื่องจากผู้ใช้จะพลิกดูหน้าเว็บแต่ละหน้าต้องมีตัวระบุบางประเภท ให้แต่ละหน้ามีแอตทริบิวต์ id ที่ไม่ซ้ำกัน

3. สร้างปุ่มภายในส่วนหัว

   ส่วนใหม่ที่แท้จริงของตัวอย่างนี้ (นอกเหนือจากหน้าพลิกตัวเอง) คือปุ่มในส่วนหัว ข้ามไปข้างหน้าไปยังส่วนหัวของหน้า 2 และคุณจะเห็นสิ่งที่น่าสนใจจริงๆ:

4. prev

   หน้าสอง

5. ต่อไป

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

   บังคับปุ่มเดียวที่อยู่ทางขวา
   
   ถ้าต้องการให้ปุ่มอยู่ด้านขวาให้เพิ่มคลาสไปที่ปุ่ม
   หน้าหนึ่ง
   

   ถัดไป

6. ใช้ anchors ภายในเพื่อข้ามระหว่างเพจ

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

   
   ทดลองกับการเปลี่ยนภาพ
   ลองดูที่ปุ่มที่หน้าสาม:
   

7. ไปที่ดัชนี

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