การใช้งานมือถือที่สร้างขึ้นบนความเรียบง่ายของสิ่งแตะที่คุณต้องการแสดง
การสร้างปุ่มในมือถือ jQuery
ปุ่มใน jQuery มือถือที่สามารถสร้างขึ้นในสามวิธี:
- โดยใช้ <input> องค์ประกอบ
- โดยใช้ <button> องค์ประกอบที่มี class="ui-btn"
- ใช้ <a> องค์ประกอบที่มี class="ui-btn"
ปุ่มใน jQuery มือถือมีสไตล์โดยอัตโนมัติทำให้พวกเขาน่าสนใจและสามารถใช้งานได้ทั้งบนโทรศัพท์มือถือและคอมพิวเตอร์เดสก์ทอป. เราขอแนะนำให้คุณใช้ <a> องค์ประกอบที่มี class="ui-btn" ที่จะเชื่อมโยงระหว่างหน้าและ <input> หรือ <button> องค์ประกอบสำหรับการส่งแบบฟอร์ม
หมายเหตุ: ก่อนที่รุ่น 1.4 เราใช้ data-role="button" แอตทริบิวต์การสร้างปุ่มใน jQuery มือถือ ในฐานะของ 1.4 ชั้นเรียนใช้กรอบ CSS เพื่อปุ่มรูปแบบ (ยกเว้น <input> ปุ่ม)
ปุ่มนำทาง
ที่จะเชื่อมโยงระหว่างหน้าโดยปุ่มใช้ <a> องค์ประกอบที่มี class="ui-btn" :
ปุ่มจัดกลุ่ม
jQuery มือถือให้เป็นวิธีที่ง่ายในการจัดกลุ่มปุ่มด้วยกัน
ใช้ data-role="controlgroup" แอตทริบิวต์ร่วมกับ data-type="horizontal|vertical" ในองค์ประกอบของภาชนะเพื่อระบุว่าจะปุ่มกลุ่มแนวนอนหรือแนว:
ตัวอย่าง
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
ลองตัวเอง» โดยค่าเริ่มต้นปุ่มจัดกลุ่มจะถูกจัดกลุ่มในแนวตั้งที่มีอัตรากำไรและไม่มีช่องว่างระหว่างพวกเขา และมีเพียงครั้งแรกและปุ่มที่ผ่านมาได้มุมโค้งมนซึ่งจะสร้างรูปลักษณ์ที่ดีเมื่อรวมกลุ่มกัน
ปุ่มย้อนกลับ
เพื่อสร้างปุ่มย้อนกลับใช้ data-rel="back" แอตทริบิวต์ (หมายเหตุ: นี้จะไม่สนใจสมอของ href ค่า):
ปุ่มแบบอินไลน์
โดยค่าเริ่มต้นปุ่มใช้เวลาถึงเต็มความกว้างของหน้าจอ หากคุณต้องการให้ปุ่มที่เป็นเพียงที่กว้างเป็นเนื้อหาหรือถ้าคุณต้องการสองคนหรือมากกว่าปุ่มจะปรากฏเคียงข้างเพิ่ม "ui-btn-inline" ระดับ:
เพิ่มเติมคลาส CSS สำหรับปุ่มเชื่อมโยง
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| ui-btn-b | เปลี่ยนสีของปุ่มไปพื้นหลังสีดำมีข้อความสีขาว (ค่าเริ่มต้นเป็นพื้นหลังสีเทาที่มีข้อความสีดำ) | ลองมัน |
| ui-corner-all | เพิ่มมุมโค้งมนไปที่ปุ่ม | ลองมัน |
| ui-mini | ทำให้ปุ่มที่มีขนาดเล็ก | ลองมัน |
| ui-shadow | เพิ่มเงาปุ่ม | ลองมัน |
หากคุณต้องการใช้มากกว่าหนึ่งชั้นแยกแต่ละชั้นมีพื้นที่เช่น: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
โดยค่าเริ่มต้น <input> ปุ่มมีเงาและขอบโค้ง <a> และ <button> องค์ประกอบไม่ได้
สำหรับการอ้างอิงที่สมบูรณ์ของคลาส CSS สำหรับรูปแบบที่พบบ่อยไปที่ มือถือ jQuery CSS เรียนอ้างอิง
บทต่อไปแสดงให้เห็นถึงวิธีการแนบไอคอนปุ่มของคุณ