ตราภาพปุ่ม jQuery Mobile

ตราภาพที่ jQuery Mobile ให้คุณใช้งานทำให้ปุ่มของคุณมีความน่าดึงดูดมากขึ้น

เพิ่มตราภาพในปุ่ม jQuery Mobile

สำหรับเพิ่มตราภาพในปุ่มของคุณ ใช้ค่าในอัตราะบุ data-icon:

<a href="#anylink" data-role="button" data-icon="search">ค้นหา</a>

คำเตือน：คุณยังสามารถใช้ค่าในอัตราะบุ data-icon ในองค์ประกอบ <button> หรือ <input>:

ข้างล่างนี้เราได้ระบุตราภาพที่ jQuery Mobile ให้คุณใช้งานได้บางตราภาพ:

ค่าของอัตราะบุ คำอธิบาย ตราภาพ ตัวอย่าง
data-icon="arrow-l" ฝั่งซ้าย ทดสอบ
data-icon="arrow-r" ฝั่งขวา ทดสอบ
data-icon="delete" ลบ ทดสอบ
data-icon="info" ข้อมูล ทดสอบ
data-icon="home" หน้าหลัก ทดสอบ
data-icon="back" กลับ ทดสอบ
data-icon="search" ค้นหา ทดสอบ
data-icon="grid" แนวตารา ทดสอบ

สำหรับข้อมูลเกี่ยวกับตราภาพปุ่ม jQuery Mobile ที่เต็มตัว โปรดเข้าชม คู่มือตราภาพ jQuery Mobile。

ตำแหน่งตราภาพ

คุณยังสามารถกำหนดตำแหน่งที่ตราภาพถูกจัดวาง: ขวาขึ้น, ขวา, ลง หรือ ซ้าย。

ใช้ค่าในอัตราะบุ data-iconpos ที่นี่เพื่อกำหนดตำแหน่ง：

ตำแหน่งตราภาพ：

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">ขวาขึ้น</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">ขวา</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">ลง</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">ซ้าย</a>

ทดลองด้วยตัวเอง

คำเตือน：โดยเริ่มต้น ไอคอนในปุ่มทุกตัวจะถูกจัดวางด้านซ้าย

แสดงไอคอนเท่านั้น

หากต้องการแสดงไอคอนเท่านั้น โปรดตั้งค่า data-iconpos ให้เป็น "notext":

กลับ:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">ค้นหา</a>

ทดลองด้วยตัวเอง