您的位置:首页 > Web前端 > HTML

一步一步学Silverlight 2系列(20):如何在Silverlight中与HTML DOM交互(下)

2012-02-01 01:06 597 查看
======================================================

注:本文源代码点此下载

======================================================

一步一步学silverlight 2系列(20):如何在silverlight中与html dom交互(下)
概述
silverlight 2 beta 1版本发布了,无论从runtime还是tools都给我们带来了很多的惊喜,如支持框架语言visual basic, visual c#, ironruby, ironpython,对json、web service、wcf以及sockets的支持等一系列新的特性。《一步一步学silverlight 2系列》文章将从silverlight
2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入silverlight 2开发。
silverlight中内置了对于html、客户端脚本等的支持,本文为如何在silverlight 2中与html dom交互第二部分。在第一部分中主要介绍了如何访问和修改已有的html dom,我们还可以完全创建一个新的dom元素或者移除一个已有的dom元素,除此之外,我们还可以为dom元素添加事件处理。
创建dom元素
首先我们来看如何创建一个新的dom元素,最终的效果如下,当我们在文本框中输入文字后,单击创建,将在上面的区域中创建一个li元素。



先来定义一下html页面,甚至silverlight插件的高度。
div id="parentdiv">
ul id="list">
ul>
div>
divstyle="height:200px;">
asp:silverlight id="xaml1" runat="server"
source="~/clientbin/terrylee.silverlightaccessdom2.xap"
version="2.0" width="100%" height="200px" />
div>
并且为上面的div定义一个简单的样式,以示与silverlight区分
#parentdiv
{
background:#fcdfb3;
border:solid 1px #ff9900;
width:500px;
height:100px;
margin-bottom:20px;
}
在silverlight中进行界面布局,xaml如下:
canvas background="#cdfcae">
textblock text="silverlight accessing the html dom" foreground="red"
canvas.top="10" canvas.left="30" fontsize="18">
textblock>
watermarkedtextbox x:name="input" watermark="请在这里输入"
height="40" width="300"
canvas.left="30" canvas.top="50">
watermarkedtextbox>
button x:name="createbutton" background="red"
height="40" width="100" content="创 建"
canvas.top="50" canvas.left="350"
click="createbutton_click">
button>
canvas>
编写创建按钮的代码,首先获取到要往里面添加元素的父元素,即我们定义的ul:
htmlelement parent = htmlpage.document.getelementbyid("list");
创建一个新的元素li,并设置属性
htmlelement child = htmlpage.document.createelement("li");
child.setattribute("innertext", this.input.text);
添加新元素到parent中
parent.appendchild(child);
完整的代码如下:
private void createbutton_click(object sender, routedeventargs e)
{
htmlelement parent = htmlpage.document.getelementbyid("list");
htmlelement child = htmlpage.document.createelement("li");
child.setattribute("innertext", this.input.text);
parent.appendchild(child);
}
运行后创建第一个元素



再次创建一个



移除dom元素
既然可以创建元素,对应的也可以删除元素,我们在页面上放上几个
元素,然后输入id进行删除。代码如下:
private void deletebutton_click(object sender, routedeventargs e)
{
htmlelement parent = htmlpage.document.getelementbyid("list");
htmlelement child = htmlpage.document.getelementbyid(this.input.text);
parent.removechild(child);
}
运行后界面上有三个



删除其中一个



