หน้ามือถือ jQuery
เริ่มต้นเรียนรู้ jQuery มือถือ
 | แม้ว่ามือถือ jQuery เข้ากันได้กับโทรศัพท์มือถือทั้งหมด แต่ไม่ได้อย่างเข้ากันได้กับเครื่องคอมพิวเตอร์ (เนื่องจากการสนับสนุน CSS3 จำกัด ) เพื่อให้ดีขึ้นอ่านการกวดวิชานี้เราขอแนะนำให้คุณใช้เบราว์เซอร์ Google Chrome |
|---|
ตัวอย่าง
<body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
ลอง»
ตัวอย่างการวิเคราะห์:
- ข้อมูลบทบาท = "หน้า" เป็นหน้าเบราว์เซอร์เพื่อแสดง
- ข้อมูลบทบาท = "หัว" เป็นแถบเครื่องมือที่ด้านบนของหน้าจะถูกสร้างขึ้น (มักจะใช้สำหรับชื่อเรื่องหรือปุ่มค้นหา)
- ข้อมูลบทบาท = "หลัก" กำหนดเนื้อหาของหน้าเช่นข้อความ, ภาพ, รูปแบบ, ปุ่มและอื่น ๆ
- "อุ้ยเนื้อหา" ชั้นสำหรับ padding หน้านี้และอัตรากำไร
- ข้อมูลบทบาท = "ส่วนท้าย" ใช้ในการสร้างแถบเครื่องมือด้านล่างของหน้า
- ในภาชนะเหล่านี้คุณสามารถเพิ่มองค์ประกอบ HTML ใด ๆ - ย่อหน้าภาพหัว, รายการ, ฯลฯ
| มือถือ jQuery พึ่งพา HTML5 DATA- * คุณลักษณะที่จะสนับสนุนองค์ประกอบต่างๆ UI การเปลี่ยนแปลงและโครงสร้างหน้า เบราว์เซอร์ไม่สนับสนุนพวกเขาพวกเขาจะถูกยกเลิกทันที |
|---|
เพิ่มมือถือ jQuery ในหน้า
ใช้มือถือ jQuery แล้วคุณสามารถสร้างไฟล์ HTML เดียวในจำนวนหน้าที่ที่แตกต่างกัน
คุณสามารถใช้แอตทริบิวต์ href แตกต่างกันเพื่อแยกความแตกต่างระหว่างการใช้ ID เฉพาะเดียวกันของหน้า:
ตัวอย่าง
<div ข้อมูลบทบาท = "หน้า " id = "pageone">
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pagetwo"> เพื่อข้ามไปยังหน้าสอง </a>
</ div>
</ div>
<div ข้อมูลบทบาท = "หน้า " id = "pagetwo">
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pageone"> เพื่อข้ามไปยังหน้าแรก </a>
</ div>
</ div>
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pagetwo"> เพื่อข้ามไปยังหน้าสอง </a>
</ div>
</ div>
<div ข้อมูลบทบาท = "หน้า " id = "pagetwo">
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pageone"> เพื่อข้ามไปยังหน้าแรก </a>
</ div>
</ div>
ลอง»
หมายเหตุ: เมื่อใช้งานเว็บมีจำนวนมากของเนื้อหา (ข้อความรูปภาพสคริปต์ ฯลฯ ) อย่างจริงจังจะมีผลต่อเวลาในการโหลด หากคุณไม่ต้องการที่จะใช้การเชื่อมโยงในหน้าเว็บที่คุณสามารถใช้แฟ้มภายนอก:
<a href="externalfile.html">访问外部文件</a>
หน้าขณะที่ใช้โต้ตอบ
กล่องโต้ตอบจะใช้เพื่อแสดงข้อมูลการแสดงผลข้อมูลหน้าหรือรูปแบบการป้อนข้อมูล
เพิ่มในการเชื่อมโยงข้อมูล rel = "โต้ตอบ" ป๊อปอัพกล่องโต้ตอบช่วยให้ผู้ใช้คลิกที่ลิงค์นี้:
ตัวอย่าง
<div ข้อมูลบทบาท = "หน้า" id = "pageone">
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pagetwo"> กระโดดไปยังหน้าสอง </a>
</ div>
</ div>
<div ข้อมูลบทบาท = "หน้า " data-โต้ตอบ = "true" id = "pagetwo">
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pageone"> กระโดดไปยังหน้าแรก </a>
</ div>
</ div>
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pagetwo"> กระโดดไปยังหน้าสอง </a>
</ div>
</ div>
<div ข้อมูลบทบาท = "หน้า " data-โต้ตอบ = "true" id = "pagetwo">
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<a href="#pageone"> กระโดดไปยังหน้าแรก </a>
</ div>
</ div>
ลอง»