§ 2.5. Связывание с другими html-элементами
При связывании элемента SPAN с полем XML, элемент просто отображает содержимое поля. Это происходит потому, что свойство innerText элемента SPAN, которое определяет текст, отображаемый элементом, – сцеплено с полем XML.
Примечание. В DHTML, поддерживаемом Internet Explorer, каждый HTML-элемент обладает набором свойств, которые можно использовать для установки или извлечения различных характеристик элемента с помощью кода сценария. Кроме того, как пояснено в этом разделе, для свойства автоматически устанавливается значение поля XML, с которым оно сцеплено.
Однако, как видно из Таблицы 3, для некоторых сцепляемых HTML-элементов с полем XML сцепляются и другие свойства.
Примечание. При связывании с элементом SPAN реально сцепляются его свойства innerText и innerHTML. Свойство innerText устанавливает или получает текстовое содержимое элемента, не включая в него HTML-разметку. Свойство innerHTML устанавливает или получает полное содержимое элемента, включая любую HTML-разметку.
Например, для следующего сцепленного элемента A (элемент "анкер", используемый для создания гиперссылок) свойство href сцеплено с полем XML:
<A DATASRC="dsogame" DATAFLD="REVIEWS">
Click here for reviews
</A>
Это свойство, как и атрибут HREF элемента, устанавливает URL для гиперссылки. Следовательно, из поля XML извлекается URL гиперссылки для сцепленного элемента A, а не его текстовое содержимое. (XML-поле REVIEWS в рассматриваемом примере должно содержать корректный URL.)
В качестве другого примера рассмотрим связывание поля флажка элемента INPUT через свойство checked (которое изменяет статус выбора элемента (установлен или сброшен флажок)) с XML-полем:
<INPUT TYPE="CHECKBOX" DATASRC="#dsogame" DATAFLD="INSTOCK">
Если XML-поле INSTOCK пусто, либо содержит текст "0" или "false", то поле флажка очищается. Если оно содержит какой-либо другой текст, флажок устанавливается.
В качестве последнего шага рассмотрим элемент IMG (изображение), свойство src которого сцеплено с XML-полем. Это свойство, как и атрибут SRC элемента, задает URL файла, содержащего графические данные. XML 5 и HTML 5 иллюстрируют технику сцепления для элемента IMG.
<?xml version="1.0"?>
<GAMES>
<GAME>
<GAMEIMAGE>maxpayne.jpg</GAMEIMAGE>
<NAME>Max Payne</NAME>
<AUTHOR>Remedy</AUTHOR>
<GENRE>TPS</GENRE>
<YEAR>2001</YEAR>
<PLATFORM>PC, PS2, Xbox</PLATFORM>
</GAME>
<GAME>
<GAMEIMAGE>gta.jpg</GAMEIMAGE>
<NAME>GTA Vice City</NAME>
<AUTHOR>Rockstar</AUTHOR>
<GENRE>Action</GENRE>
<YEAR>2002</YEAR>
<PLATFORM>PC, PS2</PLATFORM>
</GAME>
<GAME>
<GAMEIMAGE>farcry.jpg</GAMEIMAGE>
<NAME>Far Cry</NAME>
<AUTHOR>Crytek</AUTHOR>
<GENRE>FPS</GENRE>
<YEAR>2003</YEAR>
<PLATFORM>PC</PLATFORM>
</GAME>
</GAMES>
XML 5. games image.xml
<HTML>
<HEAD>
<TITLE>Games</TITLE>
</HEAD>
<BODY>
<XML ID="dsogames" SRC="games.xml"></XML>
<H2>Игры</H2>
<TABLE DATASRC="#dsogames" BORDER="1" CELLPADDING="5">
<THEAD>
<TH>Обложка</TH>
<TH>Название</TH>
<TH>Разработчик</TH>
<TH>Жанр</TH>
<TH>Год</TH>
<TH>Платформа</TH>
</THEAD>
<TR ALIGN="center">
<TD><IMG DATAFLD="GAMEIMAGE"></TD>
<TD><SPAN DATAFLD="NAME"
STYLE="font-style:italic"></SPAN></TD>
<TD><SPAN DATAFLD="AUTHOR"></SPAN></TD>
<TD><SPAN DATAFLD="GENRE"></SPAN></TD>
<TD><SPAN DATAFLD="YEAR"></SPAN></TD>
<TD><SPAN DATAFLD="PLATFORM"></SPAN></TD>
</TR>
</TABLE>
</BODY>
</HTML>
HTML 5. game image table.html
XML 5 есть XML-документ, который содержит поле с именем GAMEIMAGE в каждой записи GAME. Каждое поле GAMEIMAGE содержит URL графического файла, который хранит рисунок обложки книги. HTML 5 – это та же самая HTML-страница, что и в HTML 4, за исключением того, что в начало каждой строки таблицы добавлена дополнительная ячейка (элемент TD), которая содержит элемент IMG, а не SPAN. Элемент IMG сцеплен с полем GAMEIMAGE XML-документа, и поэтому отобразит рисунок обложки для каждой книги, как показано на рисунке 5.
Рис. 5