직무교육 18일차(jQuery Mobile)

UI Framework

- 스타일시트를 이용해 화면구성 해놓은 라이브러리이다.

1. 스마트폰용 : jqm, 센차터치, jq touch

2. pc : bootstrap(반응형),  jquery ui...

스마폰 개발(카메라, 센서 ) 및 배포 라이브러리(하이브리드웹(폰갭 + html5))

	Native App	Web App
실행속도	빠름	일반적으로 느림
플랫폼	플랫폼마다 제작하여야 함	하나의 버전으로 모든 플랫폼에서 실행 가능
배포	앱 마켓을 통한 배포	배포할 필요가 없음
버전 업데이트	상당한 시간이 걸림	즉시 반영된다.
오프라인시	사용가능	약간의 기능 사용 가능

[jQuery Mobile]

https://jquerymobile.com/ -> Download -> CDN 방식

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

참고사이트

https://www.w3schools.com/jquerymobile/

<div data-role="footer" data-position="fixed">

- fixed로 설정해주면 footer를 하단에 고정할 수 있다.

<a href="#pagetwo">두번째 페이지</a>

- 두번째 페이지 id값으로 href 설정해주면 페이지 이동할 수 있다.

<a href="pgtwo.html">두번째 페이지</a>

- 파일 분리했을 경우 파일명으로 href 설정해주면 페이지 이동할 수 있다.

<div data-role="page" id="pagetwo" data-dialog="true">

- dialog로 새로운 창이 뜨다.

<a href="pgtwo.html" data-transition="slide">두번째 페이지</a>

- slide로 페이지 이동한다.

data-direction="reverse"

- 모든 속성이 반대로 변경된다.(slide -> 왼쪽, 오른쪽)

다른 애니메이션 속성들 참고 사이트 : https://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp

[Button 적용]

<input type="button" value="Button">

<button class="ui-btn">Button</button>

<button class="ui-btn ui-btn-inline">Button</button> //버튼이 가로로 길게 나오지 않고 content 크기만큼만

<a href="#anylink" class="ui-btn">Button</a>

<div data-role="controlgroup" data-type="horizontal">

<a href="#" class="ui-btn">Button 1</a>

<a href="#" class="ui-btn">Button 2</a>

<a href="#" class="ui-btn">Button 3</a>

- button 그룹으로 묶어서 일직선상에  button 놓인다.

<a href="#" class="ui-btn" data-rel="back">Go Back</a>

- href를 따로 설정해주지 않아도 이전 페이지로 돌아간다.

[jQuery Mobile Icons]

https://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp

ui-btn-icon-notext

- button class속성에 설정하면 text는 나오지않고 아이콘만 나온다.

[Panel]

<div data-role="panel" id="myPanel">

<h2>Panel Header..</h2>

<p>Some text..</p>

</div>//header위쪽에 배치

<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>//content 안에 배치

<div data-role="collapsible">

<h1>Click me - I'm collapsible!</h1>

<p>I'm the expanded content.</p>

</div>//content 안에 배치

- data-collapsed="false"로 설정하면 처음부터 내용 펼쳐져서 보여진다.

[Table]

필터링하기

1. tabla header에  data-priority="1" 속성을 부여한다.

2. table에 data-mode="columntoggle" 속성을 부여한다.

3. table에 data-column-btn-text="Click me!" 속성을 부여하면 필터링 버튼 글자 변경할 수 있다.

[List View]

<ul data-role="listview" data-inset="true">

<li><a href="#">한국</a></li>

<li>한국2</li>

<li><a href="#">한국3</a></li>

</ul>

- content 안에 배치한다.

- data-inset="true"를 설정해주면 margin생긴다.

<li data-role="list-divider">과일</li>

- 항목에 대한 카테고리를 지정해 구분할 수 있다.

<li><a href="#"><img src="image/b.png" class="ui-li-icon">USA</a></li>

- class="ui-li-icon"설정해주면 text 옆에 16*16사이즈의 사진이 들어간다.

- 미설정시 32*32사이즈

추가버튼 눌러 list 추가하기

function fn() {

$('[data-role="listview"]').append('<li><a href="#">Europe</a></li>');

$('[data-role="listview"]').listview('refresh');//설정해야 디자인이 적용된다.

}

[Form]

<div class="ui-field-contain">

- text와 input이 한줄에 나온다.

+ arr.join('-') : 배열에 들어있는 것들 -로 구분할 수 있다.

+ arr.join('\n') : 배열에 들어있는 것들을 개행할 수 있다.

arr=[]; function fn() { arr.push($('#fullname').val()); arr.push($('#bday').val()); arr.push($('#email').val()); arr.push($('[name="gender"]:checked').val());//radio $('[name="favcolor"]:checked').each(function (i, v) {//checkbox arr.push($(v).val()); }) arr.push($('#day>option:selected').val());//select //console.log(arr.join('-')); $('#info').val(arr.join('\n')); }

$("#pageone").on("swipeleft",function(){

$.mobile.changePage("ptwo.html");

});

- id pageone인 페이지에서 왼쪽으로 swipe하면 ptow.html로 이동한다.

- $.mobile.changePage("ptwo.html", {transition:"slide"});로 설정하면 slide로 페이지가 이동한다.

$(document).on("pageshow", "#pagetwo", function() {

$('#oname').val($('#fullname').val());

})

- pagetwo로 이동하면서 id oname인 input에 pageone에 있던 id fullname 값을 넣어준다.