xml css htc 的综合运用－用层模拟小窗口

E-file：Cary

Cary的最新文章：

首页--文章内容

www.fh888.com 2006-4-6 8:15:58

媒体：蓝色理想作者：hutia
发布：Cary

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

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>

[运行代码]

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

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

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

【声明】网页天堂刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何投资建议。转载请注明出处。

我也说两句

游客于2007-8-3 10:13:34写道：

Hello! Good Site! Thanks you! ixnvannooq

引用并回复此评论

游客于2007-7-30 5:42:30写道：

Hello! Good Site! Thanks you! mkqoeoklsejuzj

引用并回复此评论

E-File帐号：用户名：密码： [注册]

评论：（内容不能超过500字，如果您不填写用户名和密码只能以游客的身份发表评论。）

*评论内容将在30分钟以后显示！

发表须知：
一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。