| |
这几个技术都不是很新了,现在还拿出来说也就是为了教教新手了呵呵,各位大虾多多指正.
css之所以出现就是为了实现数据与数据的表现形式的分离, xml则是为了无限扩展数据结构本身的限制, htc(更准确的说是behavior)进一步的把代码与表现形式分离开了
之所以要把这些已经出现了若干年的东西重新翻出来说,是因为看到最近的xHTML验证似乎比较热,其实xHTML的目的也就是更好的向XML过渡,形成一种标准化的数据形式.数据与数据表达方式,数据表达方式中的行为与样式的分离正是为了更有效率的组织数据.
让我们来看一些例子
下面的代码来自:
www.blueidea.com/bbs/NewsDetail.asp?&id=2440917
用层模拟小窗口的代码:
运行代码框
<html>
<head>
<title>_xWin</title>
<style type=’text/css’>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover=’orange’,normal=’#336699’;//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
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";
}
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style=’"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:8pt;"
+ "font-family:Tahoma;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "’ "
+ "onmousedown=’getFocus(this)’>"
+ "<div "
+ "style=’"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "’ "
+ "onmousedown=’startDrag(this)’ "
+ "onmouseup=’stopDrag(this)’ "
+ "onmousemove=’drag(this)’ "
+ "ondblclick=’min(this.childNodes[1])’"
+ ">"
+ "" + this.title + ""
+ "0"
+ "r"
+ "</div>"
+ "<div style=’"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "’>" + this.message + "</div>"
+ "</div>"
+ "<div id=xMsg" + this.id + "bg style=’"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "’></div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//显示隐藏窗口
function ShowHide(id,dis){
var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
document.getElementById("xMsg"+id).style.display = bdisplay;
document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
}
//modify by haiwa @ 2005-7-14
//http://www.51windows.Net
//-->
</script>
<script language=’JScript’>
<!--
function initialize()
{
var a = new xWin("1",160,200,200,200,"窗口1","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");
var b = new xWin("2",240,200,100,100,"窗口2","Welcome to visited my personal website:<br><a href=http://www14.brinkster.com/wildcity target=_blank>http://wildcity.126.com<;/a><br>and u can also sign my guestbook at:<br><a href=http://www14.brinkster.com/wildcity/gbook target=_blank>http://wildcity.126.com/gbook<;/a><br><br>thx!!! =)...");
var c = new xWin("3",200,160,250,50,"窗口3","Copyright by <a href=’mailtwildwind_zz@21cn.com’>Wildwind</a>!");
ShowHide("1","none");//隐藏窗口1
}
window.onload = initialize;
//-->
</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>
<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>
<!-- Below is the component script -->
<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>
<!-- Below is the xWin 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就可以改变所有的页面.数据的结构化将使网站的维护变得异常轻松. |
|