为dom注册事件
除了添加和移除dom元素外,我们还可以为dom元素附加事件,在下面的例子中我们将通过silverlight动态创建一个dom元素,并未它注册单击事件,单击时修改silverlight中的矩形背景色。先准备相关的html。
div id="parent">
div>
divstyle="height:200px;">
asp:silverlight id="xaml1" runat="server"
source="~/clientbin/terrylee.silverlightaccessingdom3.xap"
version="2.0" width="100%" height="200px" />
div>
并且定义两个样式,其中newstyle我们将在silverlight中为新添加的a元素使用。
#parent
{
background:#fcdfb3;
border:solid 1px #ff9900;
width:500px;
height:100px;
margin-bottom:20px;
}
.newstyle
{
background:#0099ff;
border:solid 1px #0000ff;
}
做一个简单的界面,放置一个按钮和矩形:
canvas background="#cdfcae">
textblock text="silverlight accessing the html dom" foreground="red"
canvas.top="10" canvas.left="30" fontsize="18">
textblock>
rectangle x:name="result" height="40" width="300" fill="red"
canvas.left="30" canvas.top="50"
radiusx="5" radiusy="5">
rectangle>
button x:name="addbutton" background="red"
height="40" width="100" content="添 加"
canvas.top="50" canvas.left="350"
click="addbutton_click">
button>
canvas>
添加dom元素,创建一个a元素,并为它设置属性,其中用cssclass来定义它的样式:
htmlelement parent = htmlpage.document.getelementbyid("parent");
htmlelement button = htmlpage.document.createelement("a");
button.setattribute("innertext", "改变silverlight中的颜色");
button.setattribute("href","#");
button.cssclass = "newstyle";
parent.appendchild(button);
为a元素附加onclick事件,htmlelement提供了attachevent方法用来附加事件,使用泛型的eventhandler,在a元素单单击时我们改变silverlight中的矩形填充色和边框。
button.attachevent("onclick", new eventhandlerhtmleventargs>(button_click));
void button_click(object sender, htmleventargs e)
{
result.stroke = new solidcolorbrush(colors.black);
result.fill = new solidcolorbrush(colors.green);
result.strokethickness = 2;
}
完整的代码如下:
private void addbutton_click(object sender, routedeventargs e)
{
htmlelement parent = htmlpage.document.getelementbyid("parent");
htmlelement button = htmlpage.document.createelement("a");
button.setattribute("innertext", "改变silverlight中的颜色");
button.setattribute("href","#");
button.cssclass = "newstyle";
parent.appendchild(button);
button.attachevent("onclick", new eventhandlerhtmleventargs>(button_click));
}
void button_click(object sender, htmleventargs e)
{
result.stroke = new solidcolorbrush(colors.black);
result.fill = new solidcolorbrush(colors.green);
result.strokethickness = 2;
}
运行一下看看效果如何,起始界面



添加新元素a



单击改变矩形的背景颜色



htmlelement也提供了detachevent方法,可以取消注册事件。
结束语
本文简单介绍了如何在silverlight中添加和移除dom元素,以及为dom元素添加、取消事件处理程序。
下一篇:一步一步学silverlight 2系列(21):如何在silverlight中调用javascript
作者:terrylee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
标签:
silverlight
绿色通道:好文要顶关注我收藏该文与我联系



posted @ 2008-03-11 19:00
terrylee 阅读(14256)
评论(40)编辑
收藏
发表评论
1934645
回复 引用 查看
#1楼 2008-03-11 19:41 clark zheng

好快呀,佩服勤奋的人!
回复 引用 查看
#2楼 2008-03-11 19:45 q.lee.lulu

好快啊..佩服!!
回复 引用 查看
#3楼[楼主] 2008-03-11 19:46 terrylee

@clark zheng
@q.lee.lulu
谢谢两位的支持,呵呵:)
回复 引用 查看
#4楼 2008-03-11 19:48 阿布

我在想要是silverlight支持自定义右键菜单就好了。terrylee英语好帮提到开发组。呵呵
回复 引用 查看
#5楼[楼主] 2008-03-11 19:50 terrylee

@阿布
支持自定义右键菜单啊,估计2.0是不会提供了,呵呵:)
回复 引用
#6楼 2008-03-11 21:03 kains[未注册用户]
估计可以用flex中屏蔽右键的方式搞定 :)
回复 引用
#7楼 2008-03-11 21:10 kains[未注册用户]
不知道1000行的表格在客户端滚动效率怎样,比较关心这个。其他的东西反倒是其次的。因为1.0的客户端性能比较差所有没有选择sl。
回复 引用 查看
#8楼[楼主] 2008-03-11 22:04 terrylee

