Sabtu, 23 Agustus 2025

HTML Component Sample 3

 




File : Toolbar_Button.htc

<!-- "Toolbar_Button.htc" -->
<HEAD>
<PUBLIC:COMPONENT tagName=TOOLBAR_BUTTON>
  <PUBLIC:ATTACH event="oncontentready" onevent="fnInit()"/>
</PUBLIC:COMPONENT>

<STYLE>
  .clsButton { background-color:#D6D3CE;  
               border:solid 1px;
               border-color:#D6D3CE;
             }
</STYLE>

<SCRIPT LANGUAGE="JScript">
// Entry point
function fnInit()
{
  var oButton = document.body;
  oButton.className = "clsButton";
  oButton.innerHTML = "&nbsp;" + element.innerHTML + "&nbsp;";
  defaults.viewLink = document;
}

// Mouse handler functions
function fnMouseOver()
{
  var oButton = document.body;
  oButton.style.borderColor = "ThreeDHighlight " +
                              "ThreeDDarkShadow " +
                              "ThreeDDarkShadow " +
                              "ThreeDHighlight";
  oButton.style.cursor = "hand";
}

function fnMouseOut()
{
  var oButton = document.body;
  oButton.style.borderColor = "#D6D3CE";
  oButton.style.cursor = "default";
}

function fnOnMouseDown()
{
  var oButton = document.body;
  oButton.style.borderColor = "ThreeDDarkShadow " +
                              "ThreeDHighlight " +
                              "ThreeDHighlight " +
                              "ThreeDDarkShadow";
}

function fnOnMouseUp()
{
  var oButton = document.body;
  oButton.style.borderColor = "ThreeDHighlight " +
                              "ThreeDDarkShadow " +
                              "ThreeDDarkShadow " +
                              "ThreeDHighlight";
}
</SCRIPT>
</HEAD>
<BODY onmouseover="fnMouseOver()"
      onmouseout="fnMouseOut()"
      onmousedown="fnOnMouseDown()"
      onmouseup="fnOnMouseUp()">
</BODY>

==========================================

File : Toolbar_Button.htm

<!-- "Toolbar_Button.htm" -->

<HTML XMLNS:CUSTOM>

<HEAD>

  <TITLE>Toolbar Button Demo</TITLE>

  <?IMPORT namespace="CUSTOM" implementation="Toolbar_Button.htc">


<STYLE>

  .clsButton { font-family:Arial,Helvetia,sans serif;

               font-size:12;

             }

</STYLE>

<SCRIPT>

function fnClick()

{

  alert("You clicked: " + window.event.srcElement.innerText);

}

</SCRIPT>

</HEAD>


<BODY>


<!-- DIV for the toolbar with TOOLBAR_BUTTONs inside. -->

<DIV STYLE="background-color:#D6D3CE;">

  <CUSTOM:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">

    <U>N</U>ew

  </CUSTOM:TOOLBAR_BUTTON>

  

  <CUSTOM:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">

    <U>O</U>pen

  </CUSTOM:TOOLBAR_BUTTON>

  

  <CUSTOM:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">

    <U>S</U>ave

  </CUSTOM:TOOLBAR_BUTTON>

  

  <CUSTOM:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">

    Save <U>A</U>s...

  </CUSTOM:TOOLBAR_BUTTON>

</DIV>


</BODY>

</HTML>

Tidak ada komentar: