List
전자정부 모바일 표준프레임워크를 통해 생성된 리스트는 모바일 환경에 최적화된 형태로 제공된다. 리스트의 너비는 화면의 너비에 자동으로 맞춰지며 리스트 아이템 오른쪽에 arrow-r 아이콘이 적용된다. 리스트는 데이터의 정렬, 내비게이션(링크), 결과 목록, 데이터 입력폼 등 폭 넓은 기능을 수행하므로 전자정부 모바일 표준프레임워크에서는 다양한 종류의 리스트를 지원하고 있다.
기본코드
리스트 Tag(ol, ul)에 data-role=”listview” 속성을 추가하면 전자정부 모바일 표준프레임워크에서 제공하는 리스트를 생성할 수 있다. 페이지 내용의 레이아웃에 맞춰 리스트를 삽입하려면 data-inset=”true” 속성을 리스트 Tag에 추가한다. data-inset 속성을 true 로 지정하면 리스트에 여백과 둥근 모서리가 적용된다.
- List Item 1
- List Item 2
- List Item 3
- <ul data-role="listview" data-inset="true">
- <li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 3</li>
- </ul>
리스트 링크
<li>Tag에 Anchor 링크를 추가하면 내비게이션 기능을 수행하는 리스트 링크를 생성할 수 있다.
- <ul data-role="listview" data-inset="true">
- <li><a href="/mguide2.7/guide/guide.do">Link to Home</a></li>
- <li><a href="http://www.egovframe.go.kr">Link to egovFrame</a></li>
- </ul>
확장된 기능의 리스트
리스트 업데이트
refresh() 메소드를 이용하여 리스트의 스타일 및 내용을 동적으로 업데이트할 수 있다.