안녕하세요!!
오랜만에 jQuery Mobile 포스팅을 하는것처럼 느껴집니다. 요즘 정신도 없고 게으르고 하다보니 그런듯하네요.
아무튼 이번에 포스팅할 내용은 jQuery Mobile 에서 사용되는 버튼의 종류 및 사용방법에 대해서 설명드립니다.
jQuery Mobile 은 3가지의 방법으로 버튼을 만들 수 있습니다.
첫번째 방법은 <button> 입니다.
<button>Button</button>
두번째 방법은 <input> 입니다.
<input type="button" value="Button">
세번째 방법은 <href> 입니다.
<a href="#" data-role="button">Button</a>
// 여기서 특이점은 붉은 글씨로 표현된 부분입니다. 그냥 단순히 href 를 사용하면 텍스트에 링크만 걸게 되기 때문에 data-role="button" 이라고 정의를 하여 버튼을 생성합니다.
기본적으로 버튼은 화면의 전체 너비를 차지합니다. 하지만 두 개 이상의 버튼을 만들고자 할 경우 data-inline="true"을 사용합니다.
예제와 그림을 보며 설명 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>안녕하세요!!</p>
<a href="#pagetwo" data-role="button" data-inline="true">두 번째 페이지</a>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>안녕히가세요!!</p>
<a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
<a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
<a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
</body>
</html>
만약 위 소스에서 data-inline="true" 을 적용하지 않았다면 아래와 같은 이미지가 나오게 됩니다.
즉 <a href="#pagetwo" data-role="button">두 번째 페이지</a> 처럼 말이죠
화면을 꽉 채우는 버튼이 생성되게 됩니다. 그래서 두 개 이상의 버튼을 생성코자 할 경우 data-inline="true" 을 사용합니다.
그리고 기본적으로 버튼은 서로간의 공백을 두고 생성됩니다. 위 이미지에서 보다시피 말이죠. 하지만 버튼이 꼭 여백을 두고 생성되어야 한다는 법칙은 없지요. 그래서 jQuery Mobile은 버튼간의 공백없이 생성할 수도 있게 만들었습니다.
data-role="controlgroup" data-type="horizontal" 을 사용하여 만들수 있습니다.
아래 예제와 이미지를 참고하시면 되겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>그룹 버튼</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>수평적 그룹 버튼</p>
<a href="#" data-role="button">Button 1</a>
<a href="#" data-role="button">Button 2</a>
<a href="#" data-role="button">Button 3</a>
</div><br>
<div data-role="controlgroup" data-type="vertical">
<p>수직적 그룹 버튼</p>
<a href="#" data-role="button">Button 1</a>
<a href="#" data-role="button">Button 2</a>
<a href="#" data-role="button">Button 3</a>
</div>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
</body>
</html>
위 이미지에서 보다시피 버튼들이 붙어서 나오는것을 확인할 수 있습니다. 현재 익스플로러 화면에서 테스트한 이미지를 올리고 있어서 버튼의 모양이 직사각형으로 보여지는데 크롬 또는 사파리 등의 브라우저에서 확인하면 양옆이 둥근모서리로 표현되는 것을 확인할 수 있습니다. 그리고 그림자효과도 버튼에 기본적으로 적용되어 있습니다.
그리고 참고적으로 몇 가지 방법을 더 설명드릴까 합니다.
위에서 설명드렸지만 기본적으로 버튼은 둥근모서리를 만들어 줍니다. 하지만 둥근모서리가 싫고 직각모서리를 만들고 싶은 경우 추가하는 옵션이 있습니다. <a href="#" data-role="button" data-corners="false">버튼</a> 붉은 글씨로 되어 있는 data-corners="false" 를 사용하게 되면 라운딩효과 즉 둥근모서리를 하지 않겠다라는 의미 입니다.
또한 기본적으로 생성되는 버튼의 크기는 일정합니다. 하지만 조금더 작게 버튼을 만들고 싶을 경우 사용하는 옵션이 있습니다.
<a href="#" data-role="button" data-mini="true">버튼</a> 붉은 글씨로 되어 있는 data-mini="true" 를 사용하게 되면 더 작은 버튼을 만들 수 있습니다.
버튼을 생성하면 기본적으로 둥근모서리와 그림자효과가 적용되어 생성됩니다. 둥근모서리는 위에서 data-corners="false" 를 사용하여 없앨수 있습니다. 그리고 그림자효과를 지우는 방법은 <a href="#" data-role="button" data-inline="true" data-shadow="false">버튼</a> 붉은 글씨로 되어 있는 data-shadow="false" 를 사용하면 그림자효과가 없어지게 됩니다.
알면 알수록 신기하고 재미있는 jQuery Mobile 입니다.
'jQuery Mobile > JM Tutorial' 카테고리의 다른 글
| jQuery Mobile 툴바(Toolbars) (0) | 2013.11.13 |
|---|---|
| jQuery Mobile 툴바(toolbars) (0) | 2013.11.11 |
| jQuery Mobile 페이지2 (2) | 2013.10.28 |
| jQuery Mobile 페이지 (0) | 2013.10.25 |
| jQuery Mobile 인스톨(Install) (0) | 2013.10.21 |
