HTML5의 구조와 의미(5): 상호작용_html5 튜토리얼 기술

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
　HTML 5는 웹 애플리케이션 1.0이라고도 알려져 있습니다. 이 목표를 달성하기 위해 웹 페이지에 대한 대화형 경험을 제공하는 몇 가지 새로운 요소가 추가되었습니다.
세부정보
DataGrid
메뉴
명령
이러한 요소는 서버에서 새 페이지를 로드하지 않고도 사용자의 작업 및 선택에 따라 표시되는 내용을 변경할 수 있습니다.
세부정보
세부정보 요소는 기본적으로 표시되지 않을 수 있는 자세한 정보를 나타냅니다. 선택적 범례 요소는 자세한 정보 요약을 제공할 수 있습니다.
세부정보 요소의 용도 중 하나는 각주와 미주를 제공하는 것입니다. 예를 들어:
Craveri's Murrelet의 부리는
Xantus's Murrelet의 부리보다 약 10% 더 얇습니다.

[Sibley, 2000]

Sibley, David Allen, The Sibley Guide to Birds,
(뉴욕: Chanticleer Press, 2000) p. 247

구체적인 표시 방법은 지정되지 않았습니다. 브라우저는 각주, 미주, 도구 설명 중에서 선택할 수 있습니다.
각 세부정보 요소에는 open 속성이 있을 수 있습니다. 이 속성을 설정하면 처음에 세부정보가 표시됩니다. 이 속성이 설정되지 않으면 사용자가 표시를 요청할 때까지 숨겨집니다. 두 경우 모두 사용자는 아이콘이나 기타 컨트롤을 클릭하여 세부 정보를 표시하거나 숨길 수 있습니다.
데이터그리드
DataGrid 요소는 그리드 컨트롤을 제공합니다. 이를 사용하여 트리, 목록 및 테이블을 표시할 수 있으며 사용자와 스크립트는 이러한 인터페이스 요소를 업데이트할 수 있습니다. 이와 대조적으로 기존 테이블은 주로 정적 데이터를 표시하는 데 사용됩니다.
DataGrid는 콘텐츠(테이블, 선택 항목 또는 기타 HTML 요소)에서 초기 데이터를 가져옵니다. 예를 들어 코드 9의 데이터 그리드에는 성적 테이블이 포함되어 있습니다. 이 예에서 DataGrid의 데이터는 테이블에서 가져옵니다. 더 간단한 1차원 데이터그리드는 선택한 요소에서 데이터를 얻을 수 있습니다. 다른 HTML 요소가 사용되는 경우 각 하위 요소는 그리드의 행이 됩니다.

Jones	Allison	A-	B	A
Smith	Johnny	A	C	A
Willis	Sydney	C-	D	F
Wilson	Frank	B-	B	A

존스 앨리슨 A- B A Smith Johnny A C A 윌리스 시드니 C- D td> F 윌슨 프랭크 B- B A

이 요소와 일반 테이블의 차이점은 사용자가 행, 열 및 셀을 축소하고, 행, 열 및 셀을 정렬하고, 기타 작업을 수행할 수 있다는 것입니다. 클라이언트 브라우저에서 직접 데이터 작업을 수행할 수 있습니다. 업데이트는 JavaScript 코드를 사용하여 모니터링할 수 있습니다. HTMLDataGridElement 인터페이스는 이 요소를 지원하기 위해 DOM(문서 개체 모델)에 추가되었습니다(코드 10 HTMLDataGridElement).
인터페이스 HTMLDataGridElement: HTMLElement {
속성 DataGridDataProvider 데이터;
읽기 전용 속성 DataGridSelection 선택;
속성 부울 다중;
속성 부울 비활성화;
void updateEverything();
void updateRowsChanged (RowSpecification 행, 부호 없는 긴 개수);
void updateRowsInserted(RowSpecification 행, 부호 없는 긴 개수);
void updateRowsRemoved(RowSpecification 행, 부호 없는 긴 개수);
void updateRowChanged(in RowSpecification 행);
void updateColumnChanged(부호 없는 긴 열);
void updateCellChanged(RowSpecification 행, 부호 없는 긴 열);
};
DOM을 사용하여 그리드에 데이터를 동적으로 로드할 수도 있습니다. 즉, 데이터 그리드에는 초기 데이터를 제공하는 하위 요소가 포함될 수 없습니다. DataGridDataProvider 객체를 사용하여 이를 설정할 수 있습니다(목록 11 | DataGridDataProvider). 이를 통해 데이터베이스, XmlHttpRequest 또는 JavaScript 코드가 액세스할 수 있는 모든 리소스에서 데이터를 로드할 수 있습니다.
인터페이스 DataGridDataProvider {
void 초기화(HTMLDataGridElement datagrid에서);
unsigned long getRowCount(RowSpecification 행에서);
unsigned long getChildAtPosition(RowSpecification parentRow에서
unsigned long 위치에서);
unsigned long getColumnCount();
DOMString getCaptionText(부호 없는 긴 열);
void getCaptionClasses(부호 없는 긴 열, DOMTokenList 클래스);
DOMString getRowImage(RowSpecification 행);
HTMLMenuElement getRowMenu(RowSpecification 행);
void getRowClasses(RowSpecification 행, DOMTokenList 클래스);
DOMString getCellData(RowSpecification 행, 부호 없는 긴 열);
void getCellClasses(RowSpecification 행, in 부호 없는 긴 열,
DOMTokenList 클래스);
voidggleColumnSortState(부호 없는 긴 열);
void setCellCheckedState(RowSpecification 행, 부호 없는 긴 열,
긴 상태);
void CycleCell(RowSpecification 행, 부호 없는 긴 열);
void editCell(RowSpecification 행, 부호 없는 긴 열, DOMString 데이터);
};
메뉴 및 명령
메뉴 요소는 실제로 HTML 2에 등장했습니다. HTML 4에서는 더 이상 사용되지 않지만 HTML 5에서는 이를 부활시키고 새로운 의미를 부여했습니다. HTML 5에서는 메뉴에 명령 요소가 포함되어 있으며 각 명령 요소는 작업을 트리거합니다. 예를 들어 코드 12 HTML 5 메뉴는 경고 상자를 팝업하는 메뉴입니다.





Checked="checked" 속성을 사용하여 명령을 체크박스로 변환할 수도 있습니다. 확인란은 상호 배타적인 버튼의 그룹 이름인 radiogroup 속성을 지정하여 라디오 버튼으로 변환할 수 있습니다.
간단한 명령 목록 외에도 메뉴 요소를 사용하여 도구 모음이나 팝업 상황에 맞는 메뉴를 만들 수도 있습니다. 이 경우 유형 속성을 도구 모음이나 팝업으로 설정해야 합니다. 예를 들어 코드 13. HTML 5 도구 모음은 WordPress와 같은 블로그 편집기와 유사한 도구 모음을 표시합니다. icon 속성을 사용하여 버튼 이미지에 연결됩니다.
















label 속성은 메뉴의 제목을 제공합니다. 예를 들어, 코드 14. HTML 5 편집 메뉴는 편집 메뉴를 표시합니다.








메뉴는 다른 메뉴에 중첩되어 계층적 메뉴 구조를 형성할 수 있습니다.