Create lists containing sub-lists
이 글에서 우리는 리스트의 아이템을 클릭하면 리스트 안에 sublist 가 나오도록 할 겁니다. sub-list 는 클릭 된 아이템 밑에 나오겠죠. 그리고 한번 더 그 아이템을 클릭하면 sub-list를 숨기겠습니다. 이 기능은 accordion menu 의 핵심이죠.
Manage sub-lists in a list
<!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>
<ul data-role=listview data-inset=true>
<li data-role=list-divider data-icon=arrow-d>
<a href=#> List 1 </a></li>
<li> Element 1.1 </li>
<li> Element 1.2 </li>
<li> Element 1.3 </li>
<li> Element 1.4 </li>
<li> Element 1.5 </li>
<li data-role=list-divider data-icon=arrow-d>
<a href=#> List 2 </a></li>
<li> Element 2.1 </li>
<li> Element 2.2 </li>
<li> Element 2.3 </li>
<li> Element 2.4 </li>
<li> Element 2.5 </li>
<li data-role=list-divider data-icon=arrow-d>
<a href=#> List 3 </a></li>
<li> Element 3.1 </li>
<li> Element 3.2 </li>
<li> Element 3.3 </li>
<li> Element 3.4 </li>
<li> Element 3.5 </li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li:not(:jqmData(role=list-divider))").hide ();
$("li:jqmData(role=list-divider)").bind ("vclick", function (event)
{
$(this).nextUntil ("li:jqmData(role=list-divider)").toggle ();
});
</script>
이 소스를 브라우저에서 열면 처음에는 리스트의 title들만 보입니다. 그리고 sub-list 들은 보이지 않죠. 이 리스트의 title들은 <li>
elements 에 data-role="list-divider"
attribute 를 가지고 있습니다. 바로 이 부분을 스크립트에서 처음 부분에서 받아서 사용하게 되는 겁니다.
Hide list items that are not titles of list
$("li:not(:jqmData(role=list-divider))").hide ();
bind
() statement 는 title element들에서 click events 가 발생하는 것을 observe 하는데 사용합니다. 그 다음에는 sub-title 을 숨기고 보이고 하는 기능들을 진행하게 되죠.
프로그램이 처음 실행 될 때는 모든 list 들이 close 된 상태입니다.
Click on the first element (List 1):
sub-list 는 list 안에 있습니다. 이 리스트를 클릭하면 그 sub-list 가 보이기도 하고 숨기도 하죠.
Change the icon for a list item
이전 프로그램을 조금 더 발전시킬까요. 리스트가 open 인 상태에서 title에 있는 icon 을 바꾸고 싶습니다. 화살표 방향이 다른걸로 표시하고 싶습니다. close 되면 다시 원래 화살표 방향으로 돌아오구요.
To achieve this, we must look in more detail, how is designed the HTML code created by jQuery Mobile to display a list item containing the icon.
이를 위해서는 jQuery Mobile 에 의해 생성된 HTML 코드를 봐야 합니다.
위에 코드를 보시면 icon은 <span>
element 의 ui-icon
class 에 의해 표시됩니다. 또한 ui-icon-arrow-d
class도 아이콘을 표시하는데 영향을 미칩니다. up arrow 아이콘을 표시하기 위해 ui-icon-arrow-u class를 바꾸겠습니다.
data-icon
attribute 가 리스트 아이템 내의 아이콘을 표시하는데 별 역할을 안 하고 있는 부분을 잘 보세요. 이 attribute는 리스트 아이템을 생성할 때에만 사용됩니다. 그리고 그 이후의 modification은 영향을 미치지 않습니다.
Change the icon displayed in a list item when clicking it
<!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>
<ul data-role=listview data-inset=true>
<li data-role=list-divider data-icon=arrow-d>
<a href=#> List 1 </a></li>
<li> Element 1.1 </li>
<li> Element 1.2 </li>
<li> Element 1.3 </li>
<li> Element 1.4 </li>
<li> Element 1.5 </li>
<li data-role=list-divider data-icon=arrow-d>
<a href=#> List 2 </a></li>
<li> Element 2.1 </li>
<li> Element 2.2 </li>
<li> Element 2.3 </li>
<li> Element 2.4 </li>
<li> Element 2.5 </li>
<li data-role=list-divider data-icon=arrow-d>
<a href=#> List 3 </a></li>
<li> Element 3.1 </li>
<li> Element 3.2 </li>
<li> Element 3.3 </li>
<li> Element 3.4 </li>
<li> Element 3.5 </li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li:not(:jqmData(role=list-divider))").hide ();
$("li:jqmData(role=list-divider)").bind ("vclick", function (event)
{
$(this).nextUntil ("li:jqmData(role=list-divider)").toggle ();
var $span = $(this).find ("span.ui-icon");
if ($span.hasClass ("ui-icon-arrow-d"))
{
$span.removeClass ("ui-icon-arrow-d");
$span.addClass ("ui-icon-arrow-u");
}
else
{
$span.removeClass ("ui-icon-arrow-u");
$span.addClass ("ui-icon-arrow-d");
}
});
</script>
(그대로 따라 했는데 왜 제 브라우저에서는 화살표 아이콘이 안 나올까요?
혹시 화살표 아이콘 나오시는 분은 저에게 방법 좀 알려 주세요.)
For example, when List 3 is open:
Managing the click on the icon of an item in a static list
이제 static 리스트 아이템에서 아이콘을 클릭했을 때 처리하는 방법을 알아보겠습니다. 예를 들어 한 리스트에 5개의 아이템을 넣었습니다. 각 element는 각각 delete icon이 있고 이 delete icon을 클릭 하면 해당 element를 delete 합니다.
그러려면 각 <li>
item 의 아이콘에 클릭이 일어날 경우 이를 다룰 수 있어야 겠죠. 위의 예제에서 보았듯이 이 아이콘은 <span>
element 의 ui-icon
CSS class에 의해 표시됩니다. 아래 샘플 코드를 보세요.
Manage click on the delete icon of list items
<!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>
<ul data-role=listview data-inset=true>
<li data-icon=delete> <a href=#>Element 1 </a></li>
<li data-icon=delete> <a href=#>Element 2 </a></li>
<li data-icon=delete> <a href=#>Element 3 </a></li>
<li data-icon=delete> <a href=#>Element 4 </a></li>
<li data-icon=delete> <a href=#>Element 5 </a></li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li .ui-icon").bind ("click", function (event)
{
$(this).closest ("li").remove ();
});
</script>
위와 같이 표시 되는데 제대로 작동되지는 않습니다. 그 이유는 아직 리스트의 HTML 이 jQuery Mobile code 로 transform 하지 않았기 때문이죠. 제대로 하기 위해서는 리스트가 finalize 되기까지 기다려야 합니다. 그러니까 bind
() method 는 리스트가 finalize 한 이후에 나와야겠죠.
So we write:
Wait until the list was created to manage the click on the delete icon
<!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>
<ul data-role=listview data-inset=true>
<li data-icon=delete> <a href=#>Element 1 </a></li>
<li data-icon=delete> <a href=#>Element 2 </a></li>
<li data-icon=delete> <a href=#>Element 3 </a></li>
<li data-icon=delete> <a href=#>Element 4 </a></li>
<li data-icon=delete> <a href=#>Element 5 </a></li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("ul").bind ("listviewcreate", function (event)
{
$("li .ui-icon").bind ("click", function (event)
{
$(this).closest ("li").remove ();
}).css ("z-index", 10);
});
</script>
Manage the click on the icon of an item in a dynamically created list (solution 1)
이제 리스트는 원래 HTML 내에서 존재하지는 않고 JavaScript 에 의해서 dynamically 생성된다는 것을 알 수 있습니다.
그러면 두번째 방법도 고려해 볼 수 있습니다. (물론 이전 방법도 훌륭한 방법입니다) 두번째 방법은 listviewcreate event를 사용해서 리스트가 생성되기를 기다리는 대신 jQuery Mobile listview
() method를 사용해서 오리지널 HTML 코드를 transform 하도록 하는 겁니다. 그러면 jQuery Mobile conventions에 맞게 display 할 수 있습니다.
The program becomes:
Direct use of the listview () method
<!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>
</div>
</body>
</html>
<script>
var html = "";
html += "<ul data-inset=true>";
html += "<li data-icon=delete> <a href=#>Element 1 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 2 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 3 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 4 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 5 </a></li>";
html += "</ul>";
$("#home div:jqmData(role=content)").append (html);
$("#home").bind ("pagecreate", function ()
{
$("ul").listview ();
$("li .ui-icon").bind ("click", function (event)
{
$(this).closest ("li").remove ();
});
});
</script>
이 소스도 제 경우엔 제대로 동작하지 않네요. 혹시 되시는 분 저에게 정보 좀 부탁드립니다.
listview
() method call은 생성된 리스트를 jQuery Mobile 리스트로 dynamically convert 해 줍니다. 이 메소드는 window 가 이미 생성된 상태에서 call 될 수 있습니다. 그래서 여전히
pagecreate event를 사용하고 있는 겁니다.
Manage the click on the icon of an item in a dynamically created list (solution 2)
바로 전 샘플 코드에 대해 더 알아보죠. 리스트의 HTML 에 data-role="listview" attribute를 넣었습니다. 이것은 콤포넌트를 생성하기 위해 listview () method 를 call 하는 것을 막아 주는 겁니다.
어쨌든 리스트 아이템에 있는 아이콘에 click event가 일어나는 여부를 observation 하는 것은 리스트가 생성된 이후에나 가능합니다. 그래서 리스트에 listviewcreate
event 를 사용해야 하는 겁니다.
Using the listviewcreate event
<!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>
</div>
</body>
</html>
<script>
var html = "";
html += "<ul data-role=listview data-inset=true>";
html += "<li data-icon=delete> <a href=#>Element 1 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 2 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 3 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 4 </a></li>";
html += "<li data-icon=delete> <a href=#>Element 5 </a></li>";
html += "</ul>";
$("#home div:jqmData(role=content)").append (html);
$("ul").bind ("listviewcreate", function ()
{
$("li .ui-icon").bind ("click", function (event)
{
$(this).closest ("li").remove ();
});
});
</script>
만약 listviewcreate event를 사용하지 않으면 이 리스트는 생성되지만 아이콘을 클릭해도 제대로 기능을 하지 않을 겁니다.
Allow deletion of a list item by clicking and holding
각 리스트 아이템마다 delete icon을 표시하는 것 보다 long click 을 감지해서 처리할 수도 있을 겁니다. 여기에 해당하는 이벤트가 taphold
입니다.
Delete an item from the list after a long click on the item
<!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>
<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 ("taphold", function (event)
{
$(this).remove ();
});
</script>
Allow deletion of a list item with a swipe
이제 오른쪽으로 swipe 했을 경우 아이템을 지우도록 해 보죠.
The event is managed by swiperight. Here is the program:
Manage swiperight events on the elements to remove
<!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>
<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)
{
$(this).remove ();
});
</script>
tistory429_07.html
Keep the rounded edges appearance to the list
이전 예제에서 리스트 블럭의 모서리가 rounding 처리 된 걸 보셨을 겁니다. 이 모서리들은 <ul> 에서 data-inset attribute 를 "true"로 세팅해서 처리한 겁니다.
아이템을 delete 했을 때 우리는 jQuery Mobile 에게 리스트의 첫번째 아이템과 마지막 아이템에 이 rounding 처리를 하라고 얘기해야 합니다. 첫번째나 마지막 아이템이 지워지면 그 자리를 차지하는 아이템에 rounding 처리가 되야 되겠죠. 이렇게 하기 위해 jQuery Mobile 은 첫번째 리스트 아이템에 ui-corner-top
CSS class를 사용하고 마지막 리스트 아이템에 ui-corner-bottom
CSS class를 사용합니다.
아이
이전 예제를 사용해서 여기에 CSS class를 추가 하겠습니다.
Keep the rounded edges appearance to the list
<!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>
<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)
{
$(this).remove ();
$("ul").find ("li:first").addClass ("ui-corner-top");
$("ul").find ("li:last").addClass ("ui-corner-bottom");
});
</script>
이제 첫번째와 마지막 element 가 지워져도 계속 rounding 효과는 유지 됩니다.
다른 방법도 있는데요. 더 쉽습니다. jQuery Mobile 이 이 CSS 를 자동으로 관리하도록 하면 됩니다. listview
("refresh") method 를 사용하면 되요. 이를 위해 아래 두 라인을 맨 밑의 예제코드로 바꿔주면 됩니다.
Management of rounded edges on the lists (with CSS classes)
$("ul").find ("li:first").addClass ("ui-corner-top");
$("ul").find ("li:last").addClass ("ui-corner-bottom");
For this:
Management of rounded edges on the lists (with the listview ("refresh") method)
$("ul").listview ("refresh");
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 버튼 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 |
| 리스트 Customization 하기 (0) | 2012.10.26 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
| Ajax 로 리스트 Retrieve 하기 (0) | 2012.10.23 |