Examples of manipulation of buttons
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>
tistory435_02.html
버튼의 상태를 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>
tistory435_03.html
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>
tistory435_04.html
이 소스에서는 버튼을 클릭하는 시간을 0.5초 줬습니다. 이 시간 동안에는 리스트 아이템은 remove 되지 않을 겁니다. 그 다음에 버튼이 delete 되겠죠.
