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参数是一个事件处理函数的字典对象，
           //                                                         handlerOwner参数可选，若指定了该参数，
           //                                                         那么事件处理函数中的this将指向handlerOwner;
           //                                                         否则将指向element
           //Sys.UI.DomEvent.removeHandler(element,eventName,handler) 为element移除eventName指定的事件处理函数
           //Sys.UI.DomEvent.clearHandlers(element)                   为element移除所有通过Sys.UI.DomEvent.addHandler()或
           //                                                         Sys.UI.DomEvent.addHandlers(添加的事件处理函数
           //stopPropagation()                                        阻止该DOM事件冒泡传递至父元素
           //preventDefault()                                         阻止执行事件处理函数。例如若阻止了a元素的onclick事件，
           //                                                         那么用户点击将还会引发页面导航
           //
           //Sys.UI.DomEvent.addHandler==$addHandler
           //Sys.UI.DomEvent.addHandlers==$addHandlers
           //Sys.UI.DomEvent.removeHandler==$removeHandler
           //Sys.UI.DomEvent.clearHandlers==$clearHandlers
           //
           //可以参考的ajax.net客户端框架的文档：http://ajax.asp.net/docs/ClientReference/Sys.UI/DomEventClass/
           
           //Sys.UI.Bounds类用来 表示某块范围信息 定义了4个字段：x,y,width,height
           //Sys.UI.Key枚举用来表示健盘按键,参考：http://ajax.asp.net/docs/ClientReference/Sys.UI/KeyEnum/
           //Sys.UI.MouseButton枚举用来表示鼠标按钮，共有3个值：leftButton,middleButton,rightButton
           //Sys.UI.Point类用来表示某个位置信息，定义两个字段：x,y
           //
           //Sys.StringBuilder类高效操作字符串
           //Sys.StringBuilder类的常用方法
           //方法                             描述
           //Sys.StringBuilder(initialText)       Sys.StringBuilder的构造方法，
           //                                     根据initialText初始字符串创建一个Sys.StringBuilder对象
           //append(text)                         将text添加到该Sys.StringBuilder对象的最后
           //appendLine(text)                     将text添加到该Sys.StringBuilder地象的最后，
           //                                     并添加换行符，如果text为空，则只添加换行符
           //clear()                              清除该Sys.StringBuilder对象中所有的现存字符串
           //isEmpty                              判断Sys.StringBuilder对象中是否有字符串
           //toString(separator)                  将该Sys.StrinbBuilder对象中的所有小段字符串拼接起来并返回，
           //                                     如果指定了separator参数，那么每个小段字符串之间将插入separator
           //
           //
           //使用Sys.Debug类输出调试信息
           //方法                                            描述
           //Sys.Debug.assert(conditon,message,displayCaller)     如果condition条件为false,则提示message,并在调试器中中断，
           //                                                     如果displayCaller为true，那么还将显示调用该断方法的函数信息
           //Sys.Debug.clearTrace()                               清除TraceConsole <textarea/>元素中的所有调试信息
           //Sys.Debug.traceDump(object,name)                     将object对象的完整信息输出到调试器以及
           //                                                     TraceConsole<textarea/>元素中，name为可选，表示对象的名称
           //Sys.Debug.fail(message)                              提示message消息，并在调试器中中断
           //Sys.Debug.trace(text)                                将text文本输出到调试器以及TraceConsole<textarea/>中
           //
           // if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();
           //js文件末尾加这句，告诉运行时js文件加栽成功