位置：首页>> 网络编程>> 网页设计>> xml css htc 的综合运用

xml css htc 的综合运用

作者：hutia　来源：蓝色理想　发布时间：2008-10-10 11:41:00　

标签：css,窗口,xml,htc

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

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

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

让我们来看一些例子

用层模拟小窗口的代码:

运行代码框

<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>

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

//抱歉这段代码不能直接执行,因为我没有地方放置需要引用的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"://细线selectelement.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;//设置idelement.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>

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

投稿

xml css htc 的综合运用

猜你喜欢