의견 : HTML 5는 웹 응용 프로그램 1.0이라고도합니다. 이 목표를 달성하기 위해 웹 페이지에 대화식 경험을 제공하기 위해 몇 가지 새로운 요소가 추가됩니다. 세부 사항 Datagrid 메뉴 명령이 요소는 사용자의 것을 기반으로 할 수 있습니다.
HTML 5는 웹 응용 프로그램 1.0이라고도합니다. 이를 달성하기 위해 웹 페이지에 대화식 경험을 제공하기 위해 몇 가지 새로운 요소가 추가됩니다.
세부
Datagrid
메뉴
명령
이러한 요소는 서버에서 새 페이지를로드하지 않고 사용자 작업 및 선택에 따라 표시된 컨텐츠를 모두 변경할 수 있습니다.
세부
세부 사항 요소는 기본적으로 표시되지 않을 수있는 세부 사항을 나타냅니다. 선택적 범례 요소는 세부 사항을 요약 할 수 있습니다.
세부 사항 요소의 사용 중 하나는 각주와 엔드 노트를 제공하는 것입니다. 예를 들어:
Craveri 's murrelet의 청구서는 약 10% 더 얇습니다.
Xantus 's murrelet의 청구서보다.
<세부 사항>
<Legend> [Sibley, 2000] </Legend>
<p> Sibley, David Allen, 새들에 대한 Sibley 가이드,
(뉴욕 : Chanticleer Press, 2000) p. 247
</p>
</세부 사항>
특정 디스플레이 방법이 지정되지 않습니다. 브라우저는 각주, 엔드 노트 및 툴팁을 선택할 수 있습니다.
각 세부 사항 요소에는 열린 속성이있을 수 있습니다. 이 속성이 설정되면 자세한 내용은 처음에 표시됩니다. 이 속성이 설정되지 않은 경우 사용자가 표시하도록 요청할 때까지 숨겨져 있습니다. 두 경우 모두 사용자는 아이콘이나 다른 컨트롤을 클릭하여 세부 사항을 표시하거나 숨길 수 있습니다.
Datagrid
DataGrid 요소는 그리드 컨트롤을 제공합니다. 트리, 목록 및 테이블을 표시하는 데 사용될 수 있으며 사용자와 스크립트는 이러한 인터페이스 요소를 업데이트 할 수 있습니다. 대조적으로, 기존 테이블은 주로 정적 데이터를 표시하는 데 사용됩니다.
Datagrid는 컨텐츠 (테이블, 선택 또는 기타 HTML 요소)에서 초기 데이터를 가져옵니다. 예를 들어, 코드 9의 Datagrid에는 점수 시트가 포함되어 있습니다. 이 예에서 Datagrid의 데이터는 테이블에서 나옵니다. 더 간단한 1D DataGrid는 선택 요소에서 데이터를 얻을 수 있습니다. 다른 HTML 요소를 사용하는 경우 각 하위 요소는 그리드의 행이됩니다.
<datagrid>
<테이블>
<tr> <td> Jones </td> <td> Allison </td> <td> a-</td> <td> b </td> <td> a </td> </tr>
<tr> <td> smith </td> <td> Johnny </td> <td> a </td> <td> c </td> <td> a </td> </tr>
<tr> <td> willis </td> <td> 시드니 </td> <td> c-</td> <td> d </td> <td> f </td> </tr>
<tr> <td> 윌슨 </td> <td> Frank </td> <td> b-</td> <td> b </td> <td> b </td> <td> a </td> </tr>
</테이블>
</datagrid>
이 요소와 일반 테이블의 차이점은 사용자가 행, 열 및 셀을 선택할 수 있다는 것입니다. 행, 기둥 및 셀을 붕괴시킵니다. 세포 편집; 행, 열 및 셀을 삭제합니다. 정렬 그리드; 클라이언트 브라우저에서 직접 다른 데이터 작업을 수행하십시오. JavaScript 코드를 사용하여 업데이트를 모니터링 할 수 있습니다. HtmlDatagridElement 인터페이스는이 요소 (코드 10 htmlDatagridElement)를 지원하기 위해 DOC (Document Object Model)에 추가됩니다.
인터페이스 htmldatagridelement : htmlelement {
속성 DatagridDataprovider 데이터;
readonly 속성 DataGridSelection 선택;
속성 부울 배수;
속성 부울 장애;
void updateeverything ();
void updateRowsChanged (서명되지 않은 긴 카운트의 rowspecification 행에서);
void updaterOwsInserted (서명되지 않은 긴 카운트의 로우 스피화 행에서);
void updateRowsRemoved (서명되지 않은 긴 카운트의 rowspecification 행에서);
void updateRowChanged (rowspecification 행에서);
void updateColumnChanged (서명되지 않은 긴 열에서);
void updateCellChanged (서명되지 않은 긴 열에서 로우 스피화 행에서);
};
DOM을 사용하여 그리드에 데이터를 동적으로로드 할 수도 있습니다. 즉, Datagrid에는 초기 데이터를 제공하는 어린이가 포함되어 있지 않을 수 있습니다. DataGridDataprovider 객체 (코드 11 DataGridDataprovider)로 설정할 수 있습니다. 이를 통해 데이터베이스, XMLHTTPREQUEST 또는 JavaScript 코드에서 액세스 할 수있는 모든 리소스에서 데이터를로드 할 수 있습니다.
인터페이스 DataGridDataprovider {
무효 초기화 (htmldatagridelement datagrid);
서명되지 않은 긴 getrowcount (로우 스피화 행에서);
서명되지 않은 Long GetChildatPosition (Rowspecification Parentrow,
서명되지 않은 긴 위치에서);
서명되지 않은 긴 GetColumnCount ();
domstring getCaptionText (서명되지 않은 긴 열에서);
void getCaptionClasses (서명되지 않은 긴 칼럼, domtokenlist 클래스);
Domstring getRowimage (로우 스피 화로);
htmlmenuelement getrowmenu (rowspecification 줄에서);
void getrowclasses (rowspecification 행, domtokenlist 클래스);
domstring getCellData (서명되지 않은 긴 열에서 로우 스피화 행에서);
void getCellClasses (서명되지 않은 긴 열에서 RowsPecification 행에서,
domtokenlist 클래스에서);
void togglecolumnsortstate (서명되지 않은 긴 열에서);
void setcellCheckedState (서명되지 않은 긴 열에서 로우 스피 화 로우,
긴 상태);
void cyclecell (서명되지 않은 긴 열에서 로우 스피 화로);
void editcell (rowspecification 줄, 서명되지 않은 긴 열에서 Domstring 데이터);
};
메뉴와 명령
메뉴 요소는 실제로 HTML 2에 나타납니다. HTML 4에서 포기되었지만 HTML 5는이를 복원하고 새로운 의미를 지정했습니다. HTML 5에는 메뉴에 명령 요소가 포함되어 있으며 각 명령 요소는 작업을 던집니다. 예를 들어, 코드 12 HTML 5 메뉴는 경고 상자 팝업이있는 메뉴입니다.
<메뉴>
<command onclick = alert ( 'first command') label = do 1st command/>
<command onclick = alert ( 'second command') label = do 2nd command/>
<command onclick = alert ( 'Third Command') label = do 3rd 명령/>
</메뉴>
확인 된 = 확인 된 속성을 사용하여 명령을 확인란으로 변환 할 수도 있습니다. Radiogroup 속성을 지정하면 확인란을 라디오 버튼으로 변환 할 수 있으며이 속성의 값은 상호 배타적 버튼의 그룹 이름입니다.
간단한 명령 목록 외에도 메뉴 요소를 사용하여 도구 모음 또는 팝업 컨텍스트 메뉴를 만들 수도 있습니다. 메뉴 요소를 도구 모음 또는 팝업으로 설정해야합니다. 예를 들어, 코드 13. HTML 5 도구 모음은 WordPress와 같은 블로그 편집기와 유사한 도구 모음을 표시합니다. 아이콘 속성을 사용하여 버튼 이미지에 링크합니다.
<메뉴 유형 = 도구 모음>
<command onclick = insertTag (버튼, 0); 레이블 = 강한 아이콘 = bold.gif/>
<command onclick = insertTag (버튼, 1); label = em icon = italic.gif/>
<command onclick = insertLink (버튼, 2); label = link icon = link.gif/>
<command onclick = insertTag (버튼, 3); 레이블 = B- 쿼트 아이콘 = blockquote.gif/>
<명령 onclick = insertTag (버튼, 4); label = del icon = del.gif/>
<command onclick = insertTag (버튼, 5); LABEL = INS ICON = insert.gif/>
<command onclick = insertImage (버튼); label = img icon = image.gif/>
<command onclick = insertTag (버튼, 7); label = ul icon = bullet.gif/>
<command onclick = insertTag (버튼, 8); 레이블 = ol icon = number.gif/>
<command onclick = insertTag (버튼, 9); label = li icon = item.gif/>
<command onclick = insertTag (버튼, 10); 레이블 = 코드 아이콘 = code.gif/>
<command onclick = insertTag (버튼, 11); LABEL = CITE ICON = CITE.GIF/>
<command onclick = insertTag (버튼, 12); label = abbr icon = abbr.gif/>
<command onclick = insertTag (버튼, 13); 레이블 = 약어 아이콘 = Acronym.gif/>
</메뉴>
레이블 속성은 메뉴의 제목을 제공합니다. 예를 들어, 코드 14. HTML 5 편집 메뉴에는 편집 메뉴가 표시됩니다.
<메뉴 유형 = 팝업 레이블 = 편집>
<command onclick = undo () label = undo/>
<command onclick = redo () label = redo/>
<command onclick = cut () label = cut/>
<command onclick = copy () label = copy/>
<command onclick = paste () label = paste/>
<command onclick = delete () label = clear/>
</메뉴>
메뉴는 다른 메뉴에 중첩되어 계층 적 메뉴 구조를 형성 할 수 있습니다.