Comentario: HTML 5 también se conoce como aplicaciones web 1.0. Para lograr este objetivo, se agregan varios elementos nuevos para proporcionar experiencias interactivas para las páginas web: Detalles Comando del menú DataGrid Estos elementos pueden basarse en el usuario.
HTML 5 también se conoce como aplicaciones web 1.0. Para lograr esto, se agregan varios elementos nuevos para proporcionar experiencias interactivas para páginas web:
detalles
datagrí
menú
Dominio
Todos estos elementos pueden cambiar el contenido mostrado en función de las acciones y selecciones del usuario sin cargar una nueva página desde el servidor.
detalles
El elemento de detalles representa detalles que no pueden mostrarse de forma predeterminada. El elemento de leyenda opcional puede proporcionar un resumen de los detalles.
Uno de los usos del elemento de detalles es proporcionar notas al pie y notas finales. Por ejemplo:
El proyecto de ley de un murrelet de Craveri es aproximadamente un 10% más delgado
que el proyecto de ley de un murrelet de xantus.
<talls>
<Legend> [Sibley, 2000] </legend>
<p> Sibley, David Allen, La guía de Sibley para las aves,
(Nueva York: Chanticleer Press, 2000) p. 247
</p>
</ettall>
No se especifica ningún método de visualización específico. El navegador puede elegir notas al pie, notas finales y información sobre herramientas.
Cada elemento de detalles puede tener una propiedad abierta. Si esta propiedad está configurada, los detalles se muestran inicialmente. Si esta propiedad no está establecida, están ocultas hasta que el usuario les pide que se muestren. En cualquier caso, los usuarios pueden mostrar u ocultar detalles haciendo clic en un icono u otro control.
datagrí
El elemento DataGrid proporciona un control de cuadrícula. Se puede usar para mostrar árboles, listas y tablas, y los usuarios y scripts pueden actualizar estos elementos de interfaz. En contraste, las tablas tradicionales se utilizan principalmente para mostrar datos estáticos.
DataGrid obtiene los datos iniciales de su contenido (una tabla, selección u otro elemento HTML). Por ejemplo, el DataGrid en el Código 9 contiene una hoja de puntaje. En este ejemplo, los datos de DataGrid provienen de una tabla. DataGrid 1D más simple puede obtener datos del elemento Seleccionar. Si usa otros elementos HTML, cada elemento infantil se convierte en una fila en la cuadrícula.
<TaGrid>
<Table>
<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>
</table>
</dataGrid>
La diferencia entre este elemento y una tabla regular es que los usuarios pueden seleccionar filas, columnas y celdas; colapsar filas, columnas y celdas; editar celdas; eliminar filas, columnas y celdas; ordenar cuadrículas; y realizar otras operaciones de datos directamente en el navegador del cliente. Puede usar el código JavaScript para monitorear las actualizaciones. La interfaz HTMLDataGridelement se agrega al modelo de objeto de documento (DOM) para admitir este elemento (código 10 htmlDataGridelement).
interfaz htmldataGridelement: htmlelement {
atributo datos dataGridDataProvider;
Readonly atribute la selección de DataGridSelection;
atributo boolean múltiplo;
atributo boolean discapacitado;
Void Updateeverything ();
Void updaterowschanged (en la fila de especificación de la fila, en un recuento largo sin firmar);
Void UpdateroWsinserted (en la fila de especificación de la fila, en un recuento largo sin firmar);
void updateroSremoved (en la fila de especificación de la fila, en un recuento largo sin firmar);
Void updateroWchanged (en fila de la fila de filas);
void updateColumnChanged (en columna larga sin firmar);
Void UpdateCellChanged (en la fila de especificación de la fila, en una columna larga sin firmar);
};
También puede usar DOM para cargar datos dinámicamente en la cuadrícula. Es decir, DataGrid puede no contener niños que proporcionan los datos iniciales. Se puede configurar con un objeto DataGridDataprovider (código 11 DataGridDataprovider). Esto permite que los datos se carguen de cualquier recurso al que pueda acceder por la base de datos, el código XMLHTTPRequest o JavaScript.
interfaz dataGriddataprovider {
void inicialize (en htmldataGridelement dataGrid);
Unsigned Long GetrowCount (en la fila de especificación de la fila);
Unsigned Long getChildatPosition (en la especificación de la fila ParentRow,
en posición larga sin firmar);
sin firmar Long GetColumnCount ();
Domstring getCaptionText (en columna larga sin firmar);
Void getCaptionClasses (en columna larga sin firmar, en clases de DomtokenList);
Domstring getRowiMage (en fila de la fila de fila);
Htmlmenuelement getrowmenu (en la fila de especificación de las filas);
Void GetrowClasses (en la fila de especificación de la fila, en las clases de DomtokenList);
Domstring getCellData (en la fila de especificación de la fila, en columna larga sin firmar);
Void GetCellClasses (en la fila de especificación de la fila, en columna larga sin firmar,
en las clases de DomtokenList);
void togglecolumnsortState (en columna larga sin firmar);
void setCellCheckedState (en la fila de especificación de la fila, en columna larga sin firmar,
en estado largo);
ciclecell void (en la fila de especificación de la fila, en columna larga sin firmar);
void editCell (en la fila de especificación de la fila, en columna larga sin firmar, en datos de domstring);
};
Menú y comando
El elemento de menú en realidad aparece en HTML 2. Fue abandonado en HTML 4, pero HTML 5 lo restauró y especificó un nuevo significado. En HTML 5, el menú contiene el elemento de comando, cada elemento de comando lanza una operación. Por ejemplo, el menú Código 12 HTML 5 es un menú con una ventana emergente de cuadro de advertencia.
<Menú>
<Command OnClick = Alert ('Primer comando') etiqueta = do 1st command/>
<Command OnClick = Alert ('segundo comando') etiqueta = do 2nd command/>
<Command OnClick = Alert ('Tercer comando') etiqueta = do 3rd command/>
</menú>
También puede usar la propiedad marcada = comprobada para convertir el comando en una casilla de verificación. Al especificar la propiedad Radiogrupo, puede convertir una casilla de verificación a un botón de radio, y el valor de esta propiedad es el nombre de grupo del botón mutuamente excluyente.
Además de una lista de comandos simple, también puede crear una barra de herramientas o un menú contextual emergente utilizando el elemento de menú, que requiere configurar la propiedad de tipo en la barra de herramientas o la ventana emergente. Por ejemplo, código 13. HTML 5 Barra de herramientas muestra una barra de herramientas similar a los editores de blogs como WordPress. Utiliza la propiedad de icono para vincular la imagen del botón.
<Tipo de menú = barra de herramientas>
<Command OnClick = InsertTag (Botones, 0); Label = Strong Icon = Bold.gif/>
<Command OnClick = InsertTag (Botones, 1); etiqueta = em icon = cursual.gif/>
<Command OnClick = InsertLink (botones, 2); etiqueta = link icon = link.gif/>
<Command OnClick = InsertTag (Botones, 3); etiqueta = b-quote icon = blockQuote.gif/>
<Command OnClick = InsertTag (Botones, 4); etiqueta = del icon = del.gif/>
<Command OnClick = InsertTag (Botones, 5); etiqueta = ins icon = insert.gif/>
<Command OnClick = InsertMage (botones); etiqueta = img icon = image.gif/>
<Command OnClick = InsertTag (Botones, 7); etiqueta = ul icon = bullet.gif/>
<Command OnClick = InsertTag (Botones, 8); etiqueta = ol icon = number.gif/>
<Command OnClick = InsertTag (Botones, 9); etiqueta = li icon = item.gif/>
<Command OnClick = InsertTag (Botones, 10); etiqueta = código icon = code.gif/>
<Command OnClick = InsertTag (Botones, 11); etiqueta = cite icon = cite.gif/>
<Command OnClick = InsertTag (Botones, 12); etiqueta = abbr icon = abbr.gif/>
<Command OnClick = InsertTag (Botones, 13); etiqueta = acrónimo icon = acronym.gif/>
</menú>
La propiedad de la etiqueta proporciona el título del menú. Por ejemplo, código 14. HTML 5 El menú Editar muestra un menú Editar.
<menú tipo = popup etiqueta = editar>
<Command OnClick = Undo () Label = UNDO/>
<command onClick = redo () etiqueta = redo/>
<Command OnClick = Cut () etiqueta = CUT/>
<command onClick = copy () etiqueta = copy/>
<Command OnClick = Paste () etiqueta = paste/>
<Command OnClick = Delete () etiqueta = Clear/>
</menú>
El menú se puede anidar en otros menús para formar una estructura de menú jerárquica.