国产在线视频无遮挡,中文亚洲av片在线观看高清,97精品视频在线

　xml css htc 的綜合運用

作者：hutia　時間： 2006-02-07　文檔類型：原創(chuàng)　來自：藍色理想

這幾個技術都不是很新了,現(xiàn)在還拿出來說也就是為了教教新手了呵呵,各位大蝦多多指正.

css之所以出現(xiàn)就是為了實現(xiàn)數(shù)據(jù)與數(shù)據(jù)的表現(xiàn)形式的分離, xml則是為了無限擴展數(shù)據(jù)結構本身的限制, htc(更準確的說是behavior)進一步的把代碼與表現(xiàn)形式分離開了

之所以要把這些已經(jīng)出現(xiàn)了若干年的東西重新翻出來說,是因為看到最近的xHTML驗證似乎比較熱,其實xHTML的目的也就是更好的向XML過渡,形成一種標準化的數(shù)據(jù)形式.數(shù)據(jù)與數(shù)據(jù)表達方式,數(shù)據(jù)表達方式中的行為與樣式的分離正是為了更有效率的組織數(shù)據(jù).

讓我們來看一些例子

下面的代碼來自:
www.95time.cn/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 全部選擇提示：你可先修改部分代碼，再按運行]

可以看到,這段內(nèi)容里同時有需要表達的數(shù)據(jù),數(shù)據(jù)樣式和樣式的行為模式,對于只關心數(shù)據(jù)本身的修改者來說,如此多的代碼會造成閱讀上的困擾.讓我們用前面提到的技術重整一下

//抱歉這段代碼不能直接執(zhí)行,因為我沒有地方放置需要引用的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>

這時候大家會很高興的發(fā)現(xiàn),頁面變得如此簡單,代碼中基本上只有數(shù)據(jù)本身,幾乎完全沒有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;
}

數(shù)據(jù)的行為也算作數(shù)據(jù)的表達樣式之一呵呵,那么我們再看看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; } } //設置窗口標題內(nèi)容 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();} //設置窗口內(nèi)容 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就可以改變所有的頁面.數(shù)據(jù)的結構化將使網(wǎng)站的維護變得異常輕松.

經(jīng)典討論帖：
http://www.95time.cn/bbs/NewsDetail.asp?id=2445905

出處：藍色理想
責任編輯：moby

◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關文章

建立自己的操作標準

作者文章

xmlHTTP返回值重編碼的優(yōu)化

MyHTML Player release v1.1


關鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設計大賽開啟

國際體驗設計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx