Managing a two-state button (pressed / not pressed)
이전 예제에서 버튼이 클릭됐을 때 어떤 동작을 하도록 했었습니다. 이 버튼의 상태 (pressed / not pressed)를 관리하기 위해 <a>
element에 ui-btn-active
CSS class 를 사용할 수 있습니다.
Managing a two-state 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;
}
.ui-btn-active {
font-style : italic;
}
</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)
{
$(this).toggleClass ("ui-btn-active");
});
</script>
tistory435_01.html이 소스는 버튼이 클릭되면 ui-btn-active class 를 활성화/비활성화 하는 작업을 jQuery 의 toggleClass () method 를 사용해서 구현했습니다.
Dynamically change the text and the button icon
단순히 글자 모양을 바꾼느 것 보다 클릭함에 따라서 글자 자체와 버튼의 아이콘도 바꾸는 것을 한번 해 보죠.
버튼 ON, OFF 두가지 상태가 있고 버튼이 ON 인 상태에서는 아이콘이 오른쪽에 나타나고 OFF 인 상태에서는 아이콘이 없어지도록 하겠습니다.
Volume management ON or OFF
<!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>
</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=# data-icon=check
data-iconpos=right selected=true> Volume ON </a>
</div>
</div>
</body>
</html>
<script>
$("#btn").attr ("select", "true");
$("#btn").bind ("click", function (event)
{
var selected = $(this).attr ("select");
if (selected == "true")
{
$(this).attr ("select", "false");
$(this).find (".ui-icon").hide ();
$(this).find (".ui-btn-text").text ("Volume OFF");
}
else
{
$(this).attr ("select", "true");
$(this).find (".ui-icon").show ();
$(this).find (".ui-btn-text").text ("Volume ON");
}
});
</script>
버튼의 상태를 select attribute에 보관해 두고 있죠? (디폴트는 true) 입니다. 그래서 이 값이 true 이면 버튼은 ON 이고 false 이면 버튼은 OFF 가 됩니다. 아이콘은 ui-icon CSS class 에서 처리되구요 텍스트는 ui-btn-text class를 통해서 처리 됩니다.
처음 페이지를 열면 아래와 같을 겁니다.
버튼을 클릭하면 글자가 OFF 로 바뀝니다.
Display a dynamically Delete button on a list item
이제 구현할 기능은 버튼을 동적으로 생성하는 겁니다. 화면에 리스트가 있고 그 리스트 중의 한 아이템을 오른쪽으로 drag 하면 delete 버튼이 생깁니다. 그리고 그 delete 버튼을 누르면 해당 아이템이 지워지는 겁니다.
아이폰의 메일에 이와 비슷한 기능이 있습니다.
Delete button added dynamically
<!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>
.remove {
position : absolute;
right : 10px;
top : 5px;
font-size : 13px;
}
</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>
<ul data-role=listview data-inset=true>
<li> Element 1 </li>
<li> Element 2 </li>
<li> Element 3 </li>
<li> Element 4 </li>
<li> Element 5 </li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li").bind ("swiperight", function (event)
{
if ($(this).find (".remove").length) return;
$(this).append ("<input type=button value=Delete class=remove />");
$("input.remove").unbind ().bind ("click", function (event)
{
$(this).closest ("li").remove ();
$("ul").find ("li:first").addClass ("ui-corner-top");
$("ul").find ("li:last").addClass ("ui-corner-bottom");
});
});
</script>
Delete button은 해당 리스트 아이템에 버튼이 없을 경우에만 생성됩니다. 그리고 이 버튼을 누르면 해당 아이템이 delete 됩니다.
여기서 Delete button이 생겨난 이후에 꼭 버튼만 클릭하는게 아니라 해당 아이템을 클릭하면 그 아이템이 지워지게 하면 재밌을 까요? 이를 위해서는 다음 예제를 참고하세요.
Hide the Delete button by clicking outside the button
버튼 밖을 클릭해서 해당 아이템이 지워지도록 하려면 아래 코드를 자바스크립트 안에 추가하세요.
Remove the Delete button when clicking outside the button
$("li").bind ("vclick", function (event)
{
$(this).find ("input.remove").remove ();
});
이 코드는 약간의 문제가 있습니다.
해결 방법은 리스트 아이템에 time-out 을 넣는 겁니다. 이렇게 되면 버튼을 클릭해도 제대로 작동할 겁니다.
Inclusion of a delay in the removal 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>
.remove {
position : absolute;
right : 10px;
top : 5px;
font-size : 13px;
}
</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>
<ul data-role=listview data-inset=true>
<li> Element 1 </li>
<li> Element 2 </li>
<li> Element 3 </li>
<li> Element 4 </li>
<li> Element 5 </li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li").bind ("swiperight", function (event)
{
if ($(this).find (".remove").length) return;
$(this).append ("<input type=button value=Delete class=remove />");
$("input.remove").unbind ().bind ("click", function (event)
{
$(this).closest ("li").remove ();
$("ul").find ("li:first").addClass ("ui-corner-top");
$("ul").find ("li:last").addClass ("ui-corner-bottom");
});
});
$("li").bind ("vclick", function (event)
{
var $this = $(this);
setTimeout (function ()
{
$this.find ("input.remove").remove ();
}, 500);
});
</script>
이 소스에서는 버튼을 클릭하는 시간을 0.5초 줬습니다. 이 시간 동안에는 리스트 아이템은 remove 되지 않을 겁니다. 그 다음에 버튼이 delete 되겠죠.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |
|---|---|
| 다이나믹하게 새로운 컬럼 insert 하기 (0) | 2012.11.06 |
| Ajax 로 테이블 삽입하기 (0) | 2012.11.06 |
| HTML element 를 jQuery Mobile table 로 변환하기 (0) | 2012.11.02 |
| 다이나믹하게 테이블 생성하기 (0) | 2012.11.02 |
| 버튼 Customize 하기 (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 |