2016. 3. 18. 11:18ㆍlanguage/jquery mobile
Form (폼) 요소에 대해서 공부합니다.
Form 요소는 모두 <form> </from> 태그 사이에 있어야 합니다.
form 요소는 input, select, check, radio 등 여러 태그들이 올 수 있고 이 태그들은 사용자로부터 내용을 입력받게 됩니다.
또한 입력받은 내용들을 form 이 서버로 전송하는 역할을 하게 됩니다.
기존에 알고있던 html 의 form 요소보다 한층 더 업그레이드된 ui 를 제공하게 됩니다.
이번 시간에는 button과 slider 에 대해 살펴보겠습니다.
button
기본적인 버튼은 a 태그, button 태그, input 태그로 표현할 수 있습니다.
소스부터 살펴봅니다.
|
1
2
3 |
<a class="ui-shadow ui-btn ui-corner-all" href="#">Link button</a>
<button class="ui-shadow ui-btn ui-corner-all">Button element</button>
<input type="button" value="Button element" data-theme="a" data-icon="delete"> |
cs |
1번 라인 : a 태그를 사용한 버튼입니다. 클래스로 버튼임을 지정하게 됩니다. 기본적으로 width는 화면의 너비에 마춰집니다.
2번 라인 : button 태그를 사용한 버튼입니다. 방식은 a 태그와 같습니다.
3번 라인 : 3번 라인은 input 태그를 사용했습니다. data-icon 이라는 속성이 보입니다. 아이콘을 지정해주는 것은 이전 강의들에서 나온 부분임으로 생략합니다. data-iconpos 속성을 이용하면 아이콘의 위치를 이동할 수 있습니다. (참고강좌 : http://cofs.tistory.com/164)
이번에는 버튼들을 가로로 정렬시켜 보면서 다른 속성들도 살펴보겠습니다.
|
1
2
3 |
<a class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-star" href="#">Inline + icon</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-b ui-mini" href="#">Mini + theme</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-icon-plus ui-btn-icon-notext ui-btn-b ui-mini" href="#">icon only button</a> |
cs |
클래스 중에 ui-btn-inline 클래스가 있는데 이 클래스가 버튼들을 가로로 정렬시켜주는 역할을 합니다. 가로로 정렬하기 위해서는 정렬할 모든 버튼에 ui-btn-inline 클래스가 필요합니다.
1번 라인 : ui-icon-star 클래스는 별모양 아이콘을 나타냅니다. 이 클래스는 아이콘의 위치를 지정해 주는 ui-btn-icon-left 클래스와 함께 정의되어야 합니다. ui-btn-icon-left 클래스와 ui-icon-star 클래스 등 클래스로 아이콘을 설정하는 방식은 input 태그에서는 적용되지 않습니다.
2번 라인 : ui-mini 클래스가 있는데 이는 작은 버튼을 나타내는 의미입니다.
3번 라인 : ui-icon-plus 클래스와 ui-btn-icon-notext 클래스가 함께 있으면 아이콘만을 나타내는 것을 의미합니다.
위의 두 분류의 버튼들은 모두 사이가 멀어져 보입니다.
이 버튼들을 붙혀서 그룹을 지어줄 수 있습니다.
|
1
2
3
4
5 |
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus ui-btn-b" href="#">Add</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete ui-btn-b" href="#">Delete</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-grid ui-btn-b" href="#">More</a>
</div> |
cs |
data-role="controlgroup" 속성을 가진 div 태그로 감싸주면 버튼들은 하나의 그룹으로 묶이게 됩니다. 여기서 data-type="horizontal" 이라는 속성이 있는데 이는 수평으로 그룹을 지어준다는 의미이며 생략시 기본값으로 수직으로 그룹화가 됩니다. data-mini 속성은 작은 버튼으로 만들것인지에 대한 정의입니다.
slider (슬라이더)
이번에는 slider에 대해 살펴보겠습니다.
슬라이더는 사용자가 커서를 이동시켜서 값을 선택할 수 있는 태그입니다.
input 태그의 type="range" 속성을 사용하며 HTML5 에서 새로 추가된 속성입니다.
|
1
2
3
4 |
<label for="slider">Slider:</label>
<input name="slider" id="slider" type="range" min="0" max="100" value="50">
<label for="slider-fill">Slider with fill and step of 50:</label>
<input name="slider-fill" id="slider-fill" type="range" min="0" max="1000" step="50" value="60" data-highlight="true"> |
cs |
2번 라인 : 별다른 속성 추가 없이 range 속성만으로도 slider 를 만들 수 있습니다.
4번 라인 : step 속성은 증가되거나 감소되는 량의 범위를 지정해줍니다. data-highlight 는 slider 의 증가된 부분에 색을 표시할지 여부를 설정합니다.
이번에는 슬라이더의 범위를 설정할 수 있도록 만들어 봅니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input name="range-1a" id="range-1a" type="range" min="0" max="100" value="40">
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" type="range" min="0" max="100" value="80">
</div>
<div data-role="rangeslider" data-mini="true">
<label for="range-2a">Mini rangeslider:</label>
<input name="range-2a" id="range-2a" type="range" min="0" max="100" value="40">
<label for="range-2b">Mini rangeslider:</label>
<input name="range-2b" id="range-2b" type="range" min="0" max="100" value="80">
</div> |
cs |
1번 라인 : data-role="rangeslider" 속성을 가진 div로 slider 2개를 감싸줍니다.
그럼 끝입니다. 다른 점은 없습니다.
7번 라인에서 data-mini 속성은 조금 더 작은 slider 를 만들겠다는 속성입니다.
data-type="horizontal" 이라는 속성이 있는데 이는 세로로 그룹을 지어준다는 의미이며 생략시 기본값으로 가로로 그룹화가 됩니다.
본문 내용이 이러한데 예시로 보여주신 항목들은 가로로 붙어 있는데 혹시 반대가 아닌가요?
안녕하세요 !!
지적해주신 부분이 반대로 써져있었던 것이 맞습니다 ㅠㅠ
해당 부분 jquery mobile documentation 보고 다시한번 확인한 후 수정해 두었습니다.
감사합니다.
코로나 조심하세요 !!!!