@kains
:)
回复 引用 查看
#9楼 2008-03-11 22:19 菜菜灰

如果不在sliverlight里建button.attachevent("onclick", new eventhandler(button_click)); 事件,在客户端怎么去操作silverlight里面的元素。
回复 引用 查看
#10楼[楼主] 2008-03-11 22:33 terrylee

@菜菜灰
明天即将发布这部分内容,敬请期待^_^
回复 引用 查看
#11楼 2008-03-11 22:58 阿布

这里也是个不错的关于silverlight学习的blog,不过讲的要比较深一些的内容
http://www.wilcob.com/wilco/view.aspx
回复 引用 查看
#12楼[楼主] 2008-03-11 23:28 terrylee

@阿布
谢谢推荐,有空看看,呵呵:)
回复 引用 查看
#13楼 2008-03-12 01:42 aspnetx

现在忙得只有时间看了,难得抽出点时间赶紧来顶一下.佩服terrylee的勤奋.
回复 引用 查看
#14楼[楼主] 2008-03-12 08:30 terrylee

@aspnetx
多谢支持:)
回复 引用 查看
#15楼 2008-03-12 09:28 一瞬间

--引用--------------------------------------------------
菜菜灰: 如果不在sliverlight里建button.attachevent("onclick", new eventhandler(button_click)); 事件,在客户端怎么去操作silverlight里面的元素。
--------------------------------------------------------
你可以使用silverlight2.0之前的javascript的方法来操作silverlight里面的元素,用sender.gethost().content.findname("yourname")就可以获取到silverlight里面的元素,通过在createsilverlight()函数中的onload事件中绑定对应的事件。
回复 引用 查看
#16楼[楼主] 2008-03-12 09:38 terrylee

@一瞬间
现在貌似不用这么麻烦了,直接可以在javascript中调用silverlight中的.net代码:)
回复 引用
#17楼 2008-03-12 17:11 的[未注册用户]
似的发射方式
回复 引用
#18楼 2008-03-12 17:13 shiyong[未注册用户]
我也是 silverlight 爱好者,推荐一个网站,很不错的 ,叫 一元居
网址是 www.1yuanju.cn ,里面有很多的 silverlight 教程!
大家也可以到那里 交流一下!!
回复 引用 查看
#19楼[楼主] 2008-03-12 18:18 terrylee

@的
?
这是什么意思呢?:)
回复 引用 查看
#20楼 2008-10-10 18:46 threeg

div的innertext 的属性设置 ,,我怎么没有反映?取这个属性 不行!??
回复 引用
#21楼 2008-11-09 01:31 冻结[未注册用户]
@threeg
system.windows.browser.htmlelement element = system.windows.browser.htmlpage.document.getelementbyid("div1");
string s= element.getattribute("innertext");
这样去取,
回复 引用 查看
#22楼 2008-11-11 09:45 threeg

@冻结
我是这样取得。。好像在firefox里面不行!!!哈哈!innertext换成 innerhtml可以!!很奇怪!
回复 引用 查看
#23楼[楼主] 2008-11-12 11:15 terrylee

@threeg
各种浏览器之间的差异……
回复 引用 查看
#24楼 2009-02-04 22:44 emanlee

源代码 (silverlight 2.0 正式版)
http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.htmlanddom_ii_1.rar
http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.htmlanddom_ii_2.rar
http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.htmlanddom_ii_3.rar
回复 引用
#25楼 2009-05-05 16:09 lovesilverlight[未注册用户]
请教一下:
在添加事件时:使用了
button.attachevent("onclick", new eventhandler(button_click));
为什么要使用new eventhandler(button_click)这个委托
而不直接使用
button.attachevent("onclick", new eventhandler(button_click));
这两个委托在这里的差别是什么呢?
使用第2个委托也能正常运行代码,为什么要使用第一个委托呢?
回复 引用 查看
#26楼 2009-05-06 11:10 冰碟

