button 만들기
data-role="button"
모바일에서 버튼을 만드는법은 기존과 다르다.
a 링크태그에 data-role="button"를 적용시켜서 만든다.
버튼만들기
<a href="#" data-role="button">버튼</a>
이렇게 만든 버튼은 브라우저의 폭에 맞게 알아서 100% 적용이되는 버튼이 생성된다.(디폴트)
만약
<a href="#" data-role="button">버튼</a>
<a href="#" data-role="button">버튼2</a>
이렇게 2개만들면 밑에 추가로 생성된다.(안나눠짐)버튼 넓이 지정
1. 스타일을 지정해서 버튼의 넓이 설정
위에 스타일탭에 width를 100%를 적용하여 넓이 설정
=>이렇게하면 위에 방법과 다르게 스타일로 width 100%를 적용하고 td를 2개만들면 50:50 으로 나누어서 만들어진다.
<style>
.ui-table-width{ /*테이블 내부의 버튼의 넓이를 지정*/
width:100%;
}
</style>
--------------------
<table class="ui-table-width"> <!--클래스를 정하고 위에 스타일텝에서 적용 -->
<tr> <!-- 스타일로 width 100%를 적용하고 td를 2개만들면 50:50 으로 나누어서 만들어짐 -->
<td><a href="#" data-role="button">버튼2</a></td>
<td><a href="#" data-role="button">버튼3</a></td>
</tr>
</table>2. 브라우저의 넓이와 상관없이 버튼 글자길이에 맞게 맞추어서 버튼의 폭을 지정
1) data-inline="true" (버튼의 글자길이에 맞게 폭이 설정)
2)스타일을 선언하고 강제로 적용(버튼의 길이하고는 상관X)
1) data-inline="true"를 적용하여 글자길이에 맞게 설정
<a href="#" data-role="button" data-inline="true">버튼4</a>
2) 스타일로 길이를 강제로 설정(100%같이 %가 아닌 100px로 부여함)
<style>
.ui-button-width { /*임의로 버튼의 넓이를 지정*/
width:100px
}
</style>
<a href="#" data-role="button" class="ui-button-width">버튼5</a>
Button의 다양한 옵션들
버튼의 다양한 속성들을 정리하고 예시로 정리하고자 한다.
버튼의 속성->data-* 속성
속성 설명 값
data-corners 모서리를 둥글게 할것인지 여부 true(기본)|false
data-icon 아이콘 home | delete | plus,,,,, jquerymobile사이트
data-iconpos 아이콘위치 left|right|top|bottom|notext(글자만 출력)
data-iconshadow 아이콘그림자 true(기본)|false
data-shadow 버튼그림자 true(기본)|false
data-thema 버튼테마 letter(a~e)
data-role="button"으로 만든 버튼에
크기가 글자수에 맞게 조절하고 모서리는 둥글게 하며 홈아이콘을 추가한 버튼1을 만들려면?
<a href="#" data-role="button" data-inline="true"
data-corners="false" data-icon="home">버튼1</a>
------------------------------------------------------------
스타일을 지정해서 만든 버튼에
크기는 글자수에 맞게 조절하며 삭제아이콘을 추가한 추가버튼을 만들려면?
<table class="ui-table-width">
<tr>
<td><a href="#" data-role="button" data-inline="true"
data-icon="delete">삭제</a>
</td>
</tr>
</table>
-----------------------------------------------------------------------
스타일을 지정해서 만든 버튼에
글자크기는 글자수에 맞게조절하며 추가아이콘을 추가하고 아이콘이 오른쪽에 베치되게하는 추가 버튼을 만들려면?
<table class="ui-table-width">
<tr>
<td><a href="#" data-role="button" data-inline="true"
data-icon="add" data-iconpos="right">추가</a>
</td>
</tr>
</table>
---------------------------------------------------------------
크기는 글자수에 맞게조절하며 새로고침 아이콘을 추가하고 아이콘은 위쪽에 배치하고 버튼의 그림자 제거한 새로고침 버튼을 만들려면?
<a href="#" data-role="button" data-inline="true"
data-icon="refresh" data-iconpos="top"
data-shadow="false">새로고침</a>
----------------------------------------------------------------------
크기는 글자수에 맞게저절하며 찾기아이콘을 추가하고 버튼안에 글자를 제거한 버튼을 만들려면?
<a href="#" data-role="button" class="ui-button-width"
data-icon="search" data-iconpos="notext">버튼5</a> // 버튼5는 어짜피 지워짐
버튼의 그룹
data-role="controlgruop"
여러 버튼들을 하나의 그룹으로 묶을수 있다.
버튼들을 그룹하기위해선 하나의 태그로(div) 묶어준 뒤
data-role="controlgruop"을 적용한다
<div data-role="content">
<div data-role="controlgroup"><!-- 버튼그룹을 하기위해 묶어준다 -->
<a href="#" data-role="button" data-icon="back">back</a>
<a href="#" data-role="button" data-icon="forward">forward</a>
<a href="#" data-role="button" data-icon="refresh">refresh</a>
</div>
버튼의 수직,수평정렬
그룹 버튼을 수직이나 수평으로 정렬할수있다.
수직정렬은 그룹으로 만들때 디폴트(기본)로 적용되기때문에 따로 지정안해도 된다.
수평으로 정렬할거면 data-type="horizontal"을 적용한다.
수직정렬(디폴트)
<div data-role="content">
<div data-role="controlgroup"><!-- 수직정렬(디폴트) -->
<a href="#" data-role="button" data-icon="back">back</a>
<a href="#" data-role="button" data-icon="forward">forward</a>
<a href="#" data-role="button" data-icon="refresh">refresh</a>
</div>
----------------------------------------
수평정렬
<div data-role="controlgroup" data-type="horizontal"><!-- 수평정렬 -->
<a href="#" data-role="button" data-icon="back">back</a>
<a href="#" data-role="button" data-icon="forward">forward</a>
<a href="#" data-role="button" data-icon="refresh">refresh</a>
</div>
header
모바일에서의 header특징
모바일에서의 header의 특징을 정리하고자 한다.
- header에서는 버튼을 만들때 data-role="button"을 생략해도 버튼이 생성된다.
- 버튼이 만들어지면 만들어진 순서대로 자동으로 좌우배치된다.
- 강제로 일반 버튼을 오른쪽에 배치할거면 class="ui-btn-right"을 적용한다.
- 그러면 기존에 오른쪽에 배치한 버튼은 다음줄로 자동으로 개행(=이동)된다.
<div data-role="header">
<h1>이전,다음버튼을 생성</h1> <!-- content와 다르게 data-role="button" 생략 -->
<a href="#" data-icon="arrow-l" class="ui-btn-right">이전</a> <!-- 자동으로 좌우정렬되지만 강제로 오른쪽에 배치 -->
<a href="#" data-icon="arrow-r">다음</a> <!-- 버튼이 자동으로 좌우정렬 된다 하지만 위에 강제로 오른쪽으로 이동해서 왼쪽으로 밀림-->
</div>
content
content는 header와 다르게 버튼을 생성할때 반드시 data-role="button"를 적용해야한다. (생략불가)
<div data-role="content">
<a href="#" data-icon="arrow-l">data-icon="arrow-l</a>
이렇게 생략하면 버튼이 안만들어진다. 따라서
<a href="#" data-role="button" data-icon="arrow-r">data-icon="arrow-r</a>
</div>
이렇게 꼭 넣어줘야한다.
footer
header와의 공통점
-버튼을 만들때 data-role="button"을 생략이 가능하다
header와의 차이점
-만들어진 버튼은 좌우로 자동으로 배치가 안된다
따라서 좌우로 배치할때 수동으로 직접 작성하여 배치해야한다.
=> ui-btn-left(left=5px) 또는 ui-btn-right(right=5px)
<div data-role="footer">
<h1>화면 하단</h1> <!-- header와 다르게 직접 입력해야한다. -->
<a href="#" data-icon="arrow-l" class="ui-btn-left">이전</a>
<a href="#" data-icon="arrow-r" class="ui-btn-right">다음</a>
</div>
2022-08-11
