테이블의 각 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 한칸을 두도록 만든 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| input field 에 값 할당하기 (0) | 2012.11.09 |
|---|---|
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 다이나믹하게 새 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 |