xml css htc 的综合运用

　xml css htc 的综合运用

作者：hutia　时间： 2006-02-07　文档类型：原创　来自：蓝色理想

这几个技术都不是很新了,现在还拿出来说也就是为了教教新手了呵呵,各位大虾多多指正.

css之所以出现就是为了实现数据与数据的表现形式的分离, xml则是为了无限扩展数据结构本身的限制, htc(更准确的说是behavior)进一步的把代码与表现形式分离开了

之所以要把这些已经出现了若干年的东西重新翻出来说,是因为看到最近的xHTML验证似乎比较热,其实xHTML的目的也就是更好的向XML过渡,形成一种标准化的数据形式.数据与数据表达方式,数据表达方式中的行为与样式的分离正是为了更有效率的组织数据.

让我们来看一些例子

下面的代码来自:
www.blueidea.com/bbs/NewsDetail.asp?&id=2440917

用层模拟小窗口的代码:

运行代码框
<html> <head> <title>_xWin</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Description" CONTENT="http://www.51windows.Net"> <style type='text/css'>  </style> <script language=JScript>  </script> <script language='JScript'>  </script> </head> <base target="_blank"> <body onselectstart='return false' oncontextmenu='return false' > <a onclick="ShowHide('1',null);return false;" href="">窗口1</a> <a onclick="ShowHide('2',null);return false;" href="">窗口2</a> <a onclick="ShowHide('3',null);return false;" href="">窗口3</a> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

可以看到,这段内容里同时有需要表达的数据,数据样式和样式的行为模式,对于只关心数据本身的修改者来说,如此多的代码会造成阅读上的困扰.让我们用前面提到的技术重整一下

//抱歉这段代码不能直接执行,因为我没有地方放置需要引用的CSS和HTC文件

<html xmlns:x >
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>xWin HTC Demo
</title>
<link rel="stylesheet" type="text/css" href="sp/css/global.css">
</head>
<body>
<x:win width=200 top=300 left=100 title="我就是传说中那个超长的窗口标题" id="win1" oncontentready="alert();">
我就是传说中那个超长的窗口标题我就是传说
中那个超长的窗口标题我就是传说中那个超长的窗口
个超长的窗口标题我就是传说中那个超长的窗口标题
</x:win>
<x:win width=200 top=70 left=140 title="我就是传说中那个超长的窗口标题" id="win2">
我是窗口2<br>我是窗口2<br>我是窗口2<br>
我是窗口2<br>我是窗口2<br>我是窗口2<br>
</x:win>
<a href="javascript:win1.ShowHide();void(0);">win1</a>
<a href="javascript:win2.ShowHide();void(0);">win2</a>
</body>
</html>

这时候大家会很高兴的发现,页面变得如此简单,代码中基本上只有数据本身,几乎完全没有JS了,那么JS在哪里哪?下面是CSS文件:sp/css/global.css

x\:* {
behavior:url(sp/htc/global.htc);
font-Size:13px;
line-Height:13px;
background-Color:white;
color:#444;
}

数据的行为也算作数据的表达样式之一呵呵,那么我们再看看htc文件

//这个代码是我自己的一个比较大的htc中摘录出来的,还包括了一个细线select

