Figure 3 The Frame Behavior
<PUBLIC:HTC URN="DinoFrame">
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
<PUBLIC:PROPERTY NAME="border" />
<PUBLIC:PROPERTY NAME="backcolor" />
<SCRIPT LANGUAGE="jscript">
function DoInit() {
SetDefaults();
BuildTable();
}
function SetDefaults() {
if (border == null)
border = 1;
if (backcolor == null)
backcolor = "white";
}
function BuildTable() {
htmlText = "";
htmlText += "<table cellpadding=2 cellspacing=0"
" bordercolor=#000000 ";
htmlText += "border=" + border + " bgcolor=" + backcolor;
htmlText += "<tr><td>";
htmlText += element.innerHTML;
htmlText += "</td></tr>";
htmlText += "</table>";
element.innerHTML = htmlText;
}
</SCRIPT>
</PUBLIC:HTC>
Figure 4 Defining the Listing Tag
<HTML XMLNS:dino>
<STYLE>
@media all {
dino\:Listing {
width:100;
font-Family:Lucida Console;
font-Size:10;
background:gainsboro;
margin-left:20px;
}
}
</STYLE>
<BODY>
Try executing this code: <hr>
<dino:listing>
Const a = 0
Const b = 1
MsgBox a + b
</dino:listing>
<hr>
The result is: 1
</BODY>
</HTML>
Figure 7 Designing a Caption Bar
<html>
<body>
<table border="0" cellpadding="1" cellspacing="0" width="100%" style="font-family:verdana;">
<tr>
<td valign="top" nowrap bgcolor="#003399">
<b><a style='text-decoration:none; color:white;'
onmouseover="this.style.color='#ffcc00'"
onmouseout="this.style.color='white'">
Details </a></b>
</td>
<td align="right" width="100%"></td>
</tr>
<tr>
<td align="left" valign="top" width="100%" height="1"
colspan=2 bgcolor="#003399"><img height=1 width=2></td>
</tr>
</table>
<div style="font-size:75%; font-family:verdana; color:000000">
Click here to see all the details about sent invoices. You can also get a preview or a printout.
</div>
</body>
</html>
Figure 10 Using the Caption Bar in a Namespace
<html xmlns:DINO>
<head>
<title>Expoware Soft Console</title>
<style>
@media all
{
DINO\:msdntab {behavior:url(msdntab.htc);}
DINO\:msdnline {behavior:url(msdnline.htc);}
}
</style>
</head>
<script language="JavaScript">
function ViewPage(htmlPage) {
}
</script>
<body background="blegtext.gif">
<IMG src="expo2.gif">
<DINO:msdnline />
<DINO:msdntab label="Invoices"
href="javascript:Hello()">
Click here for a quick view of both invoices already sent and those to be prepared yet.
</DINO:msdntab>
<br>
<DINO:msdntab label="Details"
href="javascript:Hello()">
Click here to see all the details about sent invoices. You can also get a preview or a printout.
</DINO:msdntab>
</body>
</html>
Figure 11 The msdntab Behavior
<!-- The MSDNTAB behavior -->
<PUBLIC:HTC URN="MsdnTab">
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
<PUBLIC:PROPERTY NAME="label" />
<PUBLIC:PROPERTY NAME="labelstyle" />
<PUBLIC:PROPERTY NAME="backcolor" />
<PUBLIC:PROPERTY NAME="stdcolor" />
<PUBLIC:PROPERTY NAME="hicolor" />
<PUBLIC:PROPERTY NAME="textstyle" />
<PUBLIC:PROPERTY NAME="href" />
<PUBLIC:PROPERTY NAME="page" />
<SCRIPT LANGUAGE="jscript">
function DoInit() {
SetDefaults();
BuildTable();
}
function SetDefaults() {
if (href == null)
href = "";
if (stdcolor == null)
stdcolor = "white";
if (backcolor == null)
backcolor = "#003399";
if (hicolor == null)
hicolor = "#ffcc00";
if (label == null)
label = "Expoware Soft";
}
function BuildTable() {
htmlText = "";
htmlText += "<table border=0 cellpadding=1 cellspacing=0 width=100% ";
if (labelstyle == null)
htmlText += "style='font-family:verdana;'>";
else
htmlText += "class=" + labelstyle + ">";
htmlText += "<tr>";
htmlText += "<td valign=top nowrap bgcolor=" + backcolor + ">";
if (href != null)
htmlText += "<b><a href=\"" + href + "\" ";
else
htmlText += "<b><a ";
htmlText += "style='text-decoration:none; color:" + stdcolor + ";' ";
htmlText += "onmouseover=\"this.style.color='" + hicolor + "'\" ";
htmlText += "onmouseout=\"this.style.color='" + stdcolor + "'\"";
htmlText += ">";
htmlText += " " + label + " </a></b></td>";
htmlText += "<td align=right width=100%></td>";
htmlText += "</tr>";
htmlText += "<tr>";
htmlText += "<td align=left valign=top width=100% height=1 colspan=2 ";
htmlText += "bgcolor=" + backcolor + ">";
htmlText += "<img height=1 width=2></td>";
htmlText += "</tr></table>";
if (textstyle == null)
htmlText += "<div " + "style='font-size:75%; font-family:verdana;
color:000000'>";
else
htmlText += "<div class=" + textstyle + ">"
htmlText += element.innerHTML;
htmlText += "</div>";
element.innerHTML = htmlText;
}
</SCRIPT>
</PUBLIC:HTC>
<!-- The MSDNLINE behavior -->
<PUBLIC:HTC URN="MsdnLine">
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
<PUBLIC:PROPERTY NAME="backcolor" />
<PUBLIC:PROPERTY NAME="size" />
<SCRIPT LANGUAGE="jscript">
function DoInit() {
SetDefaults();
BuildTable();
}
function SetDefaults() {
if (backcolor == null)
backcolor = "#003399";
if (size == null)
size = 2;
}
function BuildTable() {
htmlText = "";
htmlText += "<br>";
htmlText += "<table border=0 cellpadding=0 cellspacing=0 width=100% ";
htmlText += "<tr>";
htmlText += "<td bgcolor=" + backcolor + ">";
htmlText += "<img height=" + size + "></td>";
htmlText += "</tr></table>";
htmlText += "<br>";
element.innerHTML = htmlText;
}
</SCRIPT>
</PUBLIC:HTC>
Figure 13 Tabstrip.htm
<PUBLIC:HTC URN="tabstrip">
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
<PUBLIC:ATTACH EVENT="onclick" HANDLER="DoClick" />
<PUBLIC:ATTACH EVENT="onmouseover" HANDLER="DoMouseOver" />
<PUBLIC:ATTACH EVENT="onmouseout" HANDLER="DoMouseOut" />
<PUBLIC:PROPERTY NAME="title" />
<PUBLIC:PROPERTY NAME="src" />
<PUBLIC:PROPERTY NAME="ColorSelectedTab" />
<PUBLIC:PROPERTY NAME="ColorSelectedTabText" />
<PUBLIC:PROPERTY NAME="ColorGrayedTab" />
<PUBLIC:PROPERTY NAME="ColorGrayedTabText" />
<PUBLIC:PROPERTY NAME="ColorTab" />
<PUBLIC:PROPERTY NAME="ColorTabText" />
<PUBLIC:PROPERTY NAME="ColorTabTextMouseOver" />
<PUBLIC:PROPERTY NAME="FontStyle" />
<PUBLIC:PROPERTY NAME="selected" />
<PUBLIC:PROPERTY NAME="grayed" />
<PUBLIC:PROPERTY NAME="label" />
<PUBLIC:PROPERTY NAME="margin" />
<SCRIPT LANGUAGE="jscript">
var g_curColor = "";
function DoInit() {
SetDefaults();
BuildTabStrip();
}
/*
// SetDefaults
// Sets default values and initializes some common-use variables
*/
function SetDefaults() {
if (FontStyle == null)
FontStyle = "font-Family:verdana;font-Size:14;";
if (ColorTab == null)
ColorTab = "#dddddd";
if (ColorTabText == null)
ColorTabText = "black";
if (ColorGrayedTab == null)
ColorGrayedTab = "#000000";
if (ColorGrayedTabText == null)
ColorGrayedTabText = "gainsboro";
if (ColorSelectedTab == null)
ColorSelectedTab = "yellow";
if (ColorSelectedTabText == null)
ColorSelectedTabText = "#000000";
if (ColorTabTextMouseOver == null)
ColorTabTextMouseOver = "#0000CC";
if (label == null)
label = "";
if (margin == null)
margin = 2;
aSrcs = new Array();
aDisabled = new Array();
selItem = 0;
window.document.body.style.margin = margin;
}
/*
// BuildTabStrip
// Creates the (rather complex) structure of <TABLE> to provide
// the tabs. Loops through the child items to extract info
*/
function BuildTabStrip() {
// begin group
str = "";
str += "<table border=0 cellpadding=0 cellspacing=0><tr>";
// loops through children
for (i=0; i<children.length; i++) {
aSrcs[i] = children[i].src;
// Normal status settings
aDisabled[i] = 0;
sColorTab = ColorTab;
sTitle = children[i].title;
sForeColor = ColorTabText;
// Grayed status settings
if (children[i].grayed != null) {
aDisabled[i] = 1;
sTitle = "<i>" + children[i].title + "</i>";
sColorTab = ColorGrayedTab;
sForeColor = ColorGrayedTabText;
}
if (children[i].selected != null) {
if (selItem == 0) selItem = i;
sForeColor = ColorSelectedTabText;
}
// text for children
str += "<td valign=bottom>";
str += "<table border=0 cellpadding=0 cellspacing=0>"
str += "<tr>";
str += "<td></td>";
str += "<td bgcolor=#000000 height=1><img height=1></td>";
str += "<td></td></tr>";
str += "<tr>";
str += "<td bgcolor=#000000 width=1 nowrap><img width=1></td>";
str += "<td><div><table id=myTable cellspacing=3 bgcolor=";
str += sColorTab;
str += "><tr><td nowrap id=myTD ";
str += "style=" + FontStyle + "color:" + sForeColor + ">";
str += sTitle;
str += "</td></tr></table></div></td>";
str += "<td bgcolor=#000000 width=1 nowrap><img width=1></td>";
str += "</tr></table></td>";
}
// adds other info
str += "<td valign=bottom width=100% align=right>";
str += label;
str += "</td></tr>";
// adds bottom line
str += "<table border=0 cellpadding=0 cellspacing=0 width=100%>";
str += "<tr bgcolor=#000000>";
str += "<td height=2><img height=2></td>";
str += "</tr></table>"
// ends group
str += "</table>";
// sets the child page
d = GetTheWindowString(selItem);
// adds the DIV with the child page
str += "<div id=myArea>" + d + "</div>";
// writes to the page
element.innerHTML = str;
// highlights the selected element in the tabstrip
HiliteItem(selItem);
}
/*
// DoClick
// Executes the code in response to a user click on a tab.
// Basically, it switches between child pages and changes
// UI features
*/
function DoClick() {
eTD = window.event.srcElement;
tabName = eTD.innerText;
if (eTD.style.color == ColorGrayedTabText) return;
if (eTD.style.color == ColorSelectedTabText) return;
if (eTD.id != "myTD") return;
for (i=0; i<myTD.length; i++) {
if (!aDisabled[i]) {
myTD[i].style.background = ColorTab;
myTD[i].style.color = ColorTabText;
myTable[i].style.background = ColorTab;
myTD[i].style.fontWeight = "";
}
if (myTD[i].innerHTML == eTD.innerHTML)
selItem = i;
}
g_curColor = ColorSelectedTabText;
HiliteItem(selItem);
myArea.innerHTML = GetTheWindowString(selItem);
}
/*
// GetTheWindowString
// Arranges the HTML code to point to the child page through
// an IFRAME tag
*/
function GetTheWindowString(index) {
d = "<iframe id=myFrame border=0 width=100% height=90% "
d += "src=" + aSrcs[index];
d += "></iframe>";
return d;
}
/*
// HiliteItem
// Changes the UI attributes for the selected tab
*/
function HiliteItem(index) {
myTD[index].style.background = ColorSelectedTab;
myTable[index].style.background = ColorSelectedTab;
myTD[index].style.color = ColorSelectedTabText;
myTD[index].style.fontWeight = "bold";
}
/*
// DoMouseOver
// Executes the code to highlight the tab where the mouse
// is currently hovering over
*/
function DoMouseOver() {
eTD = window.event.srcElement;
g_curColor = eTD.style.color;
if (eTD.tagName == "TD") {
if (eTD.style.background != ColorSelectedTab &&
eTD.innerText != "" &&
eTD.style.color != ColorGrayedTabText &&
eTD.id == "myTD")
{
eTD.style.color = ColorTabTextMouseOver;
eTD.style.textDecoration = "underline";
eTD.style.cursor = "hand";
}
else {
eTD.style.cursor = "default";
}
}
}
function DoMouseOut() {
eTD = window.event.srcElement;
if (eTD.style.color != ColorGrayedTabText) {
eTD.style.cursor = "";
eTD.style.color = g_curColor; //"";
eTD.style.textDecoration = "none";
}
}
</SCRIPT>
</PUBLIC:HTC>