[6.7]고급위젯2 + 나만의 위젯만들기

=============

코르도바2.zip

 

==============

 

4.7그리드

 

 

 

4.8 테이블
: 테이블 위젯을 활용하여 목록형 데이터를 보여주는 형태 살펴보기, <table>태그를 그대로 사용하지만 확장된 기능을 지원함.(data-role="table")설정
-좌우의 열, 상하의 행을 합치기 위해 colspan, rowspan을 이용하여 출력할 수 있음.
-컬럼에 대한 보여주기 토글 기능 제공 = 토글 기능을 이용하여 해당 컬럼을 보여주거나 숨길 수 있음.(1일 경우 토글 메뉴에 나타나며 그렇지 않을 경우 나타나지 않는다)
-테이블에 이미지나 필요한 형식을 추가하여 원하는 스타일로 만들 수 있다.

====================================================

 

 

 

===========================================================

 

 

[5. 고급위젯]

5.1 툴바
: 툴바는 헤더와 풋터에 사용될 수 있는 메뉴 버튼과 유사 -> 헤더에 변화를 주어 타이틀과 버튼을 변화시키기
- 헤더에 data-fullscreen="true"로 설정할 경우 컨텐트의 내용이 화면 상단까지 올라가게 됨.
- 헤더와 푸터에 버튼을 추가할 수 있음. = 헤더에 버튼을 두기 위해서는 <a>태그와 <button>태그를 이용할 수 있음.
  주의 : <input type="button">은 새롱누 행으로 출력되어 화면이 깨져 보인다.
 푸터의 경우 버튼을 추가해도 정상적으로 같은 영역에 보이지 않기 때문에, style 속성을 이용하여 추가해야 함.
- 버튼은 양쪽으로 나누기, 한쪽으로 나누기 가능.
- 이미지 버튼만 추가 가능

=========================================================

 

 

 

======================================================

5.2 네비게이션바
: 툴바에 버튼을 추가하여 사용하는 방법도 있지만 많은 메뉴를 포함할 경우, 별도의 네비게이션바를 이용하여 표현할 수 있다.
  네비게이션 바는 화면의 흐름을 제어하기 위해 사용하는 메뉴의 묶음.
  네비게이션 바는 다른 위젯을 포함하면서 자체적인 위젯형태를 갖는다.

 

============================================================

 

 

============================   ========================

 

5.3 팝업
: 팝업은 기존 화면 위에 새로운 창을 보여주기.
- 팝업 위젯에 대해 알아보기. <div>사용
 -팝업 위치를 화면의 중앙에 위치시키기 : data-position-to="window"로 설정
 -발생 위치를 특정 위치에 놓기 : 이 경우에는 위치가 되는 id를 data-position-to에 값으로 설정한다.
 -팝업 창의 닫기 버튼
  -투명한 배경을 파진 팝업 사용
 -팝업 창에 리스트를 넣어 메뉴와 같이 사용가능 : 메뉴를 선택하면 선택된 결과를 결과 항목에 보여줌
 -팝업 창을 사용자가 요구하는 화면으로 별도로 구성하여 처리 가능

 

===============================================

 

 

=======================================

 

5.4 접이식 컨텐트
: 접이식 컨텐트는 부족한 화면을 보충하기 위한 좋은 수단이 됨.
  해당 위치를 고수하면서 추가적인 정보를 보여줄 수 있음.
 -> Collapsible 위젯 : 화면에 버튼을 두고 터치 시 하단으로 화면이 나타남

 - data-inset="false"로 설정할 경우 화면의 가로 폭에 맞추어 표시된다.
 - 테마를 주지 않음으로써 투명한 배경을 얻을 수 있음.
 - 다른 아이콘을 등록
 - 아이콘의 위치를 변경
 - 리스트를 추가함으로써 풀다운 메뉴를 구성
 - 복합적인 화면의 구성을 추가

=====================================================

 

================================================

 

5.5 패널
: 페이지가 차지하고 있는 화면과는 달리 별도의 화면을 제공해줌. 기존 페이지에 영향을 주지 않고 새로운 창을 보여줌으로써 새로운 효과를 볼 수 있음.
 - 패널은 좌,우에서 나타날 수 있으며 기본의 화면을 덮거나, 기존의 화면의 밑에서 나오거나 기존화면을 밀면서 나올 수 있음.
   이 두가지 속성이 data-position과 data-display임.

 

=========================================

 

=========================================

5.6 로더
: 로더는 어떠한 동작을 하는 동안 스크린의 터치를 방지하는 역할을 함. = 사용자가 애플리케이션이 문제가 없이 진행하고 있다는 것을 의미하기도 함.
 - 일반적인 사용 : show 메소드만 이용
 - 버튼을 터치했을 경우 발생할 이벤트 추가

==================================================

 

=================================================

5.7 동적 위젯 만들기
 - 버튼을 실시간으로 만ㄷ르어 화면에 등록 시켜 보기

 

=================================================

 

================================================