แบบฟอร์มมือถือ jQuery
jQuery มือถือจะเพิ่มโดยอัตโนมัติโดยอัตโนมัติสไตล์กับรูปแบบ HTML, ทำให้พวกเขาดูน่าสนใจมากขึ้นเป็นมิตรมากขึ้นไปสัมผัส
โครงสร้าง jQuery แบบมือถือ
มือถือ jQuery การใช้ CSS สไตล์องค์ประกอบรูปแบบ HTML เพื่อให้น่าสนใจมากขึ้นและง่ายต่อการใช้
ในมือถือ jQuery คุณสามารถใช้รูปแบบการควบคุมต่อไปนี้:
- ช่องป้อนข้อความ
- กล่องใส่ค้นหา
- ปุ่ม
- ช่องทำเครื่องหมาย
- เลือกเมนู
- Slider
- พลิกเปลี่ยนสลับ
เมื่อมีการใช้รูปแบบมือถือ jQuery ที่คุณควรรู้:
- <form> องค์ประกอบที่จะต้องมีวิธีการและแอตทริบิวต์การดำเนินการ
- องค์ประกอบแบบฟอร์มแต่ละคนจะต้องมีที่ไม่ซ้ำกันแอตทริบิวต์ "id" ID ต้องไม่ซ้ำกันในทุกหน้าตลอดทั้งเว็บไซต์ เพราะนี่คือกลไกนำทางมือถือ jQuery หน้าเดียวจะนำเสนอเพื่อให้เสียงส่วนใหญ่ของหน้าเว็บที่แตกต่างกันในเวลาเดียวกัน
- องค์ประกอบแต่ละรูปแบบจะต้องมีฉลาก แท็บการตั้งค่าสำหรับคุณสมบัติเพื่อให้ตรงกับองค์ประกอบ ID
ตัวอย่าง
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
ลอง»
เพื่อซ่อนฉลากใช้คลาส UI ที่ซ่อนอยู่ที่สามารถเข้าถึง นี้มักจะใช้เมื่อคุณเป็นคุณสมบัติขององค์ประกอบเป็นแท็กตัวยึดไปนี้:
ตัวอย่าง
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
ลอง»
เคล็ดลับ: เราสามารถใช้ข้อมูลที่ชัดเจน BTN = "true " แอตทริบิวต์เพิ่มปุ่มเพื่อล้างเนื้อหาของกล่องใส่ของ (ไอคอน X ไปทางขวาของกล่องใส่ได้):
ตัวอย่าง
<ชนิดของการป้อนข้อมูล = "text" ชื่อ = "fname" id = "fname" data-ชัดเจน BTN = "true">
ลอง»
 | ปุ่มล้างในกล่องใส่ <input> คือการใช้ แต่ไม่ได้อยู่ใน <textarea> ใน กล่องค้นหาข้อมูลที่ชัดเจน btn ค่าเริ่มต้นคือ "ของจริง" คุณสามารถใช้ข้อมูลที่ชัดเจน BTN = "false" เพื่อลบไอคอน |
|---|
มือถือ jQuery Forms ไอคอน
รูปของรหัสปุ่มเป็นมาตรฐาน HTML <input> (ปุ่มรีเซ็ตส่ง) พวกเขาจะแสดงผลรูปแบบโดยอัตโนมัติปรับตัวโทรศัพท์มือถือไปยังเดสก์ทอป:
ตัวอย่าง
<ประเภทขาเข้า = "ตั้งค่า" value = "ปุ่มรีเซ็ต">
<ประเภทขาเข้า = "ส่ง" value = "ส่งปุ่ม">
ลอง»
หากคุณต้องการที่จะเพิ่มรูปแบบเพิ่มเติมใน <input> ปุ่มคุณสามารถใช้ตารางต่อไปนี้ DATA- คุณลักษณะ *:
| คุณสมบัติ | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| ข้อมูลมุม | | จริงเท็จ | ระบุมุมไม่ว่าจะเป็นปุ่มกลมได้ |
| ข้อมูลไอคอน | คู่มืออ้างอิงไอคอน | ไอคอนปุ่มกำหนด |
| ข้อมูล iconpos | ซ้าย | ขวา | ด้านบน | ด้านล่าง | notext | ระบุตำแหน่งของไอคอน |
| ข้อมูลแบบอินไลน์ | | จริงเท็จ | ระบุว่าปุ่มแบบอินไลน์ |
| ข้อมูลขนาดเล็ก | | จริงเท็จ | ระบุว่าปุ่มขนาดเล็ก |
| ข้อมูลเงา | | จริงเท็จ | ระบุว่าปุ่มเพื่อเพิ่มผลเงา |
เพื่อเพิ่มไอคอน:
<ประเภทขาเข้า = "ตั้งค่า" value = "ปุ่มรีเซ็ต">
<ประเภทขาเข้า = "ส่ง" value = "ส่งปุ่ม">
ลอง»
สนามคอนเทนเนอร์
ที่จะทำให้ป้ายชื่อและองค์ประกอบของแบบฟอร์มมองมากขึ้นเหมาะสำหรับจอไวด์สกรีนโปรดหรือ <fieldset> องค์ประกอบรอบองค์ประกอบฉลาก / รูปแบบจะใช้กับ "UI-สนามประกอบด้วย" ชั้น <div>:
ตัวอย่าง
<div class="ui-field-contain" >
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
ลอง»
| UI-สนามประกอบด้วยชั้นเรียนขึ้นอยู่กับความกว้างของหน้าเพื่อเพิ่มรูปแบบฉลากและการควบคุมรูปแบบ เมื่อความกว้างของหน้ามากกว่า 480px มันจะเกิดขึ้นโดยอัตโนมัติป้ายและรูปแบบของการควบคุมในบรรทัดเดียวกัน เมื่อความกว้างของหน้าน้อยกว่า 480px ป้ายจะถูกวางไว้ในองค์ประกอบรูปด้านบน |
|---|
เคล็ดลับ: เพื่อป้องกันไม่ให้มือถือ jQuery โดยอัตโนมัติเพิ่มรูปแบบองค์ประกอบคลิกได้ใช้ข้อมูลบทบาท = แอตทริบิวต์ "ไม่มี":
ตัวอย่าง
<input type="text" name="fname" id="fname" data-role="none" >
ลอง»
| jQuery มือถือในการส่งแบบฟอร์ม มือถือ jQuery จัดการโดยอัตโนมัติโดยการส่งแบบฟอร์ม AJAX และความพยายามในการรวมเซิร์ฟเวอร์เพื่อตอบสนองต่อ DOM ของการประยุกต์ใช้ |
|---|