ล่าสุดการพัฒนาเว็บบทเรียน
 

jQuery Mobileตัวอย่าง


หน้ามือถือ jQuery

หน้าเว็บบนมือถือขั้นพื้นฐาน
หลาย ๆ หน้า
กล่องโต้ตอบ

ตัวอย่างอธิบาย


jQuery การเปลี่ยนโทรศัพท์มือถือ

จางผล
ผลพลิก
ไหลผล
ผลป๊อป
ผลสไลด์
ผล Slidefade
ผล Slideup
ผล slideDown
เปิดผล
ไม่มีผลการเปลี่ยนแปลง
ผลตรงกันข้าม

ตัวอย่างอธิบาย


ปุ่มมือถือ jQuery

สร้างปุ่ม
ปุ่มแบบอินไลน์
ปุ่มจัดกลุ่ม
ปุ่มย้อนกลับ
เปลี่ยนสีปุ่ม
ปุ่มที่มีหรือไม่มีมุมโค้งมน
ปุ่มขนาดเล็กหรือปกติ
ปุ่มที่มีหรือไม่มีเงา

ตัวอย่างอธิบาย


มือถือ jQuery ปุ่มไอคอน

เพิ่มไอคอนปุ่ม
เพิ่มไอคอนเพิ่มเติม (ไอคอนนำมาใช้ในรุ่น 1.4)
ไอคอนการวางตำแหน่ง
แสดงเฉพาะไอคอน
นำวงกลม (แผ่นดิสก์) เปลี่ยนสีไอคอน

ตัวอย่างอธิบาย


มือถือ jQuery ป๊อปอัป

สร้างพื้นฐานป๊อปอัพ
เพิ่มช่องว่างและอัตรากำไรขั้นต้นที่จะป๊อปอัพ
ปิดป๊อปอัพที่มีปุ่มปิดขวา
ปิดป๊อปอัพที่มีปุ่มปิดซ้าย
ป๊อปอัพ Undismissible
ป๊อปอัป Positioning
เปลี่ยนป๊อปอัป
ลูกศรป๊อปอัพ
ไดอะล็อกป๊อปอัพ
ภาพป๊อปอัพ

ตัวอย่างอธิบาย


jQuery แถบมือถือ

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

ตัวอย่างอธิบาย


บาร์มือถือ jQuery นำร่อง

สร้างแถบนำทาง
ไอคอนในปุ่มนำทาง
แถบนำทางในเนื้อหา
แถบนำทางในส่วนท้าย
เพิ่มที่เลือก (กดลง) มองหาปุ่มในแถบนำทาง
เพิ่มรายการที่เลือก (กดลง) ดูเสมอ
ไอคอน Positioning: การจัดตำแหน่งด้านบน
การวางตำแหน่งไอคอน: การจัดตำแหน่งที่เหมาะสม
การวางตำแหน่งไอคอน: การจัดตำแหน่งด้านล่าง
การวางตำแหน่งไอคอน: การจัดตำแหน่งซ้าย
การสาธิต 10 ปุ่มในแถบนำทาง

ตัวอย่างอธิบาย


แผงมือถือ jQuery

สร้างแผงพื้นฐาน
แผงที่มีปุ่มปิด
เปลี่ยนการแสดงผลแผง
ตำแหน่งที่เหมาะสมแผง
ตำแหน่งแผงถาวร

ตัวอย่างอธิบาย


มือถือ jQuery Collapsibles

สร้างบล็อกพับเนื้อหา
ขยายเนื้อหาเมื่อโหลดหน้าเว็บ
บล็อกพับซ้อนกัน
พับชุด (หีบเพลง)
ลบมุมโค้งมนบน collapsibles
ทำให้ collapsibles ขนาดเล็ก
เปลี่ยนไอคอนของ collapsibles
เปลี่ยนตำแหน่งไอคอนของ collapsibles

ตัวอย่างอธิบาย


ตาราง jQuery มือถือ

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

ตัวอย่างอธิบาย


มือถือ jQuery กริด

รูปแบบสองคอลัมน์
รูปแบบสามคอลัมน์
รูปแบบที่สี่คอลัมน์
รูปแบบที่ห้าคอลัมน์
ปรับแต่งกริด
หลายแถวภายในคอลัมน์

ตัวอย่างอธิบาย


รายการ jQuery มือถือ