李大哥,请教个问题:
我新建的元素,比如:
htmlelement parent = htmlpage.document.getelementbyid("list");
htmlelement child = htmlpage.document.createelement("li");
child.setattribute("innertext", this.txtinput.text);
parent.appendchild(child);
怎么删除呢?
用下面的代码是不行的,好像是找不到id
htmlelement parent = htmlpage.document.getelementbyid("list");
htmlelement child = htmlpage.document.getelementbyid(this.txtinput1.text);
parent.removechild(child);
问题也就是,我怎么得到我刚刚添加的元素的id?
回复 引用 查看
#27楼 2009-05-06 11:28 冰碟

还有一个问题,为什么我创建一个元素a就添加不到div(parent)里面,创建一个button就可以?
回复 引用 查看
#28楼 2009-11-12 18:38 殷良胜

引用冰碟:李大哥,请教个问题:
我新建的元素,比如:
htmlelement parent = htmlpage.document.getelementbyid("list");
htmlelement child = htmlpage.document.createelement("li");
child.setattribute("innertext", this.txtinput.text);
parent.appendchild(child);
怎么删除呢?
用下面的代码是不行的,好像是找不到id
htmlelement parent = htmlpage.document.getelementbyid("list");
htmlelement child = htmlpage.document.getelementbyid(this.txtinput1.text);
parent.removechild(child);
问题也就是,我怎么得到我刚刚添加的元素的id?
htmlelement elep = htmlpage.document.getelementbyid("list");
htmlelement elec = htmlpage.document.getelementsbytagname(this.textbox2.text)[0] as htmlelement;
elep.removechild(elec);
因为在创建li元素时未指定id,所以删除时可以借助htmlpage.document.getelementsbytagname获取该元素的集合,然后你也可以动态的指定需要删除哪个元素,我这里写的是每次都删除第一个,你可以根据情况再定。
回复 引用 查看
#29楼 2009-11-12 18:42 殷良胜

引用冰碟:还有一个问题,为什么我创建一个元素a就添加不到div(parent)里面,创建一个button就可以?
//这是一个id为parentdiv的div元素 获取之 可以将a添加到这个div里面
htmlelement elep = htmlpage.document.getelementbyid("parentdiv");
htmlelement a = htmlpage.document.createelement("a");
a.setattribute("innertext", "改变颜色");
a.setattribute("href", "#");
a.cssclass = "newsstyle";
elep.appendchild(a);
你李大哥的这个demo是没有多大问题的 呵呵
回复 引用 查看
#30楼 2010-04-27 19:52 mjsky

谢谢楼主
回复 引用 查看
#31楼 2010-08-05 14:27 pengxiaojun

@threeg
在ff中用 textcontent属性
element.setattribute("txtcontent","text content")
回复 引用 查看
#32楼 2010-10-13 15:16 小猫呢0.0

我这innertext和innerhtml都不可以,没有反映。。
回复 引用 查看
#33楼 2010-10-14 15:36 heiyumars

没问题,一切正常。
就在删除的时候耽误了。
document.getelementsbytagname("li")返回的是当前页面中
元素组成的数组。
3q lz :)!
注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页
首页博问闪存新闻园子招聘知识库
最新it新闻:
·ios 5.1 beta3文件预示未来 siri有可能支持 ipad和 ipod touch
·android平台12月广告浏览份额51.6% 超越ios
·测试版ios源代码显示ipad 3或将支持siri
·斯蒂芬·霍金的新电脑
·京东商城2.95亿竞得北京商业地一块
»
更多新闻...
最新知识库文章:
·javascript 面向对象编程
·持续集成之“everything is code”
·持续集成之“软件自我识别”
·持续集成之戏说check-in dance
·什么是闭包。

我的理解
»
更多知识库文章...



china-pub 2011秋季教材巡展
china-pub 计算机绝版图书按需印刷服务

======================================================

在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定
这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