리스트에 아이템 insert 하기
jQuery method들은 리스트에 intem 을 insert 하는 일들을 자주 합니다. 예를 들어 HTML 코드에 의해 정의된 element 들을 insert 하기 위해 append (html) method를 쓰는 경우가 있습니다. 이 메소드를 사용해서 <ul> 나 <ol> element 의 끝에 추가 하게 되는 거죠.
Here we define a <ol> list currently empty. A button Insert at the end of the list allows to insert an element <li> at the end of the <ol> list.
아래 예제에는 빈 <ol>
list가 정의 돼 있습니다. Insert at the end of the list 버튼을 누르면<ol>
list 끝에 element <li>를 insert 하겠습니다.
Insert an item at the end of 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>
<ol id=list1 data-role=listview>
</ol>
<br />
<a data-role=button id=add>Insert at the end of the list</a>
</div>
</div>
</body>
</html>
<script>
$("#add").bind ("click", function (event)
{
$("#list1").append ("<li>Inserted element</li>");
});
</script>
이걸 실행하고 몇번 insert 하면 아래 모양처럼 될 겁니다.
<li>
elements가 insert 됐죠. 그런데 이게 jQuery Mobile 스러운 리스트로 표시되지 않네요. 왜냐하면 jQuery Mobile 은 insert 할 때마다 refresh 를 하지 않기 때문이죠. <ul>
or <ol>
element 상에서 listview
("refresh") method 를 call 해야 됩니다.
아래 구문을 리스트 아이템 insert 한 후에 넣어 보세요. <li>
element 가 insert 될 때 자바스크립트가 실행 될 겁니다.
Refresh the list after each element insertion
$("#add").bind ("click", function (event)
{
$("#list1").append ("<li>Inserted element</li>");
$("#list1").listview ("refresh");
});
|
|
|
tistory420_01.html