สร้างมุมมองรายการ
มุมมองรายการที่มีมุมโค้งมน
วงเวียนรายการ
Autodividers
สร้างรายการอ่านอย่างเดียว
ใส่แผงกับรายการรายการ
ไอคอนลิงก์เปลี่ยนเริ่มต้นสำหรับรายการ
เพิ่มไอคอนแสดงรายการ
เพิ่มรูปขนาดย่อเพื่อแสดงรายการ
เพิ่มองค์ประกอบ HTML ในการกรอกข้อมูลในรายการที่มีข้อมูล
สร้างรายการที่มีปุ่มแยก
ทำรายการรายการทำงานได้มากขึ้น
สร้างฟองอากาศนับ
รายชื่อป๊อปอัพ
รายการพับ
รายชื่อป๊อปอัพพับ
ความกว้างเต็มรายการพับ
สร้างปฏิทิน

ตัวอย่างอธิบาย


กรอง jQuery มือถือ

สร้างช่องค้นหาสำหรับรายการ
เปลี่ยนข้อความที่อยู่ภายในช่องค้นหา
กรองที่กำหนดเอง
กรองรายการพับ
ตารางกรอง
ตัวกรอง <div>

ตัวอย่างอธิบาย


รูปแบบมือถือ jQuery

ปัจจัยข้อความ
เพิ่มไอคอนปุ่มการป้อนข้อมูล
การเพิ่มปุ่ม "ชัดเจน" ในปัจจัยการผลิต
พื้นที่ข้อความ
ป้อนข้อมูลการค้นหา
ปุ่ม
ช่องทำเครื่องหมาย
ปุ่มกรุ๊ปและช่องทำเครื่องหมายในแนวนอน
ภาชนะสนามที่มีปุ่มวิทยุและช่องทำเครื่องหมาย
Pre-เลือกปุ่มตัวเลือก / ช่องทำเครื่องหมาย
วางรูปแบบภายในป๊อปอัพ
ป้องกันไม่ให้มือถือ jQuery สไตล์องค์ประกอบ tappable โดยอัตโนมัติ
สร้างเลือกเมนู
สร้างเมนูเลือกกับวงเวียน (optgroup)
เลือกกำหนดเองเมนู
เลือกหลายตัวเลือกในการเลือกเมนู
เมนูเลือกกลุ่ม
เมนูเลือกกลุ่มแนวนอน
เมนูตัวเลือกลดขนาด
Pre-เลือกตัวเลือก
เลือกป๊อปอัพ
รูปแบบพับได้
เปลี่ยนไอคอนเลือกค่าเริ่มต้น
เปลี่ยนตำแหน่งไอคอน
สร้างตัวควบคุมแถบเลื่อน
แสดงค่าที่ปุ่มเลื่อน
ทำให้ป๊อปอัพค่าบนหน้าจอเป็นภาพนิ่งผู้ใช้
ไฮไลต์การติดตามถึงค่าตัวเลื่อน
ช่วงเลื่อน (Dual)
สร้างสวิทช์พลิกสลับ
เปลี่ยนข้อความบนสวิทช์พลิก
Pre-เลือกสวิทช์พลิก
สไตล์สวิทช์พลิก

ตัวอย่างอธิบาย


ธีมมือถือ jQuery

ธีม "A"
ธีม "B"
ส่วนหัวและส่วนท้ายชุดรูปแบบ
ไดอะล็อกชุดรูปแบบ
ปุ่มชุดรูปแบบ
ไอคอนชุดรูปแบบ
ป๊อบอัพชุดรูปแบบ
ปุ่มชุดรูปแบบในส่วนหัวและส่วนท้าย
แถบนำทางชุดรูปแบบ
แผงชุดรูปแบบ
ชุดรูปแบบปุ่มพับและเนื้อหา
ชุดรูปแบบรายการ
ปุ่มชุดรูปแบบแยก
ชุดรูปแบบรายการพับ
รูปแบบชุดรูปแบบ
ชุดรูปแบบรูปแบบพับ
ปรับแต่งรูปแบบ

ตัวอย่างอธิบาย


เหตุการณ์ jQuery มือถือ

แตะเหตุการณ์
เหตุการณ์ Taphold
เหตุการณ์รูด
เหตุการณ์ Swipeleft
เหตุการณ์ Swiperight
เหตุการณ์ Scrollstart
เหตุการณ์ Scrollstop
เหตุการณ์ Orientationchange - การวางแนวทางการแจ้งเตือน
เหตุการณ์ Orientationchange - ตั้งค่ารูปแบบที่แตกต่างกันสำหรับแนวตั้งและแนวนอน
เหตุการณ์ที่เกิดขึ้นหน้าเริ่มต้น
เหตุการณ์ที่เกิดขึ้นในการโหลดหน้า
เหตุการณ์การเปลี่ยนหน้า

ตัวอย่างอธิบาย