运行代码框
<html> <head> <public:component> <public:attach event="oncontentready" onevent="doInit()" /> </public:component>  <script> //**Property Area****** //**Event Area ****** function doInit(){ switch(element.nodeName.toLowerCase()){ case "select"://细线select element.innerHTML="<select>"+element.innerHTML+"</select>"; element.children[0].mergeAttributes(element); element.style.position="absolute"; element.style.overflow="hidden"; element.style.border="#000 1px solid"; element.children[0].style.margin=-2; break; case "win": case "window"://初始化窗口 initXWin(); break; } } function doOver(){} function doOut(){} //**Method Area****** //**Private Functions*** </script>  <script> function initXWin(){ //设置全局变量 element.x0=0,element.y0=0,element.x1=0,element.y1=0; element.offx=6,element.offy=6; element.moveable=false; element.hover='orange',element.normal='#336699';//color; element.document.index=isNaN(element.document.index)?10000:parseInt(element.document.index)+1;//z-index; //设置id element.id=element.id?element.id:"xWin_"+(new Date()).getTime()+parseInt(Math.random()*100000); //记录显示风格 var tempDisplay=element.style.display; //改变显示风格 element.style.display="block"; //设置窗口变量 element.w=isNaN(element.width)?element.offsetWidth+10:parseInt(element.width); element.h=isNaN(element.height)?element.offsetHeight+30:parseInt(element.height); element.l=isNaN(element.left)?element.offsetLeft:parseInt(element.left); element.t=isNaN(element.top)?element.offsetTop:parseInt(element.top); element.z=element.document.index; element.title=element.title?element.title:"Untitled Window"; element.content=element.innerHTML; //清空窗口 element.innerHTML=""; //设置窗口样式 with(element.style){ position="absolute"; width=element.w; height=element.h; left=element.l; top=element.t; zIndex=element.z; backgroundColor=element.normal; color=element.normal; cursor="default"; border=element.normal+" 2px solid"; padding=0; fontSize=12; overflow="hidden"; } //设置窗口方法 element.ShowHide=function(dis){ var bdisplay = (dis==null)?((this.style.display=="none")?"":"none"):dis; this.style.display = bdisplay; this.nextSibling.style.display = bdisplay; } //窗口鼠标按下事件 element.onmousedown=function(){ if(this.style.zIndex!=this.document.index){ this.document.index+=2; var idx = this.document.index; this.style.zIndex=idx; this.nextSibling.style.zIndex=idx-1; } } //设置窗口标题 element.oTitle=element.document.createElement("div"); //设置窗口标题样式 with(element.oTitle.style){ backgroundColor=element.normal; color="#FFFFFF"; width=element.w-4; height=20; } //窗口标题鼠标按下事件 element.oTitle.onmousedown=function(){ if(event.button==1){ //锁定标题栏; this.setCapture(); //定义对象; var win = this.parentNode; var sha = win.nextSibling; //记录鼠标和层位置; element.x0 = event.clientX; element.y0 = event.clientY; element.x1 = parseInt(win.style.left); element.y1 = parseInt(win.style.top); //记录颜色; element.normal = this.style.backgroundColor; //改变风格; this.style.backgroundColor = element.hover; win.style.borderColor = element.hover; this.nextSibling.style.color = element.hover; sha.style.left = element.x1 + element.offx; sha.style.top = element.y1 + element.offy; element.moveable = true; } } //窗口标题鼠标移动事件 element.oTitle.onmousemove=function(){ if(element.moveable){ var win = this.parentNode; var sha = win.nextSibling; win.style.left = element.x1 + event.clientX - element.x0; win.style.top = element.y1 + event.clientY - element.y0; sha.style.left = parseInt(win.style.left) + element.offx; sha.style.top = parseInt(win.style.top) + element.offy; } } //窗口标题鼠标弹起事件 element.oTitle.onmouseup=function(){ if(element.moveable){ var win = this.parentNode; var sha = win.nextSibling; var msg = this.nextSibling; win.style.borderColor = element.normal; this.style.backgroundColor = element.normal; msg.style.color = element.normal; sha.style.left = this.parentNode.style.left; sha.style.top = this.parentNode.style.top; this.releaseCapture(); element.moveable = false; } } //设置窗口标题内容 element.oTitleContent=element.document.createElement("span"); with(element.oTitleContent.style){ width=element.w-4-12*2; height=20; paddingLeft=3; paddingTop=2; margin=0; wordBreak="keep-all"; textOverflow="ellipsis"; overflow="hidden"; } element.oTitleContent.innerText=element.title; //设置窗口标题最小化按钮 element.oTitleMButton=element.document.createElement("span"); with(element.oTitleMButton.style){ width=12; height=20; margin=0; fontFamily="webdings"; } element.oTitleMButton.innerText=0; //设置窗口标题最小化按钮点击事件 & 设置窗口标题双击事件 element.oTitleMButton.onclick=element.oTitle.ondblclick=function(){ obj=this.parentNode.nodeName.toLowerCase()=="div"?this:this.childNodes[1]; var win = obj.parentNode.parentNode; var sha = win.nextSibling; var tit = obj.parentNode; var msg = tit.nextSibling; var flg = msg.style.display=="none"; if(flg){ win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height; msg.style.display = "block"; obj.innerHTML = "0"; }else{ win.style.height = parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height; obj.innerHTML = "2"; msg.style.display = "none"; } } //设置窗口标题关闭按钮 element.oTitleCButton=element.document.createElement("span"); with(element.oTitleCButton.style){ width=12; height=20; margin=0; fontFamily="webdings"; } element.oTitleCButton.innerText="r"; element.oTitleCButton.onclick=function(){this.parentNode.parentNode.ShowHide();} //设置窗口内容 element.oContent=element.document.createElement("div"); with(element.oContent.style){ width="100%"; height=element.h-20-4; margin=0; backgroundColor="#FFFFFF"; padding=3; wordBreak="break-all"; overflow="auto"; } element.oContent.innerHTML=element.content; //设置窗口阴影 element.oShadow=element.document.createElement("div"); with(element.oShadow.style){ position="absolute"; width=element.w; height=element.h; left=element.l; top=element.t; zIndex=element.z-1; backgroundColor="#000000"; filter="alpha(opacity=40);"; } element.oTitle.appendChild(element.oTitleContent); element.oTitle.appendChild(element.oTitleMButton); element.oTitle.appendChild(element.oTitleCButton); element.appendChild(element.oTitle); element.appendChild(element.oContent); element.insertAdjacentElement("AfterEnd",element.oShadow); //恢复显示风格 element.style.display=tempDisplay; } </script> </head> <body> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

至此我们彻底的将三者分开,对于并不精通脚本语言的页面设计者,他可以随意的修改htm页面而不用再担心会引起什么意料不到的后果,只需要用<x:win>就可以简单的作出一个窗口,就好像这是一个普通的HTML标记一样.以后如果希望修改使得窗口不能拖动,也只需要修改一个htc就可以改变所有的页面.数据的结构化将使网站的维护变得异常轻松.

经典讨论帖：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2445905

出处：蓝色理想
责任编辑：moby

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

建立自己的操作标准

作者文章

MyHTML Player release v1.1


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule