1. 레이아웃 그리드
ui-block-a 클래스가 가장 맨 앞임
2. 콜렙서블 컨텐트 블록
3. 콜렙서블 셋(아코디언)
4. 테마롤러 디자인하기
테마롤러 사용법
http://themoeroller.jquerymobile.com으로 접속한뒤
사용하는 jquery 버젼을 설정해준다.
테마롤러를 이용하면 사용자 정의 css파일을 얻을 수 있다.
위의 팔레트에서 드래그앤 드롭으로 아래와같이 커스터마이징 테마를 쉽게 만들 수 있다.
다운로드 버튼을 누르면
다음과 같이 나와서 테마 이름을 쓰고
<link rel=”stylesheet” href=”css/themes/my-custom-theme.css”/>를 추가해서 써야된다고 써있다.
다운받은 파일을 풀어보면 다음과 같이 나온다.
themes폴더를 카피해서 앱타나 스튜디오 프로젝트에 넣는다.
여기서 프로젝트.html파일에
첫번째는 자기가 만든 테마.css파일을 넣고 두번째는 jquery.mobile.structure-1.3.2.css를 반드시 넣어야한다. (커스텀 테마적용시!)
<link rel="stylesheet" href="themes/kch.css" />
<link rel="stylesheet" href="js/jquery.mobile.structure-1.3.2.css" />
출력화면을 먼저 살펴보면 다음과 같이
적용됨을 알 수 있다.
17-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>17-01</title>
<link rel="stylesheet" href="themes/kch.css" />
<link rel="stylesheet" href="js/jquery.mobile.structure-1.3.2.css" />
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="formtheme" data-add-back-btn="true" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h3>폼 테마 적용</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content" data-theme="a">
<form name="myform">
<div data-role="fieldcontain">
<label for="textinput">텍스트 입력 필드</label>
<input type="text" id="textinput" placeholder="입력하세요."/>
</div>
<div data-role="fieldcontain">
<label for="slider">슬라이더</label>
<input type="range" id="slider" value="0" min="0" max="100" step="1"/>
</div>
<div data-role="fieldcontain">
<label for="flipswitch">플립 토글 스위치</label>
<select name="flipswitch" id="flipswitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>
라디오 버튼(세로)
</legend>
<input type="radio" name="radiov" value="선택 #1" id="radio1" checked="checked"/>
<label for="radio1">선택 #1</label>
<input type="radio" name="radiov" value="선택 #2" id="radio2"/>
<label for="radio2">선택 #2</label>
<input type="radio" name="radiov" value="선택 #3" id="radio3"/>
<label for="radio3">선택 #3</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>
라디오 버튼(가로)
</legend>
<input type="radio" name="radioh" value="선택 #1" id="radio4" checked="checked"/>
<label for="radio4">#1</label>
<input type="radio" name="radioh" value="선택 #2" id="radio5"/>
<label for="radio5">#2</label>
<input type="radio" name="radioh" value="선택 #3" id="radio6"/>
<label for="radio6">#3</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>
체크박스 버튼
</legend>
<input type="checkbox" name="checkbox1" value="선택 #1" id="checkbox1"/>
<label for="checkbox1">선택 #1</label>
<input type="checkbox" name="checkbox2" value="선택 #2" id="checkbox2"/>
<label for="checkbox2">선택 #2</label>
<input type="checkbox" name="checkbox3" value="선택 #3" id="checkbox3"/>
<label for="checkbox3">선택 #3</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="selectnative">셀렉트 메뉴(native)</label>
<select name="selectnative" id="selectnative">
<option value="">선택하세요</option>
<option value="선택 #1">선택 #1</option>
<option value="선택 #2">선택 #2</option>
<option value="선택 #3">선택 #3</option>
<option value="선택 #4">선택 #4</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="selectjqm">셀렉트 메뉴(jqm)</label>
<select name="selectjqm" id="selectjqm" data-native-menu="false" multiple="multiple">
<option value="">선택하세요</option>
<option value="선택 #1">선택 #1</option>
<option value="선택 #2">선택 #2</option>
<option value="선택 #3">선택 #3</option>
<option value="선택 #4">선택 #4</option>
</select>
</div>
</form>
<label for="columngrid">컬럼 레이아웃 그리드</label>
<div name="columngrid" id="columngrid">
<div class="ui-grid-a">
<div class="ui-block-a">
<button data-theme="c" data-icon="arrow-l" >
Previous
</button>
</div>
<div class="ui-block-b">
<button data-theme="c" data-icon="arrow-r" data-iconpos='right'>
Next
</button>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<button data-theme="c">
Cancel
</button>
</div>
<div class="ui-block-b">
<button data-theme="a">
No
</button>
</div>
<div class="ui-block-c">
<button data-theme="b">
Yes
</button>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<button data-theme="b">
More
</button>
</div>
</div>
</div>
<label for="collapsibleblock">콜랩서블 컨텐트 블록</label>
<!-- collapsible과 data-collpased="false로"p태그는 paragraph로 한 문단-->
<div name="collapsibleblock" id="collapsibleblock" data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
<h3>제목</h3>
<p>
컨텐트
</p>
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>제목</h3>
<p>
컨텐트
</p>
<div data-role="collapsible" data-theme="d" data-content-theme="d">
<h3>제목</h3>
<p>
내용
</p>
</div>
</div>
<div data-role="collapsible" data-content-theme="c">
<h3>제목</h3>
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="textarea">내용:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="reset" data-theme="c">
취소
</button>
</div>
<div class="ui-block-b">
<button type="submit" data-theme="b">
전송
</button>
</div>
</fieldset>
</form>
</div>
<div data-role="collapsible" data-content-theme="c">
<h3>제목</h3>
<p>
내용
</p>
<ul data-role="listview" data-inset="true" data-theme="d">
<li>
<a href="#">아이템 #1</a>
</li>
<li>
<a href="#">아이템 #2</a>
</li>
<li>
<a href="#">아이템 #3</a>
</li>
<li>
<a href="#">아이템 #4</a>
</li>
</ul>
</div>
</div>
<!-- 콜랩서블 셋과 컨텐트 차이는 data-role이 다르다 set이 있고 없고 !-->
<!-- 하나만 클릭가능 -->
<label for="collapsibleset">콜랩서블 셋</label>
<div name="collapsibleset" id="collapsibleset" data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>제목</h3>
<p>
내용
</p>
</div>
<div data-role="collapsible">
<h3>제목</h3>
<p>
내용
</p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>제목</h3>
<p>
내용
</p>
</div>
<div data-role="collapsible">
<h3>제목</h3>
<p>
내용
</p>
</div>
<div data-role="collapsible">
<h3>제목</h3>
<p>
내용
</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| window.location 객체 (0) | 2016.05.05 |
|---|---|
| 자바스크립트 - apply와 call 차이점 (0) | 2015.02.03 |
| Javascript - jQuery Mobile 유틸리티 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 이벤트 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |
| Javascript - jQuery 기본 효과, 페이딩, 슬라이딩 (0) | 2015.01.29 |