General appearance of the button
이전 글에서 만들었던 소스를 firefox 의 firebug 를 통해서 jQuery 에 의해 생성된 HTML 소스를 보겠습니다.
<a> link 는 이제 ui-btn CSS class 가 됐죠? 그리고 안에 ui-btn-inner CSS class가 있는 <span> element 도 포함하고 있습니다. 그 안에는 ui-btn-text class 를 가지고 있는 <span> element가 있습니다.
이제 버튼의 style을 원하는 대로 바꿀 수 있겠죠? ui-btn-text
CSS class 를 따로 override 해서 정리하면 버튼 스타일을 customize 할 수 있습니다.
Changing the style of the button
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-btn-inner {
padding : 25px;
background-color : black;
}
.ui-btn-text {
font-size : 25px;
color : white;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
<a id=btn data-role=button href=#> Click here </a>
</div>
</div>
</body>
</html>
<script>
$("#btn").bind ("click", function (event)
{
alert ("click");
});
</script>
tistory434_01.html이렇게 하면 색다른 모양의 버튼이 보일 겁니다.
Aspect of the clicked button
버튼이 눌렸을 때 jQuery Mobile은 ui-btn-down-c
CSS class를 assign 합니다. 클래스 이름 끝의 "c"는 default theme button 을 말하는 겁니다. data-theme
attribute 에 의해 modify 될 수 있습니다. 이 클래스도 따로 CSS 클래스로 implement 할 수 있습니다.
Adding the CSS class ui-btn-down-c in the styles of buttons
<style type=text/css>
.ui-btn-inner {
padding : 25px;
background-color : black;
}
.ui-btn-text {
font-size : 25px;
color : white;
}
.ui-btn-down-c {
font-style : italic;
}
</style>
위 코드를 적용하면 버튼이 클릭될 때 글자가 이탤릭체로 될 겁니다.
특정 CSS property를 사용할 때 주의하실 부분이 있습니다. 예를 들어 ui-btn-down-c
class 정의 부분에 color
property를 다시 사용하신다면 child element (the <span>
with the ui-btn-text
CSS class) 안에 재 정의 된 것으로 적용 되지 않을 겁니다. 제대로 처리 되게 하려면 아래와 같이 하셔야 합니다.
Changing the text color when the button is clicked
<style type=text/css>
.ui-btn-inner {
padding : 25px;
background-color : black;
}
.ui-btn-text {
font-size : 25px;
color : white;
}
.ui-btn-down-c {
font-style : italic;
}
.ui-btn-down-c .ui-btn-text {
color : red;
}
</style>
이렇게 하면 버튼을 누를 때 글자가 이탤릭 체로 되면서 글자 색도 빨간색으로 바뀌도록 할 수 있습니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 새로운 컬럼 insert 하기 (0) | 2012.11.06 |
|---|---|
| Ajax 로 테이블 삽입하기 (0) | 2012.11.06 |
| HTML element 를 jQuery Mobile table 로 변환하기 (0) | 2012.11.02 |
| 다이나믹하게 테이블 생성하기 (0) | 2012.11.02 |
| 버튼 관련 예제 파일 들 (0) | 2012.10.31 |
| 버튼에서 발생하는 이벤트 관리하기 (0) | 2012.10.30 |
| Ajax 로 버튼 insert 하기 (0) | 2012.10.30 |
| HTML element를 jQuery Mobile 버튼으로 변환하기 (0) | 2012.10.30 |
| 다이나믹하게 버튼 생성하기 (0) | 2012.10.29 |
| 리스트 다루기 예제 (0) | 2012.10.29 |