ajax.net 强化了的组件支持
ajax.net强化了的组件支持
1 //ajax.net对js的三大扩展:组件component,控件control,行为behavior
2 //1.Sys.Component基类
3 //Sys.Component基类的常用属性
4 //属性 描述
5 // id 获取或设置组件的标识符
6 // isInitialized 判断该组件是否经过初始化
7 // events 获取一个Sys.EventHandlerList对象,表示该组件的所有事件及相应的事件处理函数列表
8 //
9 //Sys.Component基类的常用方法
10 //方法 描述
11 //Sys.Component.create(type,properties,events,references,element) 创建某个类型的组件的实例。
12 // type表示组件的类型;
13 // properties是一个包含组件的属性与属性值的JSON对象;
14 // events是一个包含组件的事件与事件处理函数的JSON对象;
15 // references是一个包含该组件引用的其他组件的JSON对象;
16 // element是与该组件相关联的DOM元素,
17 // 除type参数外,其它参数均可省略。
18 //initialize() 初始化方法,继承类可以重写该方法并实现其自身的初始化逻辑
19 //disponse() 析构方法,继承类可以重写该方法并实现其自身的析构逻辑
20 //
21 //使用示例:创建一个Calendar类型的行为组件
22 Sys.Component.create(
23 AjaxControlToolkit.CalendarBehavior,
24 {
25 'button':$get(),
26 'format':'MM/dd/yyyy',
27 'id','MyTabContainer_startDateCalendarExtender'
28 },
29 null,
30 null,
31 $get('MyTabContainer_startDateTextBox')
32 );
33 //使用示例2:创建一个某自定义控件实例
34 Sys.Component.create(
35 MyControl,
36 {id:'c1',visible:true},
37 {click:showValue},
38 null,
39 $get('button1')
40 );
41 //Sys.Component.create==$create
42 //
43 //
44 //
45 //2.Sys.UI.Control基类 继承自Sys.Component
46 //Sys.UI.Control基类的常用属性
47 // 属性 描述
48 // id 获取或设置控件的标识符
49 // element 获取与该控件相关联的DomElement对象,该DomElement对象封装了实际的DOM元素
50 // parent 获取或设置该控件的父控件,这里的父控件并不是DOM层次结构上的父元素,而是逻辑上的父控件。
51 // 子控件将可以继承父控件的一些属性设定,例如dataContext.
52 // 子控件的冒泡事件(bubble event)也可以传递到其父控件中并在父控件中进行处理
53 // visibilityMode 获取或设置该控件在隐藏时的显示模式,可选枚举值:
54 // Sys.UI.VisibilityMode.collapse代表该控件隐藏时不占用页面空间
55 // Sys.UI.VisibilityMode.hidden代表该控件隐藏时不还占用页面空间
56 // visible 获取或设置一个布尔值,表示该控件是否可见
57 //
58 //Sys.UI.Control基类暴露出来的常用方法
59 //方法 描述
60 //addCssClass(className) 为该控件添加指定的CSS Class
61 //removeCssClass(className) 移除该控件的一个现有CSS Class
62 //toggleCssClass(className) 如果该控件没的旨定的CSS Class 就添加,否则就移除
63 //onBubbleEvent(source,args) 处理该控件的子控件发出的冒泡事件
64 //raiseBubbleEvent(source,args) 调用该方法将会引发该控年所有父控件的onBubbleEvent()方法被自动调用,这样即可实现事件的冒泡
65 var divButton=new Sys.UI.Control($get('divButton'));
66 divButton.get_element().onclick=function(){
67 divButton.toggleCssClass('clicked');
68 }
69 //
70 //Behavior基类 继承自Sys.Component
71 //Sys.UI.Behavior基类的常用静态方法
72 // 方法 描述
73 // Behavior.getBehaviorByName(element,name) 在element指定的DOM元素中寻找名称为name的行为
74 // Behavior.getBehaviorByType(element,type) 在element指定的DOM元素中寻找类型为type的行为
75 // Behavior.getBehaviors(element) 返回应用到element指定的DOM元素上的所有行为
76 //
77 //
78 //DomElement类
79 //方法 描述
80 //Sys.UI.DomElement.getElementByID(id,element) 在element元素的子节点中通过id属性找到并创建相应的Sys.UI.DomElement类,
81 // 若不指定element参数,则默认从文档的根节点document开始搜索
82 //Sys.UI.DomElement.addCssClass(element,className) 为element添加名为className的css class
83 //Sys.UI.DomElement.containsCssClass(element,className) 判断element是否已经使用了className的css class
84 //Sys.UI.DomElement.removeCssClass(element,className) 移除element的className的css class
85 //Sys.UI.DomElement.toogleCssClass(element,className) 如果element上没有添加className的css class就添加上,否则就移除
86 //Sys.UI.DomElement.GetBounds(element) 获取element元素的边界信息,返回值被封装成一个JSON对象
87 // 包括水平位置x,垂直位置y,高度height,宽度width
88 //Sys.UI.DomElement.getLocation(element) 获取element的位置信息,返回被封装成一个JSON对象,
89 // 包括水平位置x和垂直位置y
90 //Sys.UI.DomElement.setLocation(element,x,y) 设置element的位置,水平x,垂直y
91 //
92 //Sys.UI.Element.getElementByID==$get
93 //
94 //DomEvent类
95 //Sys.UI.DomEvent的DOM事件相关辅助方法
96 //方法 描述
97 //Sys.UI.DomEvent.AddHandler(element,eventName,handler) 为element添加eventName指定事件的处理函数
98 //Sys.UI.DomEvent.addHandlers(element,events,handlerOwner) 为element添加一系列事件的处理函数。
99 // 其中events参数是一个事件处理函数的字典对象,
100 // handlerOwner参数可选,若指定了该参数,
101 // 那么事件处理函数中的this将指向handlerOwner;
102 // 否则将指向element
103 //Sys.UI.DomEvent.removeHandler(element,eventName,handler) 为element移除eventName指定的事件处理函数
104 //Sys.UI.DomEvent.clearHandlers(element) 为element移除所有通过Sys.UI.DomEvent.addHandler()或
105 // Sys.UI.DomEvent.addHandlers(添加的事件处理函数
106 //stopPropagation() 阻止该DOM事件冒泡传递至父元素
107 //preventDefault() 阻止执行事件处理函数。例如若阻止了a元素的onclick事件,
108 // 那么用户点击将还会引发页面导航
109 //
110 //Sys.UI.DomEvent.addHandler==$addHandler
111 //Sys.UI.DomEvent.addHandlers==$addHandlers
112 //Sys.UI.DomEvent.removeHandler==$removeHandler
113 //Sys.UI.DomEvent.clearHandlers==$clearHandlers
114 //
115 //可以参考的ajax.net客户端框架的文档:http://ajax.asp.net/docs/ClientReference/Sys.UI/DomEventClass/
116
117 //Sys.UI.Bounds类用来 表示某块范围信息 定义了4个字段:x,y,width,height
118 //Sys.UI.Key枚举用来表示健盘按键,参考:http://ajax.asp.net/docs/ClientReference/Sys.UI/KeyEnum/
119 //Sys.UI.MouseButton枚举用来表示鼠标按钮,共有3个值:leftButton,middleButton,rightButton
120 //Sys.UI.Point类用来表示某个位置信息,定义两个字段:x,y
121 //
122 //Sys.StringBuilder类高效操作字符串
123 //Sys.StringBuilder类的常用方法
124 //方法 描述
125 //Sys.StringBuilder(initialText) Sys.StringBuilder的构造方法,
126 // 根据initialText初始字符串创建一个Sys.StringBuilder对象
127 //append(text) 将text添加到该Sys.StringBuilder对象的最后
128 //appendLine(text) 将text添加到该Sys.StringBuilder地象的最后,
129 // 并添加换行符,如果text为空,则只添加换行符
130 //clear() 清除该Sys.StringBuilder对象中所有的现存字符串
131 //isEmpty 判断Sys.StringBuilder对象中是否有字符串
132 //toString(separator) 将该Sys.StrinbBuilder对象中的所有小段字符串拼接起来并返回,
133 // 如果指定了separator参数,那么每个小段字符串之间将插入separator
134 //
135 //
136 //使用Sys.Debug类输出调试信息
137 //方法 描述
138 //Sys.Debug.assert(conditon,message,displayCaller) 如果condition条件为false,则提示message,并在调试器中中断,
139 // 如果displayCaller为true,那么还将显示调用该断方法的函数信息
140 //Sys.Debug.clearTrace() 清除TraceConsole <textarea/>元素中的所有调试信息
141 //Sys.Debug.traceDump(object,name) 将object对象的完整信息输出到调试器以及
142 // TraceConsole<textarea/>元素中,name为可选,表示对象的名称
143 //Sys.Debug.fail(message) 提示message消息,并在调试器中中断
144 //Sys.Debug.trace(text) 将text文本输出到调试器以及TraceConsole<textarea/>中
145 //
146 // if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();
147 //js文件末尾加这句,告诉运行时js文件加栽成功
1 //ajax.net对js的三大扩展:组件component,控件control,行为behavior
2 //1.Sys.Component基类
3 //Sys.Component基类的常用属性
4 //属性 描述
5 // id 获取或设置组件的标识符
6 // isInitialized 判断该组件是否经过初始化
7 // events 获取一个Sys.EventHandlerList对象,表示该组件的所有事件及相应的事件处理函数列表
8 //
9 //Sys.Component基类的常用方法
10 //方法 描述
11 //Sys.Component.create(type,properties,events,references,element) 创建某个类型的组件的实例。
12 // type表示组件的类型;
13 // properties是一个包含组件的属性与属性值的JSON对象;
14 // events是一个包含组件的事件与事件处理函数的JSON对象;
15 // references是一个包含该组件引用的其他组件的JSON对象;
16 // element是与该组件相关联的DOM元素,
17 // 除type参数外,其它参数均可省略。
18 //initialize() 初始化方法,继承类可以重写该方法并实现其自身的初始化逻辑
19 //disponse() 析构方法,继承类可以重写该方法并实现其自身的析构逻辑
20 //
21 //使用示例:创建一个Calendar类型的行为组件
22 Sys.Component.create(
23 AjaxControlToolkit.CalendarBehavior,
24 {
25 'button':$get(),
26 'format':'MM/dd/yyyy',
27 'id','MyTabContainer_startDateCalendarExtender'
28 },
29 null,
30 null,
31 $get('MyTabContainer_startDateTextBox')
32 );
33 //使用示例2:创建一个某自定义控件实例
34 Sys.Component.create(
35 MyControl,
36 {id:'c1',visible:true},
37 {click:showValue},
38 null,
39 $get('button1')
40 );
41 //Sys.Component.create==$create
42 //
43 //
44 //
45 //2.Sys.UI.Control基类 继承自Sys.Component
46 //Sys.UI.Control基类的常用属性
47 // 属性 描述
48 // id 获取或设置控件的标识符
49 // element 获取与该控件相关联的DomElement对象,该DomElement对象封装了实际的DOM元素
50 // parent 获取或设置该控件的父控件,这里的父控件并不是DOM层次结构上的父元素,而是逻辑上的父控件。
51 // 子控件将可以继承父控件的一些属性设定,例如dataContext.
52 // 子控件的冒泡事件(bubble event)也可以传递到其父控件中并在父控件中进行处理
53 // visibilityMode 获取或设置该控件在隐藏时的显示模式,可选枚举值:
54 // Sys.UI.VisibilityMode.collapse代表该控件隐藏时不占用页面空间
55 // Sys.UI.VisibilityMode.hidden代表该控件隐藏时不还占用页面空间
56 // visible 获取或设置一个布尔值,表示该控件是否可见
57 //
58 //Sys.UI.Control基类暴露出来的常用方法
59 //方法 描述
60 //addCssClass(className) 为该控件添加指定的CSS Class
61 //removeCssClass(className) 移除该控件的一个现有CSS Class
62 //toggleCssClass(className) 如果该控件没的旨定的CSS Class 就添加,否则就移除
63 //onBubbleEvent(source,args) 处理该控件的子控件发出的冒泡事件
64 //raiseBubbleEvent(source,args) 调用该方法将会引发该控年所有父控件的onBubbleEvent()方法被自动调用,这样即可实现事件的冒泡
65 var divButton=new Sys.UI.Control($get('divButton'));
66 divButton.get_element().onclick=function(){
67 divButton.toggleCssClass('clicked');
68 }
69 //
70 //Behavior基类 继承自Sys.Component
71 //Sys.UI.Behavior基类的常用静态方法
72 // 方法 描述
73 // Behavior.getBehaviorByName(element,name) 在element指定的DOM元素中寻找名称为name的行为
74 // Behavior.getBehaviorByType(element,type) 在element指定的DOM元素中寻找类型为type的行为
75 // Behavior.getBehaviors(element) 返回应用到element指定的DOM元素上的所有行为
76 //
77 //
78 //DomElement类
79 //方法 描述
80 //Sys.UI.DomElement.getElementByID(id,element) 在element元素的子节点中通过id属性找到并创建相应的Sys.UI.DomElement类,
81 // 若不指定element参数,则默认从文档的根节点document开始搜索
82 //Sys.UI.DomElement.addCssClass(element,className) 为element添加名为className的css class
83 //Sys.UI.DomElement.containsCssClass(element,className) 判断element是否已经使用了className的css class
84 //Sys.UI.DomElement.removeCssClass(element,className) 移除element的className的css class
85 //Sys.UI.DomElement.toogleCssClass(element,className) 如果element上没有添加className的css class就添加上,否则就移除
86 //Sys.UI.DomElement.GetBounds(element) 获取element元素的边界信息,返回值被封装成一个JSON对象
87 // 包括水平位置x,垂直位置y,高度height,宽度width
88 //Sys.UI.DomElement.getLocation(element) 获取element的位置信息,返回被封装成一个JSON对象,
89 // 包括水平位置x和垂直位置y
90 //Sys.UI.DomElement.setLocation(element,x,y) 设置element的位置,水平x,垂直y
91 //
92 //Sys.UI.Element.getElementByID==$get
93 //
94 //DomEvent类
95 //Sys.UI.DomEvent的DOM事件相关辅助方法
96 //方法 描述
97 //Sys.UI.DomEvent.AddHandler(element,eventName,handler) 为element添加eventName指定事件的处理函数
98 //Sys.UI.DomEvent.addHandlers(element,events,handlerOwner) 为element添加一系列事件的处理函数。
99 // 其中events参数是一个事件处理函数的字典对象,
100 // handlerOwner参数可选,若指定了该参数,
101 // 那么事件处理函数中的this将指向handlerOwner;
102 // 否则将指向element
103 //Sys.UI.DomEvent.removeHandler(element,eventName,handler) 为element移除eventName指定的事件处理函数
104 //Sys.UI.DomEvent.clearHandlers(element) 为element移除所有通过Sys.UI.DomEvent.addHandler()或
105 // Sys.UI.DomEvent.addHandlers(添加的事件处理函数
106 //stopPropagation() 阻止该DOM事件冒泡传递至父元素
107 //preventDefault() 阻止执行事件处理函数。例如若阻止了a元素的onclick事件,
108 // 那么用户点击将还会引发页面导航
109 //
110 //Sys.UI.DomEvent.addHandler==$addHandler
111 //Sys.UI.DomEvent.addHandlers==$addHandlers
112 //Sys.UI.DomEvent.removeHandler==$removeHandler
113 //Sys.UI.DomEvent.clearHandlers==$clearHandlers
114 //
115 //可以参考的ajax.net客户端框架的文档:http://ajax.asp.net/docs/ClientReference/Sys.UI/DomEventClass/
116
117 //Sys.UI.Bounds类用来 表示某块范围信息 定义了4个字段:x,y,width,height
118 //Sys.UI.Key枚举用来表示健盘按键,参考:http://ajax.asp.net/docs/ClientReference/Sys.UI/KeyEnum/
119 //Sys.UI.MouseButton枚举用来表示鼠标按钮,共有3个值:leftButton,middleButton,rightButton
120 //Sys.UI.Point类用来表示某个位置信息,定义两个字段:x,y
121 //
122 //Sys.StringBuilder类高效操作字符串
123 //Sys.StringBuilder类的常用方法
124 //方法 描述
125 //Sys.StringBuilder(initialText) Sys.StringBuilder的构造方法,
126 // 根据initialText初始字符串创建一个Sys.StringBuilder对象
127 //append(text) 将text添加到该Sys.StringBuilder对象的最后
128 //appendLine(text) 将text添加到该Sys.StringBuilder地象的最后,
129 // 并添加换行符,如果text为空,则只添加换行符
130 //clear() 清除该Sys.StringBuilder对象中所有的现存字符串
131 //isEmpty 判断Sys.StringBuilder对象中是否有字符串
132 //toString(separator) 将该Sys.StrinbBuilder对象中的所有小段字符串拼接起来并返回,
133 // 如果指定了separator参数,那么每个小段字符串之间将插入separator
134 //
135 //
136 //使用Sys.Debug类输出调试信息
137 //方法 描述
138 //Sys.Debug.assert(conditon,message,displayCaller) 如果condition条件为false,则提示message,并在调试器中中断,
139 // 如果displayCaller为true,那么还将显示调用该断方法的函数信息
140 //Sys.Debug.clearTrace() 清除TraceConsole <textarea/>元素中的所有调试信息
141 //Sys.Debug.traceDump(object,name) 将object对象的完整信息输出到调试器以及
142 // TraceConsole<textarea/>元素中,name为可选,表示对象的名称
143 //Sys.Debug.fail(message) 提示message消息,并在调试器中中断
144 //Sys.Debug.trace(text) 将text文本输出到调试器以及TraceConsole<textarea/>中
145 //
146 // if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();
147 //js文件末尾加这句,告诉运行时js文件加栽成功