ExtenderControl是AJAX.NET框架里扩展控件的基类,比如ControlToolKit里的一些扩展控件就是从这个基类派生而来。这也是AJAX.NET框架提供给用户在客户端定义Behavior的一种方式。这种客户端的Behavior主要用于扩展服务器控件的行为,让服务器控件有更多的客户端功能,提供更好的用户体验。而这种扩展控件的方式是不改变原有服务器的行为,只是新增功能,也算是一种装饰模式。
这里所做的Extender控件的功能是实现服务器控件在页面上可被拖放,当然这个功能在强大的AJAX.NET的预览版本里已经有了很好的实现,我这里所做的也只是简单的拖放。基本的思路是采用AJAX正式版框架里定义Behavior的方式,然后定义一些模拟拖放的事件。实现拖放的逻辑也很简单,当需要拖放的对象被点击之后,给body添加mousemove和mouseup事件,具体的移动逻辑在mousemove里实现,mouseup则清空body的事件,拖放结束。这个逻辑也是按照<<javascript高级编程>>书上介绍的方法,没有特别深奥的东西。说白了就是演练一下定义extender控件,把一些老的东西重新包装一下。除了简单的拖放逻辑,还提供了一个属性dragCssClass,就是在拖放的时候的样式,比如设置鼠标为move等等。具体代码如下
1.首先定义个extender继承ExtenderControl,当然这个要引用AJAX.NET的System.Web.Extension.dll.要指定
[TargetControlType(typeof(Control))]类型,还需要注册脚本,脚本当然也是嵌入到资源中的。基类方法的作用请看AJAX.NET提供的帮助。
DragExtender
1[assembly: WebResource(“AjaxControl.DragBehavior.js“, “text/javascript“)]
2namespace AjaxControl
3{
4 [TargetControlType(typeof(Control))]
5 public class DragExtender : ExtenderControl
6 {
7 private string _dragCssClass;
8 /**//// <summary>
9 /// 拖动时的样式
10 /// </summary>
11 public string DragCssClass
12 {
13 get { return _dragCssClass; }
14 set { _dragCssClass = value; }
15 }
16
17 protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
18 {
19 ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor(“Shenba.DragBehavior“, targetControl.ClientID);
20 descriptor.AddProperty(“dragCssClass“, this._dragCssClass);
21 return new ScriptBehaviorDescriptor[] { descriptor };
22 }
23
24 protected override IEnumerable<ScriptReference> GetScriptReferences()
25 {
26 string jsPath = ResolveClientUrl(“AjaxControl.DragBehavior.js“);
27 ScriptReference reference = new ScriptReference(jsPath);
28 return new ScriptReference[] { reference };
29 }
30
31 protected override void OnPreRender(EventArgs e)
32 {
33 if (!this.DesignMode)
34 {
35 // 将脚本添加到scriptmanager的脚本引用中
36 ScriptManager sm = ScriptManager.GetCurrent(Page);
37 if (sm == null)
38 {
39 throw new HttpException(“a scriptmanager is required in the page.“);
40 }
41 sm.Scripts.Add(new ScriptReference(“AjaxControl.DragBehavior.js“, “AjaxControl“));
42 }
43 base.OnPreRender(e);
44 }
45 }
46}
47
DragBehavior.js
1Type.registerNamespace(“Shenba“);
2
3Shenba.DragBehavior = function (element)
4{
5 Shenba.DragBehavior.initializeBase(this, [element]);
6 // 分别用于记录鼠标落点与目标对象坐标的偏差
7 this._diffX = 0;
8 this._diffY = 0;
9}
10
11Shenba.DragBehavior.prototype = {
12 initialize : function ()
13 {
14 Shenba.DragBehavior.callBaseMethod(this, “initialize“);
15
16 // 将目标对象的定位转化成绝对定位
17 this.get_element().style.position = “absolute“;
18 this._mouseDownHandler = Function.createDelegate(this, this._onMouseDown);
19 $addHandler(this.get_element(), “mousedown“, this._mouseDownHandler);
20 },
21
22 set_dragCssClass : function(value)
23 {
24 if (this._dragCssClass !== value)
25 {
26 this._dragCssClass = value;
27 this.raisePropertyChanged(“dragCssClass“);
28 }
29 },
30 get_dragCssClass : function()
31 {
32 return this._dragCssClass;
33 },
34
35 _onMouseDown : function (e)
36 {
37 var ele = this.get_element();
38 this._diffX = e.clientX – ele.offsetLeft;
39 this._diffY = e.clientY – ele.offsetTop;
40
41 // 给body添加mouseMove合mouseUp事件
42 this._mouseMoveHandler = Function.createDelegate(this, this._onMouseMove);
43 $addHandler(document.body, “mousemove“, this._mouseMoveHandler);
44 this._mouseUpHandler = Function.createDelegate(this, this._onMouseUp);
45 $addHandler(document.body, “mouseup“, this._mouseUpHandler);
46
47 this.get_element().className = this._dragCssClass;
48 },
49 _onMouseMove : function (e)
50 {
51 var ele = this.get_element();
52 ele.style.left = e.clientX – this._diffX;
53 ele.style.top = e.clientY – this._diffY;
54 },
55 _onMouseUp : function ()
56 {
57 // 鼠标释放之后删除body的事件
58 $removeHandler(document.body, “mousemove“, this._mouseMoveHandler);
59 $removeHandler(document.body, “mouseup“, this._mouseUpHandler);
60 this._diffX = 0;
61 this._diffY = 0;
62 this.get_element().className = “”;
63 },
64
65 dispose : function ()
66 {
67 $clearHandlers(document.body);
68 $clearHandlers(this.get_element());
69 Shenba.DragBehavior.callBaseMethod(this, “dispose“);
70 }
71}
72
73Shenba.DragBehavior.descriptor = {
74 properties: [ {name: “dragCssClass“, type: String} ]
75}
76
77Shenba.DragBehavior.registerClass(“Shenba.DragBehavior“, Sys.UI.Behavior);
78
79if (typeof(Sys) !== “undefined“) Sys.Application.notifyScriptLoaded();
80
81
82
Page
1<%@ Register Assembly=“AjaxControl“ Namespace=“AjaxControl“ TagPrefix=“shenba“ %>
2<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
3 <div>
4 <asp:Calendar ID=”ca” runat=”server”></asp:Calendar>
5 <shenba:DragExtender TargetControlID=”ca” DragCssClass=”drag” ID=”dragExtender1″ runat=”server”/>
6 </div>
这里所做的Extender控件的功能是实现服务器控件在页面上可被拖放,当然这个功能在强大的AJAX.NET的预览版本里已经有了很好的实现,我这里所做的也只是简单的拖放。基本的思路是采用AJAX正式版框架里定义Behavior的方式,然后定义一些模拟拖放的事件。实现拖放的逻辑也很简单,当需要拖放的对象被点击之后,给body添加mousemove和mouseup事件,具体的移动逻辑在mousemove里实现,mouseup则清空body的事件,拖放结束。这个逻辑也是按照<<javascript高级编程>>书上介绍的方法,没有特别深奥的东西。说白了就是演练一下定义extender控件,把一些老的东西重新包装一下。除了简单的拖放逻辑,还提供了一个属性dragCssClass,就是在拖放的时候的样式,比如设置鼠标为move等等。具体代码如下
1.首先定义个extender继承ExtenderControl,当然这个要引用AJAX.NET的System.Web.Extension.dll.要指定
[TargetControlType(typeof(Control))]类型,还需要注册脚本,脚本当然也是嵌入到资源中的。基类方法的作用请看AJAX.NET提供的帮助。
DragExtender
1[assembly: WebResource(“AjaxControl.DragBehavior.js“, “text/javascript“)]
2namespace AjaxControl
3{
4 [TargetControlType(typeof(Control))]
5 public class DragExtender : ExtenderControl
6 {
7 private string _dragCssClass;
8 /**//// <summary>
9 /// 拖动时的样式
10 /// </summary>
11 public string DragCssClass
12 {
13 get { return _dragCssClass; }
14 set { _dragCssClass = value; }
15 }
16
17 protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
18 {
19 ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor(“Shenba.DragBehavior“, targetControl.ClientID);
20 descriptor.AddProperty(“dragCssClass“, this._dragCssClass);
21 return new ScriptBehaviorDescriptor[] { descriptor };
22 }
23
24 protected override IEnumerable<ScriptReference> GetScriptReferences()
25 {
26 string jsPath = ResolveClientUrl(“AjaxControl.DragBehavior.js“);
27 ScriptReference reference = new ScriptReference(jsPath);
28 return new ScriptReference[] { reference };
29 }
30
31 protected override void OnPreRender(EventArgs e)
32 {
33 if (!this.DesignMode)
34 {
35 // 将脚本添加到scriptmanager的脚本引用中
36 ScriptManager sm = ScriptManager.GetCurrent(Page);
37 if (sm == null)
38 {
39 throw new HttpException(“a scriptmanager is required in the page.“);
40 }
41 sm.Scripts.Add(new ScriptReference(“AjaxControl.DragBehavior.js“, “AjaxControl“));
42 }
43 base.OnPreRender(e);
44 }
45 }
46}
47
2.接下来是js的脚本,也是核心逻辑的一部分
DragBehavior.js
1Type.registerNamespace(“Shenba“);
2
3Shenba.DragBehavior = function (element)
4{
5 Shenba.DragBehavior.initializeBase(this, [element]);
6 // 分别用于记录鼠标落点与目标对象坐标的偏差
7 this._diffX = 0;
8 this._diffY = 0;
9}
10
11Shenba.DragBehavior.prototype = {
12 initialize : function ()
13 {
14 Shenba.DragBehavior.callBaseMethod(this, “initialize“);
15
16 // 将目标对象的定位转化成绝对定位
17 this.get_element().style.position = “absolute“;
18 this._mouseDownHandler = Function.createDelegate(this, this._onMouseDown);
19 $addHandler(this.get_element(), “mousedown“, this._mouseDownHandler);
20 },
21
22 set_dragCssClass : function(value)
23 {
24 if (this._dragCssClass !== value)
25 {
26 this._dragCssClass = value;
27 this.raisePropertyChanged(“dragCssClass“);
28 }
29 },
30 get_dragCssClass : function()
31 {
32 return this._dragCssClass;
33 },
34
35 _onMouseDown : function (e)
36 {
37 var ele = this.get_element();
38 this._diffX = e.clientX – ele.offsetLeft;
39 this._diffY = e.clientY – ele.offsetTop;
40
41 // 给body添加mouseMove合mouseUp事件
42 this._mouseMoveHandler = Function.createDelegate(this, this._onMouseMove);
43 $addHandler(document.body, “mousemove“, this._mouseMoveHandler);
44 this._mouseUpHandler = Function.createDelegate(this, this._onMouseUp);
45 $addHandler(document.body, “mouseup“, this._mouseUpHandler);
46
47 this.get_element().className = this._dragCssClass;
48 },
49 _onMouseMove : function (e)
50 {
51 var ele = this.get_element();
52 ele.style.left = e.clientX – this._diffX;
53 ele.style.top = e.clientY – this._diffY;
54 },
55 _onMouseUp : function ()
56 {
57 // 鼠标释放之后删除body的事件
58 $removeHandler(document.body, “mousemove“, this._mouseMoveHandler);
59 $removeHandler(document.body, “mouseup“, this._mouseUpHandler);
60 this._diffX = 0;
61 this._diffY = 0;
62 this.get_element().className = “”;
63 },
64
65 dispose : function ()
66 {
67 $clearHandlers(document.body);
68 $clearHandlers(this.get_element());
69 Shenba.DragBehavior.callBaseMethod(this, “dispose“);
70 }
71}
72
73Shenba.DragBehavior.descriptor = {
74 properties: [ {name: “dragCssClass“, type: String} ]
75}
76
77Shenba.DragBehavior.registerClass(“Shenba.DragBehavior“, Sys.UI.Behavior);
78
79if (typeof(Sys) !== “undefined“) Sys.Application.notifyScriptLoaded();
80
81
82
最后在页面中调用就非常的简单,记得添加scriptmanager即可
Page
1<%@ Register Assembly=“AjaxControl“ Namespace=“AjaxControl“ TagPrefix=“shenba“ %>
2<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
3 <div>
4 <asp:Calendar ID=”ca” runat=”server”></asp:Calendar>
5 <shenba:DragExtender TargetControlID=”ca” DragCssClass=”drag” ID=”dragExtender1″ runat=”server”/>
6 </div>
目前实现的只是简单拖动,不能像profile那样保存起来,有空再研究下。
完整代码
转载于:https://www.cnblogs.com/shenba/archive/2008/06/12/1218619.html
今天的文章服务器插件制作_qt自定义可拖动控件分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/75256.html