[JQuery UI]버튼 UI

2013. 1. 25. 12:07 Web/Mobile


1. 버튼에 아이콘 넣기
1.1 아이콘 설정: data-icon
  <button data-icon="arrow-l">data-icon="arrow-l"</button> //왼쪽방향 화살표
  <button data-icon="arrow-r">data-icon="arrow-r"</button> //오른쪽방향 화살표
  <button data-icon="arrow-u">data-icon="arrow-u"</button> //위쪽방향 화살표
  <button data-icon="arrow-d">data-icon="arrow-d"</button> //아리쪽방향 화살표
  <button data-icon="delete">data-icon="delete"</button>// 삭제
  <button data-icon="plus">data-icon="plus"</button>
  <button data-icon="minus">data-icon="minus"</button>
  <button data-icon="check">data-icon="check"</button>
  <button data-icon="gear">data-icon="gear"</button>
  <button data-icon="refresh">data-icon="refresh"</button>
  <button data-icon="forward">data-icon="forward"</button>
  <button data-icon="back">data-icon="back"</button>
  <button data-icon="grid">data-icon="grid"</button>
  <button data-icon="star">data-icon="star"</button>
  <button data-icon="info">data-icon="info"</button>
  <button data-icon="home">data-icon="home"</button>
  <button data-icon="search">data-icon="search"</button> //돋보기



1.1 아이콘 위치변경 : data-iconpos="righr/left/top/bottom"
   <button data-icon="star" data-iconpos="top"> data-iconpos="top"</button>


2. 링크를 버튼으로 사용하기
2.1 버튼으로 지정
<a href="index.html" data-role="button">button 1</a>

2.2 버튼 그룹화
: 수평상태로 나열  data-type="horizontal"
   <div data-role="controlgroup" data-type="horizontal">
    <a href="index.html" data-role="button">button 1</a>
    <a href="index.html" data-role="button">button 2</a>
    <a href="index.html" data-role="button">button 3</a>
   </div>



참고: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/icons/
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/buttons/ 
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET