The major goal is to extend the behavior of the ASP.NET
control, so the Behavoir.js file will play a key role in that process.
As I explained in "Brief explanation
about creating a new Ajax extender" section, we
should create a property variable in the initializeBase
function for each public property in the Extender Class, as you see in Listing
10.
Listing 10
this._toolTipText = '';
this._toolTipWidth = '200px';
this._toolTipBgColor = '#5E8DD0';
this._toolTipFontName='Verdana';
this._toolTipFontColor='White';
this._disappearDelay=250;
If you recall, we need to write a get/set client-side
property for each variable, which is shown in Listing 11.
Listing 11
get_ToolTipText: function()
{
return this._toolTipText;
}
,
set_ToolTipText: function(value)
{
this._toolTipText = value;
}
, set_ToolTipWidth: function(value)
{
this._toolTipWidth = value;
}
, get_ToolTipWidth: function()
{
return this._toolTipWidth;
}
, set_ToolTipBgColor: function(value)
{
this._toolTipBgColor = value;
}
, get_ToolTipBgColor: function()
{
return this._toolTipBgColor;
}
, set_ToolTipFontName: function(value)
{
this._toolTipFontName = value;
}
, get_ToolTipFontName: function()
{
return this._toolTipFontName;
}
, set_ToolTipFontColor: function(value)
{
this._toolTipFontColor = value;
}
, get_ToolTipFontColor: function()
{
return this._toolTipFontColor;
}
, set_DisappearDelay: function(value)
{
this._disappearDelay = value;
}
, get_DisappearDelay: function()
{
return this._toolTipFontColor;
}
,Now lets do the trick, as you can see in Listing 12, we have
created a new HTML Div element in initialize function, which will be the tool
tip.
Listing 12
var newDiv = document.createElement('div');
newDiv.id = this.get_element().id + '_fixedtipdiv';
newDiv.style.visibility='hidden';
newDiv.style.width=this._toolTipWidth;
newDiv.style.backgroundColor=this._toolTipBgColor;
newDiv.style.fontFamily=this._toolTipFontName;
newDiv.style.color=this._toolTipFontColor;
newDiv.className='tooltipdiv';
document.body.appendChild(newDiv);We will add an event handler when the mouse is over and out
of the content.
These handlers will be located at the initialize function,
as you see in Listing 13.
Note that I have removed the "On" prefix word from
the event name.
If you download the source code, you will see the _fixedtooltip function, and the _delayhidetip
function in more details; these two JavaScript functions are responsible of
show/hide the tool tip.
In addition, many JavaScript functions are responsible for
creating the client-side behavior for the extender.
Listing 13
$addHandler(this.get_element(), 'mouseover',Function.createDelegate(this,
this._fixedtooltip));
$addHandler(this.get_element(), 'mouseout',
Function.createDelegate(this,this._delayhidetip));
Now let us test our new extender.
