FloatingBehavior补遗:Location属性与move事件
2006-09-26 20:51
344 查看
FloatingBehavior在
官方文档中的例子似乎只有对其最简单使用方式的介绍,却没有对其Location属性和move事件的说明。虽然它们非常简单,我想可能还是需要了解一下
的。FloatingBehavior的Class Library在本人前面的文章《补充部分官方文档里没有的Client Library以及代码提示Schema更新》中有说明。我们从一个简单的例子来看这两个成员:
首先,我们定义一些CSS类:
<style>
body { font-family: Arial; font-size: 12px; }
#handle { background-color: #EEEEEE; }
#floatDiv { width: 100px; border: solid 1px black; height: 100px;}
.red {color: red;}
</style>
注意在使用FloatingBehavior时需要引入AtlasUIDragDrop这个Framework Script:
<atlas:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
</Scripts>
</atlas:ScriptManager>
然后是所需的HTML元素:
<div style="height:300px; border:solid 1px black;">
<div id="location">Drop to change color.</div>
<div id="floatDiv">
<div id="handle">Handle</div>
<div>blablabla</div>
</div>
</div>
其中最外层的高300px的容器,这个是拖动的有效区域。只有在页面范围内的拖动才会有效,这也就是为什么有朋友会遇到在自己的例子中拖动后会回到原处的情况,这是因为简单的例子页面区域就是很小的一块,所以被拖动的元素无法停留。
接下来就是最重要的Atlas Script了:
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="location">
<bindings>
<binding dataContext="floating" dataPath="location" property="text" />
</bindings>
</label>
<control id="floatDiv">
<behaviors>
<floatingBehavior id="floating" handle="handle" location="100, 50">
<move>
<invokeMethod target="location" method="toggleCssClass">
<parameters className="red" />
</invokeMethod>
</move>
</floatingBehavior>
</behaviors>
</control>
</components>
</page>
</script>
FloatingBehavior的move事件会在浮动元素落在有效范围内(上面的例子里则是最外层高300px的div)触发,触发时
id为location的div的前景色会在红与白之间切换。而FloatingBehavior的Location属性以字符串“x,
y”形式设定了浮动元素的坐标,在set_Location内部Behavior会调用Sys.UI.Control.setLocation“静态”方
法来设置浮动元素的位置。自然,我们能通过binding来访问这个属性,可以看到在id为location的div里会根据当前behavior的
location当前值而改变。如果将浮动元素拖动至有效范围外的话,那么它就会回到原处,move事件也不会触发。
很自然,move事件除了使用Xml Element形式调用Action之外,也能以填写Xml Attribute来调用javascript方法。先修改上面一行Atlas Script代码以Xml Attribute方法调用comfirmDrop函数:
<floatingBehavior id="floating" handle="handle" location="100, 50" move="confirmDrop">
...
</floatingBehavior>
再增加一个javascript函数:
<script language="javascript">
function confirmDrop(sender, args)
{
var msg = "Do you really want to drop the control at " + sender.get_location() + "?";
if (!confirm(msg))
{
args.set_canceled(true);
}
}
</script>
在这里,sender就是那个当前的FloatingBehavior对象,而args就是大名鼎鼎的
Sys.CancelEventArgs!因此我们能够相当方便的使用args.set_canceled(true)来取消这次移动。在示范中也可以很
方便的看出,如果用户在Confirm Dialog中选择了“Cancel”,那么漂浮的控件就会回到原处。
这个就是对FloatingBehavior的Location属性和move事件的介绍,可以看出,有了binding,Declarative Syntax本身又是多么的优雅。有了Atlas,编写javascript代码有多么的轻松。
本文所用例子的源代码,可以点击这里下载。如果您希望查看效果,请点击这里。
官方文档中的例子似乎只有对其最简单使用方式的介绍,却没有对其Location属性和move事件的说明。虽然它们非常简单,我想可能还是需要了解一下
的。FloatingBehavior的Class Library在本人前面的文章《补充部分官方文档里没有的Client Library以及代码提示Schema更新》中有说明。我们从一个简单的例子来看这两个成员:
首先,我们定义一些CSS类:
<style>
body { font-family: Arial; font-size: 12px; }
#handle { background-color: #EEEEEE; }
#floatDiv { width: 100px; border: solid 1px black; height: 100px;}
.red {color: red;}
</style>
注意在使用FloatingBehavior时需要引入AtlasUIDragDrop这个Framework Script:
<atlas:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
</Scripts>
</atlas:ScriptManager>
然后是所需的HTML元素:
<div style="height:300px; border:solid 1px black;">
<div id="location">Drop to change color.</div>
<div id="floatDiv">
<div id="handle">Handle</div>
<div>blablabla</div>
</div>
</div>
其中最外层的高300px的容器,这个是拖动的有效区域。只有在页面范围内的拖动才会有效,这也就是为什么有朋友会遇到在自己的例子中拖动后会回到原处的情况,这是因为简单的例子页面区域就是很小的一块,所以被拖动的元素无法停留。
接下来就是最重要的Atlas Script了:
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="location">
<bindings>
<binding dataContext="floating" dataPath="location" property="text" />
</bindings>
</label>
<control id="floatDiv">
<behaviors>
<floatingBehavior id="floating" handle="handle" location="100, 50">
<move>
<invokeMethod target="location" method="toggleCssClass">
<parameters className="red" />
</invokeMethod>
</move>
</floatingBehavior>
</behaviors>
</control>
</components>
</page>
</script>
FloatingBehavior的move事件会在浮动元素落在有效范围内(上面的例子里则是最外层高300px的div)触发,触发时
id为location的div的前景色会在红与白之间切换。而FloatingBehavior的Location属性以字符串“x,
y”形式设定了浮动元素的坐标,在set_Location内部Behavior会调用Sys.UI.Control.setLocation“静态”方
法来设置浮动元素的位置。自然,我们能通过binding来访问这个属性,可以看到在id为location的div里会根据当前behavior的
location当前值而改变。如果将浮动元素拖动至有效范围外的话,那么它就会回到原处,move事件也不会触发。
很自然,move事件除了使用Xml Element形式调用Action之外,也能以填写Xml Attribute来调用javascript方法。先修改上面一行Atlas Script代码以Xml Attribute方法调用comfirmDrop函数:
<floatingBehavior id="floating" handle="handle" location="100, 50" move="confirmDrop">
...
</floatingBehavior>
再增加一个javascript函数:
<script language="javascript">
function confirmDrop(sender, args)
{
var msg = "Do you really want to drop the control at " + sender.get_location() + "?";
if (!confirm(msg))
{
args.set_canceled(true);
}
}
</script>
在这里,sender就是那个当前的FloatingBehavior对象,而args就是大名鼎鼎的
Sys.CancelEventArgs!因此我们能够相当方便的使用args.set_canceled(true)来取消这次移动。在示范中也可以很
方便的看出,如果用户在Confirm Dialog中选择了“Cancel”,那么漂浮的控件就会回到原处。
这个就是对FloatingBehavior的Location属性和move事件的介绍,可以看出,有了binding,Declarative Syntax本身又是多么的优雅。有了Atlas,编写javascript代码有多么的轻松。
本文所用例子的源代码,可以点击这里下载。如果您希望查看效果,请点击这里。
相关文章推荐
- FloatingBehavior补遗:Location属性与move事件
- FloatingBehavior补遗:Location属性与move事件
- 便捷替换背景色与其他属性onmousemove="javascript:this.bgColor='#FCFDEE';",当DOM事件触发时this代表触发事件的DOM对象,所以可以使用对应DOM对象的属性和方法。
- html5鼠标事件HTML onmousedown,up,over,out,move 事件属性
- 第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式
- Delphi中webbrowser的document 对象的属性方法事件
- 如何得到 引起onclick事件的控件(这里是checkbox)的id,name等属性
- window.location 中包含的属性和方法
- 在asp.net中为Web用户控件添加属性和事件
- VB中WinSock控件的属性、方法、事件及应用
- 鼠标事件的各种属性
- UILabel设置属性字符串,可以增加点击事件点击
- javascript事件;event对象的属性
- control事件的重写,以一个ListMOve为例
- c# BackgroundWorker组件介绍(属性、方法、事件)
- HTML5--新增的标签、属性和事件
- ListView控件属性、方法、事件
- Uploadify 3.2 参数属性、事件、方法函数详解
- 02 js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
- HTML5 <audio>/<vedio> 标签属性,方法,事件汇总