jQuery Mobile 1.4 SVG Icon

jQuery Mobile Icons (1.4버전) - SVG icons (45개)

Text와 이미지를 함께 사용한 버튼이며, SVG icons이기에 사이즈가 늘어나도 깨짐이 없다.

 

사용법 1) data-icon="arrow-r"

사용법 2) class=" ... ui-icon-클래스"  class="... ui-icon-arrow-r"

 

 

jQuery Mobile SVG Icons

<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-alert">alert</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d">arrow-d</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d-l">arrow-d-l</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-r">arrow-r</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-u">arrow-u</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-audio">audio</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-back">back</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-bars">bars</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-bullets">bullets</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar">calendar</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-camera">camera</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-d">carat-d</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-l">carat-l</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-r">carat-r</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-u">carat-u</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-check">check</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-clock">clock</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-cloud">cloud</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-comment">comment</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">delete</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-edit">edit</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-eye">eye</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-forbidden">forbidden</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-forward">forward</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-gear">gear</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-grid">grid</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-heart">heart</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home">home</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-info">info</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-location">location</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-lock">lock</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-mail">mail</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-minus">minus</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-navigation">navigation</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-phone">phone</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">plus</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power">power</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-recycle">recycle</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-refresh">refresh</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-search">search</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-shop">shop</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-star">star</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-tag">tag</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user">user</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-video">video</button>

 

 

참고1: http://demos.jquerymobile.com/1.4.5/icons/

참고2: jQuery Mobile 1.4: Cleaner, Faster and More Powerful

 

 

과거 jQuery Mobile에서 지원하는 아이콘들 (18가지)

과거 jQuery Mobile Button들

<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>

 

출처: http://roadrunner.tistory.com/194 [삶의 조각들]