สร้างหน้าใหม่
แม้ว่ามือถือ jQuery ทำงานบนอุปกรณ์มือถือทั้งหมดก็อาจจะมีปัญหาความเข้ากันบางอย่างเกี่ยวกับคอมพิวเตอร์เดสก์ทอป (เนื่องจากการสนับสนุน CSS3 จำกัด )
สำหรับการกวดวิชานี้เราขอแนะนำให้คุณใช้เบราว์เซอร์ Google Chrome สำหรับประสบการณ์การอ่านที่ดีขึ้น
ด้านล่างนี้เราได้สร้างง่ายมาตรฐานหน้า jQuery มือถือ:
ตัวอย่าง
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> ลองตัวเอง» ตัวอย่างอธิบายว่า:
- data-role="page" เป็นหน้าที่แสดงในเบราว์เซอร์
- data-role="header" สร้างแถบเครื่องมือที่ด้านบนของหน้า (ที่มักจะใช้สำหรับชื่อเรื่องหรือค้นหาปุ่ม)
- data-role="main" กำหนดเนื้อหาของหน้าเช่นข้อความ, ภาพ, ปุ่ม, รูปแบบอื่น ๆ
- "ui-content" ระดับเพิ่ม padding พิเศษและอัตรากำไรขั้นต้นภายในเนื้อหาของหน้าเว็บ
- data-role="footer" สร้างแถบเครื่องมือที่ด้านล่างของหน้า
- ภายในภาชนะเหล่านี้คุณสามารถเพิ่มองค์ประกอบ HTML ใด ๆ - ย่อหน้าภาพหัว, รายการ, ฯลฯ
HTML5 ที่ data-* คุณลักษณะที่ได้รับใช้ตลอดทั้งมือถือ jQuery เพื่อสร้าง "touch-friendly" รูปลักษณ์และความน่าสนใจสำหรับอุปกรณ์มือถือ
เพิ่มหน้าใน jQuery มือถือ
ในมือถือ jQuery คุณสามารถสร้างหน้าเว็บหลายหน้าในไฟล์ HTML เดียว
แยกแต่ละหน้าเว็บที่มี ID ที่ไม่ซ้ำกันและใช้ href แอตทริบิวต์ที่จะเชื่อมโยงระหว่างพวกเขา:
ตัวอย่าง
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> ลองตัวเอง» เคล็ดลับ: เวลาในการโหลดจะได้รับผลกระทบจากการใช้งานเว็บที่มีเนื้อหาจำนวนมาก (เช่นข้อความเชื่อมโยงภาพสคริปต์ ฯลฯ ) ใช้ไฟล์ภายนอกหากคุณไม่ต้องการที่จะเชื่อมโยงภายในหน้า:
<a href="externalfile.html">Go To External Page</a>
ใช้หน้าเป็นบทสนทนา
กล่องโต้ตอบเป็นประเภทของหน้าต่างที่ใช้ในการแสดงข้อมูลพิเศษหรือการป้อนคำขอ
เพื่อสร้างกล่องโต้ตอบที่เปิดขึ้นเมื่อผู้ใช้แตะที่ลิงค์เพิ่ม data-dialog="true" ไปยังหน้าเว็บที่คุณต้องการแสดงเป็นโต้ตอบ:
ตัวอย่าง
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> ลองตัวเอง»