มือถือ jQuery โดยอัตโนมัติรูปแบบ HTML รูปแบบที่จะทำให้พวกเขาดูมีส่วนร่วมและสัมผัสง่าย
jQuery Mobile Form โครงสร้าง
มือถือ jQuery ใช้ CSS เพื่อองค์ประกอบของแบบฟอร์มรูปแบบ HTML ทำให้พวกเขาน่าสนใจและใช้งานง่าย
ในมือถือ jQuery คุณสามารถใช้รูปแบบการควบคุมต่อไปนี้:
- ปัจจัยข้อความ
- ค้นหาปัจจัยการผลิต
- ปุ่ม
- ช่องทำเครื่องหมาย
- เลือกเมนู
- เลื่อน
- สวิทช์สลับพลิก
เมื่อทำงานร่วมกับรูปแบบมือถือ jQuery ที่คุณควรรู้:
- <form> องค์ประกอบที่จะต้องมีวิธีการและแอตทริบิวต์การกระทำ
- องค์ประกอบแบบฟอร์มแต่ละคนจะต้องมีที่ไม่ซ้ำกันแอตทริบิวต์ "id" รหัสต้องไม่ซ้ำกันทั่วหน้าในเว็บไซต์ เพราะนี่คือโมเดลการนำหน้าเดียว jQuery มือถือช่วยให้หลายคนที่แตกต่างกัน "หน้าที่" ที่จะนำเสนอในเวลาเดียวกัน
- องค์ประกอบแต่ละรูปแบบจะต้องมีฉลาก การตั้งค่าสำหรับแอตทริบิวต์ของฉลากเพื่อให้ตรงกับ ID ขององค์ประกอบ
ตัวอย่าง
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
ลองตัวเอง» เคล็ดลับ: ใช้ตัวยึดเพื่อระบุคำแนะนำสั้น ๆ ที่อธิบายถึงค่าที่คาดหวังของช่องใส่:
ตัวอย่าง
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
ลองตัวเอง» เคล็ดลับ: การซ่อนฉลากใช้ "ui-hidden-accessible" ระดับ นี้มักจะใช้เมื่อคุณต้องการแอตทริบิวต์ยึดองค์ประกอบที่จะทำหน้าที่เป็นป้ายชื่อ:
ตัวอย่าง
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
ลองตัวเอง» เคล็ดลับ: หากคุณต้องการ "clear button" (ไอคอน X บนด้านขวาของช่องใส่ที่ล้างเนื้อหาของสนาม) เพิ่มข้อมูลที่ชัดเจน BTN = แอตทริบิวต์ "จริง":
ตัวอย่าง
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
ลองตัวเอง» "clear button" สามารถเพิ่มใด ๆ <input> องค์ประกอบยกเว้น <textarea> สาขาค้นหาที่มีคุณลักษณะนี้ตั้งค่าเป็น "true" เป็นค่าเริ่มต้น - เพื่อเปลี่ยนมันเพียงแค่ระบุ data-clear-btn="false"
ปุ่ม jQuery แบบมือถือ
ปุ่มในรูปแบบที่มีการใช้โค้ดมาตรฐาน HTML <input> องค์ประกอบ (ปุ่มรีเซ็ตส่ง) พวกเขามีสไตล์โดยอัตโนมัติทำให้พวกเขาน่าสนใจและง่ายต่อการใช้งานบนโทรศัพท์มือถือทั้งในและคอมพิวเตอร์เดสก์ทอป:
ตัวอย่าง
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
ลองตัวเอง» การเพิ่มรูปแบบปุ่ม <input> ใช้ใด ๆ ของคุณลักษณะ * DATA- ระบุไว้ในตารางด้านล่าง:
ค่าตัวหนาหมายถึงค่าเริ่มต้น
| คุณลักษณะ | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| data-corners | true | false | ระบุว่าปุ่มควรมีมุมโค้งมนหรือไม่ |
| data-icon | Icons Reference | ระบุไอคอนของปุ่ม |
| data-iconpos | left | right | top | bottom | notext | ระบุตำแหน่งของไอคอน |
| data-inline | true | false | ระบุว่าปุ่มที่ควรจะเป็นแบบอินไลน์หรือไม่ |
| data-mini | true | false | ระบุว่าปุ่มควรมีขนาดเล็กหรือไม่ |
| data-shadow | true | false | ระบุว่าปุ่มควรมีเงาหรือไม่ |
รวมหรือไม่รวมแอตทริบิวต์ (s) ที่คุณต้องการ / ไม่ต้องการ:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
ลองตัวเอง» Field Containers
ที่จะทำให้ป้ายชื่อและองค์ประกอบของแบบฟอร์มมีลักษณะถูกต้องบนหน้าจอที่กว้างขึ้นห่อ <div> หรือ <fieldset> องค์ประกอบกับ "ui-field-contain" ระดับรอบองค์ประกอบฉลาก / รูปแบบ:
ตัวอย่าง
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
ลองตัวเอง» "ui-field-contain" ป้ายสไตล์การเรียนและการควบคุมรูปแบบขึ้นอยู่กับความกว้างของหน้า เมื่อความกว้างของหน้ามากกว่า 480px มันเกิดขึ้นโดยอัตโนมัติฉลากบนสายเดียวกันกับการควบคุมรูปแบบ เมื่อน้อยกว่า 480px ป้ายจะถูกวางไว้ข้างต้นองค์ประกอบแบบฟอร์ม
เคล็ดลับ: เพื่อป้องกันไม่ให้มือถือ jQuery โดยอัตโนมัติสไตล์ tappable องค์ประกอบ / คลิกได้ใช้ data-role="none" แอตทริบิวต์:
ตัวอย่าง
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
ลองตัวเอง» ส่งแบบฟอร์มในมือถือ jQuery
มือถือ jQuery จะจัดการโดยอัตโนมัติการส่งแบบฟอร์มผ่านทาง AJAX และจะพยายามที่จะบูรณาการตอบสนองของเซิร์ฟเวอร์ลงใน DOM ของการประยุกต์ใช้