1.  header에 뒤로가는 버튼 자동 생성
1.1 페이지 요소에 자동으로 Back버튼을 지정하는 방법 
 <div data-role="page" id="page2" data-add-back-btn="true"> 
1. 2 라벨명 지정
 <div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="뒤로"> 

2 header가 아닌곳에 back버튼을 넣으려면..
2.1 a요소에 data-rel속성에 back을 설정한 링크 추가
<a href="#" data-rel="back"></a>

※ back기능은 편리하긴 하나 방문 페이지가 복잡한 경우 돌아가는 위치가 달라지므로 추천하지 않음


해결방법~~
1.1 header에 임의 버튼 생성하기
1.2 버튼정렬하기
  <div data-role="header">
   <a href="#page2">home</a>
    <h1>페이지 1</h1>
   <a href="#page2" class="ui-btn-right">save</a>
  </div>

2.1 footer에 버튼생성
   : footer에는 여백설정이 없으므로 class속성을 지정해줘야함
  <div data-role="footer" class="ui-bar">
   <a href="#page2">Remove</a>
   <a href="#page2">Add</a>
  </div>

1. 네비게이션바 추가
2. 스크롤되지않게 고정하기
  : 공통으로 사용되는 footer에 data-id를 주면 풋터가 고정됨
  <div data-role="header" data-position="fixed">
   <h1>페이지 1</h1>
   <div data-role="navbar">
       <ul>
         <li><a href="#page2">One</a></li>
         <li><a href="#page2">Two</a></li>
    </ul>
   </div>
  </div> 
....
  <div data-role="footer" data-position="fixed" data-id="footerID"><h4>footer 1</h4></div>
  </div>

3. header, footer를 fixed한후 page에 풀스크린 요소를 추가할수있음
: data-fullscreen="true"



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

<form action="form.php" method="post">
<div data-role="fieldcontain">

<label for="name">이름</label>
<input type="text" id="name">

<label for="comment">문의 내용</label>
<textarea id="comment"></textarea>

//플립스위치
<label for="gender">성별</label>
<select name="gender" id="gender" data-role="slider">
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>

//체크박스
<div data-role="fieldcontain">
<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>
</fieldset>
</div>

//취소,전송버튼 : data-icon="delete"아이콘추가, data-inline="true"문자열
<input type="button" value="취소" data-theme="b" data-icon="delete" data-inline="true">
<input type="submit" value="전송" data-theme="b" data-icon="arrow-r" data-inline="true">

</div>
</form>

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

iframe으로 지도를 불러오면 화면에 표시되지 않는 경우가 생길수 있어 google maps API를 사용해 지도를 불러온다.

1. head요소에 삽입
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

2. css설정
 div#map{
  width:100%;
  height:400px;
  border:4px solid white;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
 }

3. google map api에서 공개된 소스 삽입
<script>
$(function(){
  var myLatlng = new google.maps.LatLng(위도,경도);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
  });
});
</script>

4. 회색으로 표시되는 영역에 따른 스크립트 변경
<script>
$('div#페이지요소).live('pageshow',function(){
  var myLatlng = new google.maps.LatLng(위도,경도);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
  });
});
</script>

div태그
data-role="page/header/content/footer/dialog"

a태그
data-rel="dialog"(팝업창형식으로 열기)
data-transition ="slide(왼쪽으로)/slieup/slidedown/pop/fade/flip(좌우회전:안드로이드X)"
data-transition = "none"
data-direction = "reverse"(역방향 애니메이션)

ul태그
data-role="listview/list-divider(제목)"
data-thema=""
data-inset="true"(둥근입체리스트)
//분할아이콘
data-split-icon="gear"
data-split-thema="a/b/c/d"

//제목요소 표시
li태그
data-role="list-divider" > ul에 data-dividertheme="테마이름"

//카운트 버블
span태그
class="ui-li-count" > ul에 ata-count-theme="테마이름"

//이미지표시 : 80*80 default
img class="ui-li-icon" (16*16)
16*16 이상인 경우..
style="max-width:16px; max-height:16px;"

//리스트상단 검색창 추가
ul > data-filter="true" data-filter-placeholder="검색어"

<ul data-role="listview" data-inset="true" data-theme="c">
    <li data-role="list-divider">Menu</li>
    <li><a href="#page">
     <h3>jQuery Mobile는?</h3>
     <p>jQuery Mobile에 대해 설명합니다.</p>
    </a></li>
    <li><a href="#page">
     <h3>jQuery Mobile 기본</h3>
     <p>jQuery Mobile 사용법을 설명합니다.</p>
    </a></li>
    <li><a href="#page">
     <h3>jQuery Mobile 예제</h3>
     <p>jQuery Mobile을 이용한 예제를 소개합니다.</p>
    </a></li>
   </ul>
  </div>


a태그
href="#index"
data-icon="arrow-l/arrow-r"
data-direction="reverse(대칭)"

<a href="#index" data-icon="arrow-l" data-direction="reverse"

1. CDN으로부터 Jquery파일 로딩
http://jquerymobile.com/download/

2. 다운받은 파일 로컬 주소 연결
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

3. 스마트폰 Viewport 설정
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>jQuery Mobile Sample</title>
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
 <div data-role="page" id="index">
  <div data-role="header" data-theme="b">
   <h1>jQuery Mobile</h1>
  </div>

  <div data-role="content">
  </div>

  <div data-role="footer" data-theme="b">
   <h4><small>Copyright &copy; All Rights Reserved.</small></h4>
  </div>   
 </div></body>
</html>