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

jQuery Mobileปุ่มไอคอน

❮ก่อนหน้า ถัดไปบท❯

jQuery มือถือให้ชุดของไอคอนที่จะทำให้คุณดูปุ่มที่ต้องการมากขึ้น


เพิ่มไอคอนปุ่มมือถือ jQuery

หากต้องการเพิ่มไอคอนปุ่มของคุณให้ใช้ ui-icon ระดับและตำแหน่งไอคอนที่มีระดับตำแหน่งไอคอน (ui-btn-icon - pos ) :

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left" >Search</a>

หมายเหตุ: สำหรับปุ่มอื่น ๆ เช่นปุ่มในมุมมองรายการและรูปแบบคุณต้องใช้แอตทริบิวต์ข้อมูลไอคอน นี้จะอธิบายในบทต่อมา

ด้านล่างเราจะได้แสดงไอคอนที่มีอยู่บางอย่างที่มือถือ jQuery ให้:

ระดับไอคอน ลักษณะ ไอคอน ตัวอย่าง
ui-icon-arrow-l ลูกศรซ้าย ลองมัน
ui-icon-arrow-r ลูกศรขวา ลองมัน
ui-icon-info ข้อมูล ลองมัน
ui-icon-delete ลบ ลองมัน
ui-icon-back กลับ ลองมัน
ui-icon-audio ลำโพง ลองมัน
ui-icon-lock กุญแจ ลองมัน
ui-icon-search ค้นหา ลองมัน
ui-icon-alert เตือนภัย ลองมัน
ui-icon-grid ตะแกรง ลองมัน
ui-icon-home บ้าน ลองมัน

สำหรับการอ้างอิงที่สมบูรณ์ของทุกปุ่มมือถือ jQuery ไอคอน, โปรดไปที่เรา มือถือ jQuery ไอคอนอ้างอิง

ไอคอนการวางตำแหน่ง

คุณสามารถระบุหนึ่งในสี่ของค่าที่ไอคอนที่ควรจะอยู่ในตำแหน่งปุ่ม: top, right, bottom หรือ left

ใช้ ui-btn-icon ระดับเพื่อระบุตำแหน่ง:

ไอคอนตำแหน่งปุ่มสำหรับการเชื่อมโยง

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
ลองตัวเอง»

ถ้าคุณไม่ได้ระบุตำแหน่งไอคอนสำหรับการเชื่อมโยงปุ่มไอคอนจะไม่แสดง

แสดงเฉพาะไอคอน

เพื่อแสดงเฉพาะไอคอนใช้ "notext" เป็นค่าสำหรับตำแหน่งไอคอน:

ตัวอย่าง

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext" >Search</a>
ลองตัวเอง»

ถอดวงกลม

โดยค่าเริ่มต้นไอคอนทั้งหมดมีวงกลมสีเทา (แผ่นดิสก์) รอบตัวพวกเขา ในการลบวงกลมเพิ่ม "ui-nodisc-icon" ชั้นไปยังองค์ประกอบหรือภาชนะที่ใช้บรรจุ:

ตัวอย่าง

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
ลองตัวเอง»

ดำหรือขาวไอคอน

โดยค่าเริ่มต้นไอคอนทั้งหมดเป็นสีขาว การเปลี่ยนสีไอคอนสีดำเพิ่ม "ui-alt-icon" ไปยังองค์ประกอบหรือภาชนะที่ใช้บรรจุ:

ตัวอย่าง

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon" >Black</a>
ลองตัวเอง»

ตัวอย่างเพิ่มเติม

เพิ่ม "ui-nodisc-icon" ชั้นภาชนะ
ตัวอย่างของ "ui-nodisc-icon" ระดับเพิ่มลงในภาชนะ

เพิ่ม "ui-alt-icon" ชั้นภาชนะ
ตัวอย่างของ "ui-alt-icon" ระดับเพิ่มลงในภาชนะ


❮ก่อนหน้า ถัดไปบท❯