Comentário: O HTML 5 também é conhecido como Aplicativos da Web 1.0. Para atingir esse objetivo, vários novos elementos são adicionados para fornecer experiências interativas para as páginas da web: Detalhes do comando Datagrid Menu Esses elementos podem ser baseados no usuário
O HTML 5 também é conhecido como aplicativos da Web 1.0. Para conseguir isso, vários novos elementos são adicionados para fornecer experiências interativas para páginas da web:
detalhes
datagrid
menu
Comando
Todos esses elementos podem alterar o conteúdo exibido com base em ações e seleções do usuário sem carregar uma nova página do servidor.
detalhes
O elemento de detalhes representa detalhes que não podem ser exibidos por padrão. O elemento da legenda opcional pode fornecer um resumo dos detalhes.
Um dos usos do elemento de detalhes é fornecer notas de rodapé e notas finais. Por exemplo:
A conta do murrelet de um craveri é cerca de 10% mais fina
do que a conta do murrelet de um Xantus.
<tahtands>
<legend> [Sibley, 2000] </legend>
<p> Sibley, David Allen, o guia Sibley para os pássaros,
(Nova York: Chanticleer Press, 2000) p. 247
</p>
</tafits>
Nenhum método de exibição específico é especificado. O navegador pode escolher notas de rodapé, notas finais e dicas de ferramentas.
Cada elemento de detalhes pode ter uma propriedade aberta. Se esta propriedade estiver definida, os detalhes serão exibidos inicialmente. Se essa propriedade não estiver definida, eles ficarão ocultos até que o usuário peça que eles sejam exibidos. Em ambos os casos, os usuários podem exibir ou ocultar detalhes clicando em um ícone ou outro controle.
datagrid
O elemento DataGrid fornece um controle de grade. Ele pode ser usado para exibir árvores, listas e tabelas, e usuários e scripts podem atualizar esses elementos da interface. Por outro lado, as tabelas tradicionais são usadas principalmente para exibir dados estáticos.
O DataGrid obtém os dados iniciais de seu conteúdo (uma tabela, seleção ou outro elemento HTML). Por exemplo, o DataGrid no Código 9 contém uma folha de pontuação. Neste exemplo, os dados do Datagrid vêm de uma tabela. O Datagrid 1D mais simples pode obter dados do elemento Selecionar. Se você usar outros elementos HTML, cada elemento filho se tornará uma linha na grade.
<datagrid>
<tabela>
<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> sydney </td> <td> c-</td> <td> d </td> <td> f </td> </tr>
<tr> <td> wilson </td> <td> Frank </td> <td> b-</td> <td> b </td> <td> b </td> <td> a </td> </tr>
</tabela>
</datagrid>
A diferença entre esse elemento e uma tabela regular é que os usuários podem selecionar linhas, colunas e células; colapso linhas, colunas e células; editar células; excluir linhas, colunas e células; classificar grades; e execute outras operações de dados diretamente no navegador do cliente. Você pode usar o código JavaScript para monitorar as atualizações. A interface HTMLDATAGRIDELEMENT é adicionada ao modelo de objeto de documento (DOM) para suportar esse elemento (código 10 htmldatagridElement).
interface htmldatagridElement: htmlelement {
atributo datagriddataprovider dados;
atributo readonly seleção de datagridselection;
atributo múltiplo booleano;
atributo booleano desativado;
Void Updateeverththing ();
Void UpdateTerowsChanged (na linha de especificação de linhas, em contagem longa não assinada);
Void UpdateTerowsInsert (na linha de especificação de linhas, em contagem longa não assinada);
void updateaterowsRemoved (na linha de especificação de linhas, em contagem longa não assinada);
Void UpdateTerOwChanged (na linha de especificação de linhas);
void updateColumnChanged (em coluna longa não assinada);
void updateCellchanged (na linha de especificação de linhas, na coluna longa não assinada);
};
Você também pode usar o DOM para carregar dados dinamicamente na grade. Ou seja, o DataGrid pode não conter crianças que fornecem os dados iniciais. Ele pode ser definido com um objeto DataGridDataProvider (código 11 DataGridDataProvider). Isso permite que os dados sejam carregados a partir de qualquer recurso que possa ser acessado pelo banco de dados, xmlHttPrequest ou código JavaScript.
interface datagriddataprovider {
void Initialize (no htmldatagridElement datagrid);
não assinado Long GetRowCount (na linha de especificação de linhas);
não assinado Long GetChildatPosition (na PECECIFICAÇÃO DE LOWNE PARROW,
em posição longa não assinada);
não assinado long getColumnCount ();
Domstring getCaptionText (em coluna longa não assinada);
void getCaptionClasses (em coluna longa não assinada, nas classes domtokenlist);
Domstring getRowimage (na linha de especificação de linhas);
HtmlmenuElement getRowmenu (na linha de especificação de linhas);
void getRowClasses (na linha de especificação de linhas, nas classes domtokenlist);
Domstring getCellData (na linha de especificação de linhas, na coluna longa não assinada);
Void GetCellClasses (na linha de especificação de linhas, em coluna longa não assinada,
nas classes domtokenlist);
void toggleColumnSortState (em coluna longa não assinada);
void setCellCheckedState (na linha de especificação de linhas, em coluna longa não assinada,
em longa estado);
Void CycleCell (na linha de especificação de linhas, em coluna longa não assinada);
Void EditCell (na linha de especificação de linhas, na coluna longa não assinada, nos dados de Domstring);
};
menu e comando
O elemento de menu aparece na verdade no HTML 2. Foi abandonado no HTML 4, mas o HTML 5 o restaurou e especificou um novo significado. No HTML 5, o menu contém o elemento de comando, cada elemento de comando lança uma operação. Por exemplo, o menu Código 12 HTML 5 é um menu com um pop -up de caixa de aviso.
<pune>
<command onclick = alert ('primeiro comando') etiqueta = do 1º comando/>
<command onclick = alert ('Second command') etiqueta = do 2º comando/>
<comando onclick = alert ('terceiro comando') rótulo = do 3º comando/>
</menu>
Você também pode usar a propriedade verificada = verificada para converter o comando em uma caixa de seleção. Ao especificar a propriedade Radiogroup, você pode converter uma caixa de seleção em um botão de rádio e o valor dessa propriedade é o nome do grupo do botão mutuamente exclusivo.
Além de uma lista de comandos simples, você também pode criar uma barra de ferramentas ou menu de contexto pop-up usando o elemento de menu, que requer definir a propriedade Tipo na barra de ferramentas ou pop-up. Por exemplo, o código 13. HTML 5 Barra de ferramentas exibe uma barra de ferramentas semelhante aos editores do blog como o WordPress. Ele usa a propriedade Icon para vincular a imagem do botão.
<Tipo de menu = barra de ferramentas>
<comando onclick = insertTag (botões, 0); etiqueta = ícone forte = BOLD.GIF/>
<comando onclick = insertTag (botões, 1); etiqueta = em icon = itálico.gif/>
<comando onclick = insertLink (botões, 2); etiqueta = link icon = link.gif/>
<comando onclick = insertTag (botões, 3); etiqueta = icon b-cote = blockquote.gif/>
<comando onclick = insertTag (botões, 4); etiqueta = del icon = del.gif/>
<comando onclick = insertTag (botões, 5); etiqueta = inseado inserto = insert.gif/>
<comando onclick = insertImage (botões); Label = IMG ICON = Image.gif/>
<comando onclick = insertTag (botões, 7); etiqueta = ul icon = bullet.gif/>
<comando onclick = insertTag (botões, 8); etiqueta = icon ol = número.gif/>
<comando onclick = insertTag (botões, 9); etiqueta = li icon = item.gif/>
<comando onclick = insertTag (botões, 10); Label = Código Icon = Code.gif/>
<comando onclick = insertTag (botões, 11); etiqueta = icon cite = cite.gif/>
<comando onclick = insertTag (botões, 12); Rótulo = ABBR ICON = ABBR.GIF/>
<comando onclick = insertTag (botões, 13); Rótulo = ICON do acrônimo = acrônia.GIF/>
</menu>
A propriedade do rótulo fornece o título do menu. Por exemplo, o Código 14. HTML 5 Editar menu exibe um menu de edição.
<Menu Type = Pop -Up Label = Editar>
<command onclick = undo () etiqueta = undo/>
<command onclick = redo () rótulo = refazer/>
<command onclick = cut () rótulo = corte/>
<command onclick = copy () rótulo = copy/>
<command onclick = paste () etiqueta = paste/>
<comando onclick = delete () etiqueta = clear/>
</menu>
O menu pode ser aninhado em outros menus para formar uma estrutura hierárquica do menu.