xml css htc 的综合运用

来源：作者：出处：巧巧读书 2006-03-12 进入讨论组

访问地址 http://www.qqread.com/xml-soap/q862774601.html

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

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就可以改变所有的页面.数据的结构化将使网站的维护变得异常轻松.

更多内容请看XML详解专题，或进入讨论组讨论。

【深度阅读】相关文章

【收藏此文】【大中小】【打印】【关闭】

较早的文章：利用XMLHTTP技术为Donews Blog添加最新文章列表

较新的文章：学习xhtml的一点教训

xml css htc 的综合运用

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

xml css htc 的综合运用

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月 境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

阳春三月境内境外赏花忙