你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:技术专栏 / Linux开发
探讨微软ASP.NET AJAX控件开发技术(客户端)(3)
 

(二)使用面向对象JavaScript设计控件类

以鼠标右击工程添加一个JavaScript脚本文件ImageButton.js,内容如下列表2所示。

列表2:脚本控件MyCliImageButton完整源码

Type.registerNamespace('AjaxImageButtonNamespace');
AjaxImageButtonNamespace.MyCliImageButton = function(element)
{
this._hoverImageUrl = '';
this._originalImageUrl = '';
this._mouseOverHandler = null;
this._mouseOutHandler = null;
this._clickHandler = null;
AjaxImageButtonNamespace.MyCliImageButton.initializeBase(this, [element]);
}
AjaxImageButtonNamespace.MyCliImageButton.prototype =
{
get_hoverImageUrl : function(){
return this._hoverImageUrl;
},
set_hoverImageUrl : function(value) {
var e = Function._validateParams(arguments, [{name: 'value', type: String}]);
if (e) throw e;
if (this._hoverImageUrl != value)
{
this._hoverImageUrl = value;
this.raisePropertyChanged('hoverImageUrl');
}
},
initialize : function(){
AjaxImageButtonNamespace.MyCliImageButton.callBaseMethod(this, 'initialize');
var target = this.get_element();
this._originalImageUrl = target.src;
this._mouseOverHandler = Function.createDelegate(this, this._onMouseOver);
this._mouseOutHandler = Function.createDelegate(this, this._onMouseOut);
this._clickHandler = Function.createDelegate(this, this._onClick)
$addHandlers(target, {'mouseover':this._mouseOverHandler,

'mouseout':this._mouseOutHandler, 'click': this._clickHandler}, this);
},
dispose : function(){
$clearHandlers(this.get_element());
delete this._mouseOverHandler;
delete this._mouseOutHandler;
delete this._clickHandler;
AjaxImageButtonNamespace.MyCliImageButton.callBaseMethod(this, 'dispose');
},
add_click : function(handler) {
this.get_events().addHandler('click', handler);
},
remove_click : function(handler) {
this.get_events().removeHandler('click', handler);
},
_onMouseOver : function(e) {
e.target.src = this._hoverImageUrl;
},
_onMouseOut : function(e) {
e.target.src = this._originalImageUrl;
},
_onClick : function(e) {
e.preventDefault();
var handler = this.get_events().getHandler('click');
if (handler != null) {
handler(this, Sys.EventArgs.Empty);
}
}
}
AjaxImageButtonNamespace.MyCliImageButton.registerClass

('AjaxImageButtonNamespace.MyCliImageButton', Sys.UI.Control);
if (typeof(Sys) != 'undefined')
Sys.Application.notifyScriptLoaded();
}

如你所见,我们重载了initialize方法来“钩住”对应DOM元素的mouseover,mouseout和click事件,以便我们可以在这些事件中设置合适的图像并激发click事件。我们还重载了dispose方法以分离我们在initialize方法中设置的事件处理器。后面,我们还要细致讨论。

(三)使用控件

有了上面的控件类,至于使用就很简单了。请切换到页面default.aspx的源码视图,然后在区创建如下列表3所示内容。

列表3

    <script type="text/javascript">
function pageLoad(){
$create(AjaxImageButtonNamespace.MyCliImageButton,
{'hoverImageUrl':'Images/updateh.gif'}, {'click':buttonClicked}, null, $get('cliBtn'));
}
function buttonClicked(sender, e) {
alert('I am clicked');
return false;
}
</script>

在此,我们使用ASP.NET AJAX客户端全局方法$create创建控件AjaxImageButtonNamespace.MyCliImageButton的一个实例,指定其属性hoverImageUrl取值、click事件的处理器函数,并把它与当前页面中的HTML <IMAGE>元素关联起来。当然,为了使得框架在运行时能够找到我们刚才建立的脚本文件,还要对ScriptManager的属性稍微设置一下,如下列表4所示。

列表4:在ScriptManager控件内配置脚本文件

<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="ImageButton.js" />
</Scripts>
</asp:ScriptManager>

现在,请按F5键运行此页面观察结果即可。下图5相应于当鼠标移动到图像按钮上时发生的变化(你还可以点击之自行观察效果)。

图5:当鼠标移动到图像按钮上时图像切换成另一幅

下面,我们针对使用ASP.NET AJAX框架提供的面向对象JavaScript进行客户端控件编程时有关概念作全面分析。

(编辑;aniston)

  推荐精品文章

·2024年12月目录 
·2024年11月目录 
·2024年10月目录 
·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089