บทช่วยสอน หน้ามือถือ jQuery ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ เริ่มต้นเรียนรู้ jQuery มือถือ,ตัวอย่าง,เพิ่มมือถือ jQuery ในหน้า,ตัวอย่าง,หน้าขณะที่ใช้โต้ตอบ,ตัวอย่าง,

หน้ามือถือ 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>

ลอง»

ตัวอย่างการวิเคราะห์:

  • ข้อมูลบทบาท = "หน้า" เป็นหน้าเบราว์เซอร์เพื่อแสดง
  • ข้อมูลบทบาท = "หัว" เป็นแถบเครื่องมือที่ด้านบนของหน้าจะถูกสร้างขึ้น (มักจะใช้สำหรับชื่อเรื่องหรือปุ่มค้นหา)
  • ข้อมูลบทบาท = "หลัก" กำหนดเนื้อหาของหน้าเช่นข้อความ, ภาพ, รูปแบบ, ปุ่มและอื่น ๆ
  • "อุ้ยเนื้อหา" ชั้นสำหรับ 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>

ลอง»

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

<a href="externalfile">访问外部文件</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>

ลอง»
หน้ามือถือ jQuery
10/30