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/ 

1. 제이쿼리 모바일 폼UI를 이용하기 위해서는 감싸는 영역에 data-role="fieldcontain"을 지정해야 한다

  <div data-role="content">
   <div data-role="fieldcontain">
//한줄 텍스트
: 기본 브라우저 UI 사용할 경우 data-role="none"
     <label for="">„</label>
     <input type="text/password/email/url/tel/number" id="">

//검색영역
     <label for="search">‰</label>
     <input type="search" id="search">

//두줄이상 텍스트
     <label for="contact"></label>
     <textarea id="contact"></textarea>

//슬라이더
     <label for="year">…„</label>
     <input type="range" name="year" id="year" value="1980" min="1900" max="2013" />

//두개중 하나 선택 슬립 스위치
      <label for="gender">성별</label>
      <select name="gender" id="gender" data-role="slider">
        <option value="남자">남자</option>
        <option value="여자">여자</option>
      </select> 

//라디오버튼: 디폴트는 세로...
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>구입횟수</legend>
        <input type="radio" name="number" id="n1" value="1번" checked="checked" />
        <label for="n1">1번</label>
        <input type="radio" name="number" id="n2" value="2번" />
        <label for="n2">2번</label>
        <input type="radio" name="number" id="n3" value="3번" />
        <label for="n3">3번</label>
        <input type="radio" name="number" id="n4" value="4번" />
        <label for="n4">4번 이상</label>
      </fieldset>

//체크박스
      <fieldset data-role="controlgroup">
        <legend>주제별 문의</legend>
        <input type="checkbox" name="type1" id="type1" value="HP 신규작성">
        <label for="type1">HP 신규작성</label>
        <input type="checkbox" name="type2" id="type2" value="HP 리뉴얼">
        <label for="type2">HP 리뉴얼</label>
        <input type="checkbox" name="type3" id="type3" value="시스템 개발">
        <label for="type3">시스템 개발</label>
        <input type="checkbox" name="type4" id="type4" value="컨설팅">
        <label for="type4">컨설팅</label>
      </fieldset>

//셀렉트메뉴
: 팝업으로뜨게 할 경우 data-native-menu="false"
: 복수 지정 가능 multiple="multiple"
     <label for="number">구입횟수</label>
     <select name="number" id="number" multiple="multiple" data-native-menu="false">
       <option value="">선택하세요.</option>
       <option value="n1">1번</option>
       <option value="n2">2번</option>
       <option value="n3">3번</option>
       <option value="n4">4번 이상</option>
     </select>

//버튼영역
: 버튼크기를 문자에 맞추기 data-inline="true"
    <input type="button" value="취소" data-theme="" data-icon="delete">
    <input type="submit" value="전송" data-theme="" data-icon="arrow-r">
   </div>
  </div>


참고: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/

1. 접이식 패널
1.1 접힌형식이 디폴트
  <div data-role="content">
   <div data-role="collapsible" data-collapsed="false">
     <h3>접이식 패널</h3>
     <p>클릭하면 패널이 닫힙니다.</p>
   </div>
  </div>

1.2 다중 접이식 패널
  <div data-role="content">
   <div data-role="collapsible-set">
     <div data-role="collapsible">
       <h3>패널 1</h3>
       <p>패널 1이 열립니다.</p>
     </div>
     <div data-role="collapsible">
       <h3>패널 2</h3>
       <p>패널 2가 열립니다.</p>
     </div>
     <div data-role="collapsible">
       <h3>패널 3</h3>
       <p>패널 3이 열립니다.</p>
     </div>
   </div>
  </div>


참고: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/accordions/