|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
HTML Form EventsAs you would expect, Microsoft’s Dynamic HTML supports the traditional onreset and onsubmit events associated with an HTML form’s Reset and Submit buttons. Each of these events is triggered when the corresponding button is clicked. If an event handler for the onsubmit event returns a value of false, the form is not submitted. Other EventsThe following list describes the other events supported by Microsoft’s implementation of Dynamic HTML. Note also that a collection of events is associated with the data binding capabilities of Dynamic HTML—these events are discussed later in this chapter.
Using Dynamic HTML with StylesDynamic HTML works very well with another aspect of Internet Explorer for dynamically changing the formatting of elements in an HTML document: styles and style sheets. One property associated with all HTML tags—which, as you will recall, you can access through the all object—is that tag’s style. The style property, in turn, has properties of its own that you can access and change to immediately change the appearance of the Web page. Listing 26.4 shows an example of dynamically changing the style of elements of an HTML document. In this example, the format is applied to two elements in different ways—either through an embedded style sheet created with the <STYLE> tag or through the STYLE attribute. No matter which way you do it, the script changes the format in response to the onMouseDown and onMouseUp events. Figures 26.5 and 26.6 show the before and after screen shots of this HTML document.
Listing 26.4 Style1.htm—Dynamic HTML Can Change Document Styles
<HTML>
<HEAD>
<TITLE>Dynamic HTML and Styles</TITLE>
<STYLE>
.mousedown {font-size:48pt;color:red}
.mouseup {font-size:24pt;color:black}
</STYLE>
<SCRIPT LANGUAGE=“JScript”>
function changeStyles(mousedown) {
if (mousedown) {
document.all.tags(“H1”).item(0).className = “mousedown”;
document.all.tags(“P”).item(0).style.fontSize = “24pt”;
} else {
document.all.tags(“H1”).item(0).className = “mouseup”;
document.all.tags(“P”).item(0).style.fontSize = “12pt”;
}
}
</SCRIPT>
</HEAD>
<BODY onMouseDown=“changeStyles(1)” onMouseUp=“changeStyles(0)”>
<CENTER>
<H1 CLASS=“mouseup”>Dynamic HTML and Styles</H1>
<HR>
<P STYLE=“font-size: 12pt”>
When you click the mouse, the script in this example will
dynamically change the style of the heading and of this
text. The script uses the <EM>className</EM> and
<EM>style.fontSize</EM> properties of the
<EM>all.tags.item</EM> object.
</P>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
Dynamic HTML and the Data Source ObjectAnother Dynamic HTML capability works hand in hand with Microsoft’s Data Source Object to enable what is called data binding. The Data Source Object is an ActiveX Control that references an external file to provide data for the HTML document. Dynamic HTML enables you to use the DATASRC and DATAFLD attributes to bind this data to HTML elements. This way, the data displayed within a document can be kept separate from the formatting. Also, after the data is transmitted to the client Web browser, the Data Source Object can perform operations on it locally. Data Binding EventsA collection of events is associated with HTML elements that are data bound using the DATASRC and DATAFLD attributes. The following list describes these events:
Data Binding ExampleListing 26.5 shows an example of data binding using the Data Source Object and Dynamic HTML. In this example, a data file of chapter, page count, and author information is bound to the columns of an HTML table. The Data Source Object’s SortColumn() method is attached to the table headings, using the onClick event. When a column heading is clicked, the table is sorted by the contents of that column and immediately redisplayed. Figures 26.7 and 26.8 show examples of this, with the table sorted either by chapter number or chapter title.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
){kind=link}
){kind=link}