테이블에서 이벤트 다루기
테이블의 각 cell 에서 처리될 수 있는 주요 이벤트는 click
event 입니다. jQuery Mobile에서는 vclick
virtual event 로도 사용할 수 있죠. taphold 와 swipe events 들도 사용될 수 있습니다.
예를 들어 cell 테이블에 long click (taphold) 이 일어났을 때 어떤 동작을 하도록 만들 수 있습니다. 아래 예제는 long click 이 일어났을 때 그 cell 의 content를 delete 하는 예제입니다.
Deleting array elements by clicking and holding
<!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>
<div class=ui-grid-b>
<div class=ui-block-a>Element 1.1</div>
<div class=ui-block-b>Element 1.2</div>
<div class=ui-block-c>Element 1.3</div>
<div class=ui-block-a>Element 2.1</div>
<div class=ui-block-b>Element 2.2</div>
<div class=ui-block-c>Element 2.3</div>
<div class=ui-block-a>Element 3.1</div>
<div class=ui-block-b>Element 3.2</div>
<div class=ui-block-c>Element 3.3</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(".ui-block-a, .ui-block-b, .ui-block-c").bind ("taphold", function (event)
{
$(this).html (" ");
});
</script>
|
|
tistory446_01.html테이블의 각 cell 에는 ui-block-a,
ui-block-b,
or ui-block-c
CSS classes 들이 있습니다. 이 클래스들에 taphold event를 implement 했죠. 그러면 long click 이 감지되면 <div> 의 content 는 " "로 바뀝니다. 실제로 delete 되는건 아니죠 .하지만 사실상 delete 되는 것입니다. 해당 셀을 그냥 빈 공간으로 두는 것이 아니라 space 한칸을 두도록 만든 겁니다.
