jQuery Mobile 14

jQuery Mobile refresh() 이벤트

동적으로 문서 객체를 생성할 경우에는 이전 페이지에서 배운 create 이벤트를 실행합니다. 하지만, 리스트에 요소를 추가했다면 refresh() 메서드를 사용해야 합니다. 아래의 코드처럼 예제소스의 body 태그를 구성하고 사용해 봅시다. 헤더의 오른쪽에 추가용 버튼을 만들었습니다.

body 태그 구성

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>MOBILE</h1>
										<a data-icon="plus" class="ui-btn-right">ADD</a>
									</div>
									<div data-role="content">
										<ul data-role="listview">
											<li><a href="#">List Item</a></li>
										</ul>
									</div>
								</div>
							</body>
						

이어서 아래의 소스코드처럼 리스트의 요소를 동적으로 추가합니다.

동적으로 리스트 요소 추가

							$(document).bind('pagecreate', function () {
								$('a[class=ui-btn-right]').click(function () {
									// 문서 객체를 추가합니다.
									$('
  • List Item
  • ').appendTo('ul'); // 기본 이벤트를 제거합니다. return false; }); });


    코드를 실행하면 알 수 있겠지만 안타깝게도 리스트 요소가 추가되지만, jQuery Mobile 스타일을 띄지 않습니다.

    이렇게 리스트의 요소를 추가할 때는 refresh() 메서드를 실행해야 jQuery Mobile의 리스트 모양을 형성합니다. jQuery Mobile UI 메서드는 jQuery UI 메서드와 비슷한 형태로 사용하는데요. 아래의 소스코드처럼 listview() 메서드의 매개 변수에 refresh를 입력하면 됩니다.

    Listview 메서드의 refresh 매개 변수 설정

    							$(document).bind('pagecreate', function () {
    								$('a[class= ui-btn-right]').click(function () {
    									// 문서 객체를 추가합니다.
    									$('
  • List Item
  • ').appendTo('ul'); $('ul').listview('refresh'); // 기본 이벤트를 제거합니다. return false; }); });


    다시 한번 코드를 실행하고 추가 버튼을 누르면 jQuery Mobile의 리스트 요소가 형성됩니다.
    기본 애플리케이션을 만들 때 사용하는 jQuery Mobile과 관련된 내용은 모두 종료했습니다.