14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘)

Index

12. jQuery Mobile 툴바(내비게이션바)

13. jQuery Mobile 공통 푸터바

14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘)

15. jQuery Mobile 리스트

16. jQuery Mobile 그리드 레이아웃

 

 

jQuery Mobile에서는 기본적으로 18가지 아이콘을 제공한다.

 

<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>

<a href="#" data-role="button" data-icon="arrow-r">arrow-r</a>

<a href="#" data-role="button" data-icon="arrow-u">arrow-u</a>

<a href="#" data-role="button" data-icon="delete">delete</a>

<a href="#" data-role="button" data-icon="plus">plus</a>

<a href="#" data-role="button" data-icon="arrow-d">arrow-d</a>

<a href="#" data-role="button" data-icon="minus">minus</a>

<a href="#" data-role="button" data-icon="check">check</a>

<a href="#" data-role="button" data-icon="gear">gear</a>

<a href="#" data-role="button" data-icon="forward">forward</a>

<a href="#" data-role="button" data-icon="back">back</a>

<a href="#" data-role="button" data-icon="refresh">refresh</a>

<a href="#" data-role="button" data-icon="grid">grid</a>

<a href="#" data-role="button" data-icon="star">star</a>

<a href="#" data-role="button" data-icon="search">search</a>

<a href="#" data-role="button" data-icon="alert">alert</a>

<a href="#" data-role="button" data-icon="info">info</a>

<a href="#" data-role="button" data-icon="home">home</a>

 

 

버튼 상에서 아이콘 위치는 data-iconpos="notext|left|right|top|bottom" 속성값을 이용한다.

• notext : 버튼 텍스트는 감추고 아이콘만 보인다
• left : 버튼 텍스트 좌측에 아이콘을 보인다(기본값)
• right : 버튼 텍스트 우측에 아이콘을 보인다
• top : 버튼 텍스트 상단에 아이콘을 보인다
• bottom : 버튼 텍스트 하단에 아이콘을 보인다

 

기본아이콘 대신 사용자 정의 아이콘을 사용할 수 있다.

.ui-icon-roadrunner {

    background-image : url(roadrunner.png) !important;

    background-repeat : no-repeat !important;

}

 

<a href="#" data-role="button" data-icon="roadrunner" data-inline="true">roadrunner</a>