UX Component - Change Mode List

Home Back

Change Mode List - Swipe Menu, Swipe Delete

Change Mode List는 List에서 Swipe라는 Action을 통해 버튼을 생성하고, 버튼에 Event를 발생시켜 페이지 이동이나 선택된 List를 삭제할 수 있다. 이 샘플에서는 오른쪽으로 Swipe할 경우에 버튼을 생성하여 페이지 이동 또는 리스트 삭제의 샘플을 보여준다.
Change Mode List 관련 내용들을 사용하기 위해서는 jquery-mobile-custom.css, jquery-mobile-custom.js 를 반드시 jquery와 jquerymobile 사이에 포함해주어야 하며 li 의 데이터 속성을 추가함으로서 기능을 이용할 수 있다.
li의 속성에 data-swipefg="menu" 라는 속성을 추가함으로서 list에서 swiperight를 통해 버튼 메뉴가 생성되고 버튼을 클릭함으로서 li의 속성에 data-swipeurl, data-swipeurl2 속성에 적용된 별도의 경로로 이동할 수 있다.
또한, li의 속성에 data-swipefg="delete" 라는 속성을 추가함으로서 list에서 swiperight를 통해 list에 삭제 버튼이 생성되고 버튼을 클릭함으로서 이벤트가 발생한 list를 제거할 수 있다.
jquery-mobile-custom.js 의 주요 기능은, pageshow event에서 div내에 있는 ul li 개체들 중 swiperight 이벤트가 발생 시 data-swipefg 의 속성값을 확인하여 menu 기능 혹은 delete의 기능을 수행한다.

jquery-1.9.1.min.js 와 jquery.mobile-1.1.1.js 스크립트 사이에 적용

<link type="text/css" rel="stylesheet" href="<c:url value="/css/egovframework/mbl/cmm/swipebutton/jquery-mobile-custom.css" />" />
<script type="text/javascript" src="<c:url value="/js/egovframework/mbl/cmm/swipebutton/jquery-mobile-custom.js"></script>

Swipe Menu 예제 코드

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Swipe Menu</li>
<li data-swipeurl="mode-page1.do" data-swipeurl2="mode-page2.do" data-swipefg="menu">
<a href="#">Swipe Item 1</a>
</li>
<li data-swipeurl="mode-page1.do" data-swipeurl2="mode-page2.do" data-swipefg="menu">
<a href="#">Swipe Item 2</a>
</li>
<li data-swipeurl="mode-page1.do" data-swipeurl2="mode-page2.do" data-swipefg="menu">
<a href="#">Swipe Item 3</a>
</li>
</ul>

Swipe Delete 예제 코드

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Swipe Delete</li>
<li data-swipefg="delete">
<a href="#">Swipe Delete Item 1</a>
</li>
<li data-swipefg="delete">
<a href="#">Swipe Delete Item 2</a>
</li>
<li data-swipefg="delete">
<a href="#">Swipe Delete Item 3</a>
</li>
</ul>

추가 설명 Change Mode List - Swipe Menu에서 버튼 관련 수정 방법 예시

jquery-mobile.custom.js 파일을 보게 되면 'ul li' 에 발생하는 swiperight 이벤트의 function 에서 로직을 처리하게 된다.
$('ul li').unbind('swiperight').bind('swiperight', function(e){ . . . }
실제적인 활용을 위해 다음과 같은 두 가지의 경우를 생각해볼 수 있다.
1. 버튼의 개수 변경
2. 버튼의 이름 변경

이와 같은 경우 다음과 같이 처리할 수 있다.

이름을 $name, $name2 변수에 할당하여 $myBtn01 에 들어가는 태그에 $name을 넣는 처리(swiperight function() 내부에 작성)

var $li = $(this);

var $name = $li.data('btnname');
var $name2 = $li.data('btnname2');

if($name == undefined) {
$name = 'Button1';
}
if($name2 == undefined) {
$name2 = 'Button2';
}

... 중략 ...

var $myBtn01 = $('<a>'+$name+'</a>')
.attr({
'class': 'aSwipeBtn ui-btn-up-b',
'href': $li.data('swipeurl')
});
var $myBtn02 = $('<a>'+$name2+'</a>')
.attr({
'class': 'aSwipeBtn ui-btn-up-e',
'href': $li.data('swipeurl2')
});

$li.data('btnname'), $li.data('btnname2') 이와 같이 처리하였다면 HTML 코드에서 li tag 내에 data-* 를 통해 추가적인 사용자 데이터(버튼명)를 보낸다.
예>
<li data-swipeurl="mode-page1.do" data-swipeurl2="mode-page2.do" data-swipefg="menu" data-btnname="custom1" data-btnname2="custom2">

버튼의 개수 변경은 var $myBtn[번호] 를 더 선언하여 하단의
$divSwipe.prepend($myBtn01,$myBtn02,$myBtn[번호]).show(100); 와 같이 추가적으로 처리할 수 있을 것이다.

Change Mode List - Swipe Menu, Swipe Delete

추가 설명 Change Mode List - Swipe Menu에서 버튼 관련 수정 방법 예시

Copyright(c)2012 Ministry of Government Administration and Home Affairs.