ถัดไป ก่อนหน้า

3.3 Buttons

     b. Button icons

   สามารถเพิ่ม ไอคอนให้กับปุ่มเพื่อใช้ในการสื่อความหมายของการทำงานของแต่ละปุ่มโดยใช้ attribute data-icon เพิ่มใน link

CD ไฟล์: buttons-types.html

การจัดตำแหน่ง icon(Icon positioning)

   โดยทั่วไปแล้วไอคอนทั้งหมดของปุ่มจะอยู่ด้านซ้ายของปุ่มซึ่งในหัวข้อนี้ผู้ใช้สามารถจัดตำแหน่งไอคอนในตำแหน่งต่างๆให้เหมาะสมได้โดยเพิ่ม attribute data-iconpos ใน link ของปุ่ม

• data-iconpos="right"

CD ไฟล์ :buttons-icons.html

• data-iconpos="top"

CD ไฟล์ :buttons-icons.html

• data-iconpos="bottom"

CD ไฟล์ :buttons-icons.html

• data-iconpos="notext"

CD ไฟล์ :buttons-icons.html

Mini & Inline version

• data-iconpos="right"

CD ไฟล์ :buttons-icons.html

• data-iconpos= “left”

CD ไฟล์ :buttons-icons.html

• data-iconpos="top"

CD ไฟล์ :buttons-icons.html

• data-iconpos="bottom"

CD ไฟล์ :buttons-icons.html

• data-iconpos="notext"

CD ไฟล์ :buttons-icons.html

การเลือกกำหนดไอคอนเอง(Custom Icons)

    สามารถเรียกใช้ผ่านคลาส ui-icon-myapp-email ซึ่งกำหมดรูปแบบในไฟล์ CSS

ตัวอย่าง

  .ui-icon-myapp-email {
	background-image: url("app-icon-email.png");
}
  

   เพื่อความเป็นมาตรฐานกลางของอุปกรณ์จึงได้มีการใช้ -webkit-min-device-pixel-ratio: 2 ในการกำหนดขนาดของไอคอนให้เข้ากับอุปกรณืที่มีความต่างของความระเอียดหน้าจอ ด้วยการกำหนดพื้นหลังเป็น 18x18 พิกเซลซึ่งจะปรับให้ขนาด 36 พิกเซลเข้าไปยังพื้นที่ 18 พิกเซลได้อย่างพอดี

ตัวอย่าง

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-email {
		background-image: url("app-icon-email-highres.png");
		background-size: 18px 18px;
	}  ...more HD icon rules go here...
}
  

รูปแบบ theme ไอคอน

• ไอคอน theme "a"

CD ไฟล์ :buttons-icons.html

• ไอคอน theme "b"

CD ไฟล์ :buttons-icons.html

• ไอคอน theme "c"

CD ไฟล์ :buttons-icons.html