Step: 1 Create new Web-Application
Add a JavaScript at the root.
Step : 2
HooverButton.js
Type.registerNamespace("DynamicHoover");
// Constructor Namescape.FunctionName,
//in Javascript Function is equivalent to a class of C# or Java
DynamicHoover.HoverButton = function(element) {
DynamicHoover.HoverButton.initializeBase(this, [element]);
// public varaiables
this._clickDelegate = null;
this._hoverDelegate = null;
this._unhoverDelegate = null;
}
//accessing properties of
DynamicHoover.HoverButton.prototype = {
// text property accessors.
get_text: function() {
return this.get_element().innerHTML;
},
set_text: function(value) {
this.get_element().innerHTML = value;
},
// Bind and unbind to click event.
add_click: function(handler) {
this.get_events().addHandler('click', handler);
},
remove_click: function(handler) {
this.get_events().removeHandler('click', handler);
},
// Bind and unbind to hover event.
add_hover: function(handler) {
this.get_events().addHandler('hover', handler);
},
remove_hover: function(handler) {
this.get_events().removeHandler('hover', handler);
},
// Bind and unbind to unhover event.
add_unhover: function(handler) {
this.get_events().addHandler('unhover', handler);
},
remove_unhover: function(handler) {
this.get_events().removeHandler('unhover', handler);
},
// Release resources before control is disposed.
dispose: function() {
var element = this.get_element();
if (this._clickDelegate) {
Sys.UI.DomEvent.removeHandler(element, 'click', this._clickDelegate);
delete this._clickDelegate;
}
if (this._hoverDelegate) {
Sys.UI.DomEvent.removeHandler(element, 'focus', this._hoverDelegate);
Sys.UI.DomEvent.removeHandler(element, 'mouseover', this._hoverDelegate);
delete this._hoverDelegate;
}
if (this._unhoverDelegate) {
Sys.UI.DomEvent.removeHandler(element, 'blur', this._unhoverDelegate);
Sys.UI.DomEvent.removeHandler(element, 'mouseout', this._unhoverDelegate);
delete this._unhoverDelegate;
}
DynamicHoover.HoverButton.callBaseMethod(this, 'dispose');
},
initialize: function() {
var element = this.get_element();
if (!element.tabIndex) element.tabIndex = 0;
if (this._clickDelegate === null) {
this._clickDelegate = Function.createDelegate(this, this._clickHandler);
}
Sys.UI.DomEvent.addHandler(element, 'click', this._clickDelegate);
if (this._hoverDelegate === null) {
this._hoverDelegate = Function.createDelegate(this, this._hoverHandler);
}
Sys.UI.DomEvent.addHandler(element, 'mouseover', this._hoverDelegate);
Sys.UI.DomEvent.addHandler(element, 'focus', this._hoverDelegate);
if (this._unhoverDelegate === null) {
this._unhoverDelegate = Function.createDelegate(this, this._unhoverHandler);
}
Sys.UI.DomEvent.addHandler(element, 'mouseout', this._unhoverDelegate);
Sys.UI.DomEvent.addHandler(element, 'blur', this._unhoverDelegate);
DynamicHoover.HoverButton.callBaseMethod(this, 'initialize');
},
_clickHandler: function(event) {
var h = this.get_events().getHandler('click');
if (h) h(this, Sys.EventArgs.Empty);
},
_hoverHandler: function(event) {
var h = this.get_events().getHandler('hover');
if (h) h(this, Sys.EventArgs.Empty);
},
_unhoverHandler: function(event) {
var h = this.get_events().getHandler('unhover');
if (h) h(this, Sys.EventArgs.Empty);
}
}
DynamicHoover.HoverButton.registerClass('DynamicHoover.HoverButton', Sys.UI.Control);
// Since this script is not loaded by System.Web.Handlers.ScriptResourceHandler
// invoke Sys.Application.notifyScriptLoaded to notify ScriptManager
// that this is the end of the script.
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
button {border: solid 1px black; background-color:#FEFDDE;}
#HoverLabel {color: blue}
</style>
<title>mm.JavaScriptHoover: </title>
</head>
<body>
<form id="form1" runat="server">
<div id="ResultDisplay"></div>
<asp:ScriptManager runat="server" ID="ScriptManager01">
<scripts>
<asp:ScriptReference Path="~/HooverButton.js" />
</scripts>
</asp:ScriptManager>
The line below dynamically connect to the javascript preloaded with script manager. <br />
In this example we show how to display data in "div" element that is other wise not <br />
accessible to server controls in a web-form.
<br /> <script type="text/javascript">
var app = Sys.Application;
app.add_init(applicationLoadHandler);
// DynamicHoover is the namespace declared in the JavaScript
function applicationLoadHandler(sender, args) {
$create(DynamicHoover.HoverButton, { text: 'A HoverButton Control', element: { style: { fontWeight: "bold", borderWidth: "2px"}} }, { click: start, hover: doSomethingOnHover, unhover: doSomethingOnUnHover }, null, $get('Button1'));
}
function doSomethingOnHover(sender, args) {
hoverMessage = "A Visual Studio version of a mouse-onover event."
$get('HoverLabel').innerHTML = hoverMessage;
}
function doSomethingOnUnHover(sender, args) {
$get('HoverLabel').innerHTML = "";
}
function start(sender, args) {
alert("The start function handled the HoverButton click event.");
}
</script>
<button type="button" id="Button1"></button>
<div id="HoverLabel"></div>
</form>
</body>
</html>
Step 3: runtime view
