Комментарий: HTML 5 также известен как веб -приложения 1.0. Для достижения этой цели добавляются несколько новых элементов для предоставления интерактивного опыта для веб -страниц: Подробная информация о команде меню DataGrid Эти элементы могут быть основаны на пользователе
HTML 5 также известен как веб -приложения 1.0. Чтобы достичь этого, добавляются несколько новых элементов для предоставления интерактивного опыта для веб -страниц:
подробности
DataGrid
меню
Командование
Все эти элементы могут изменить отображаемый контент на основе действий пользователя и выборов без загрузки новой страницы с сервера.
подробности
Элемент деталей представляет детали, которые не могут отображаться по умолчанию. Дополнительный элемент легенды может предоставить краткую информацию о деталях.
Одним из использования элемента деталей является предоставление сноски и конечности. Например:
Билл за мурлет Крейвери примерно на 10% тоньше
чем Билл мурлет Ксантуса.
<подробности>
<Legend> [Sibley, 2000] </Legend>
<p> sibley, Дэвид Аллен, Гид Sibley to Birds,
(Нью -Йорк: Chanticleer Press, 2000) с. 247
</p>
</details>
Не указан конкретного метода отображения. Браузер может выбрать сноски, эндоты и подсказки.
Каждый элемент детали может иметь открытое свойство. Если это свойство установлено, детали отображаются изначально. Если это свойство не установлено, они скрыты, пока пользователь не просит их отображать. В любом случае пользователи могут отображать или скрывать данные, нажав на значок или другое управление.
DataGrid
Элемент DataGrid обеспечивает управление сеткой. Его можно использовать для отображения деревьев, списков и таблиц, а также пользователи и сценарии могут обновить эти элементы интерфейса. Напротив, традиционные таблицы в основном используются для отображения статических данных.
DataGrid получает начальные данные из своего содержимого (таблица, выбранные или другие HTML -элемент). Например, DataGrid в коде 9 содержит лист счетов. В этом примере данные DataGrid поступают из таблицы. Более простой 1D DataGrid может получить данные из элемента SELECT. Если вы используете другие элементы 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> 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>
Разница между этим элементом и обычной таблицей заключается в том, что пользователи могут выбирать строки, столбцы и ячейки; коллапс ряды, столбцы и ячейки; редактировать клетки; Удалить ряды, столбцы и ячейки; сортировать сетки; и выполнить другие операции данных непосредственно в клиентском браузере. Вы можете использовать код JavaScript для мониторинга обновлений. Интерфейс HTMldatAgridelement добавляется в модель объекта документа (DOM) для поддержки этого элемента (код 10 HTMldatagridelement).
Интерфейс htmldatagridelement: htmlelement {
Атрибут DataGridDataproViDer Data;
Readonly Attruit DataGrid Selection;
атрибут логического множественного;
атрибут логического отключения;
void UpdateEveryThing ();
void updaterowschanged (в строке строки, в беззнанном длинном подсчете);
void UpdateAtrowsInserted (в строке RowSpeciation, в беззнанном длинном подсчете);
void UpdaterOwsRemoved (в строке RowSpeciation, в беззнанном длинном подсчете);
void updateRowchanged (в строке строки);
void UpdateColumnChanged (в длинном столбце без знака);
void UpdateCellChanged (в строке строки, в длинном столбце без знака);
};
Вы также можете использовать DOM для динамической загрузки данных в сетке. То есть DataGrid может не содержать детей, которые предоставляют начальные данные. Его можно установить с помощью объекта DataGridDatapRovider (Code 11 DataGridDatapRovider). Это позволяет загружать данные из любого ресурса, к которому можно получить доступ с помощью базы данных, XMLHTTPRequest или кода JavaScript.
интерфейс datagriddataprovider {
void инициализируется (в DataGrid htmldatagridelement);
Unsigned Long getRowCount (в строке RowsPeciation);
Unsigned Long GetChildAtposition (в RowSpeciation Parentrow,
в безписанном длинном положении);
unsigned long getColumnCount ();
Domstring getCaptionText (в длинном столбце без знака);
void getCaptionClasses (в длинном столбце без знака, в классах DomTokenList);
Domstring GetRowImage (в строке строки);
Htmlmenuement getrowmenu (в строке строки);
void getRowcasses (в строке RowSpeciation, в классах DomTokenList);
Domstring getcelldata (в строке строки, в длинном столбце без знака);
void getCellCasses (в строке RowSpeciation, в длинном столбце без знака,
в классах domtokenlist);
void togglecolumnSortState (в длинном столбце без знака);
void setCellCheckedState (в строке строки, в длинном столбце без знака,
в длинном состоянии);
void cyclecell (в строке строки, в длинном столбце без знака);
void EditCell (в строке строки, в длинном столбце без знака, в данных DOMString);
};
меню и командование
Элемент меню фактически появляется в HTML 2. Он был заброшен в HTML 4, но HTML 5 восстановил его и указал новое значение. В HTML 5 меню содержит элемент команды, каждый элемент команды бросает операцию. Например, меню Code 12 HTML 5 представляет собой меню с всплывающей окном для предупреждения.
<меню>
<command Onclick = alert ('первая команда') label = do 1st Command/>
<command Onclick = alert ('вторая команда') label = do 2nd Command/>
<command Onclick = alert ('третья команда') label = do 3 -я команда/>>
</menu>
Вы также можете использовать свойство FECTED = FECTED для преобразования команды в флажок. Указав свойство радиогруппы, вы можете преобразовать флажок в радионогую, и значение этого свойства - это имя группы взаимоисключающей кнопки.
В дополнение к простому списку команд, вы также можете создать панель инструментов или всплывающее контекстное меню, используя элемент меню, который требует установки свойства типа на панель инструментов или всплывающее окно. Например, код 13. HTML 5 Панель инструментов отображает панель инструментов, похожая на редакторы блога, такие как WordPress. Он использует свойство значка, чтобы ссылаться на изображение кнопки.
<меню тип = панель инструментов>
<команда onclick = inserttag (кнопки, 0); label = strong icon = bold.gif/>
<command Onclick = inserttag (кнопки, 1); label = em icon = italic.gif/>
<command Onclick = insertLink (кнопки, 2); label = incon = link.gif/>
<команда onclick = inserttag (кнопки, 3); label = b-quote icon = blockquote.gif/>
<команда onclick = inserttag (кнопки, 4); label = del Icon = del.gif/>
<команда onclick = inserttag (кнопки, 5); label = ins icon = insert.gif/>
<команда onclick = insertimage (кнопки); label = img icon = image.gif/>
<команда onclick = inserttag (кнопки, 7); label = ul icon = bullet.gif/>
<команда onclick = inserttag (кнопки, 8); label = ol icon = number.gif/>
<команда onclick = inserttag (кнопки, 9); label = li icon = item.gif/>
<command Onclick = inserttag (кнопки, 10); label = icon кода = code.gif/>
<команда onclick = inserttag (кнопки, 11); label = cite icon = cite.gif/>
<command Onclick = inserttag (кнопки, 12); label = abbr Icon = abbr.gif/>
<command Onclick = inserttag (кнопки, 13); label = Quaronm Icon = Abreinom.gif/>
</menu>
Свойство метки предоставляет заголовок меню. Например, код 14. HTML 5 Меню «Редактировать» отображает меню «Редактировать».
<меню тип = Popup label = edit>
<Команда Onclick = undo () label = undo/>
<command Onclick = Redo () label = Redo/>
<Команда OnClick = cut () label = cut/>
<command Onclick = copy () label = copy/>
<Команда onclick = paste () label = paste/>
<command Onclick = delete () label = clear/>
</menu>
Меню может быть вложено в другие меню, чтобы сформировать иерархическую структуру меню.