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 값을 넣어준다.
hw_0804.zip