The integrated application of XML CSS HTC

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Css|htc|xml

These few technologies are not very new, now also take out to say that is to teach the novice, oh, you prawns a lot of corrections.

The reason why CSS appears is to realize the separation of data and data representation, XML is to extend the limit of the data structure itself, HTC (more accurately behavior) further separates the code from the Performance form.

The reason for this is that the things that have been going on for a number of years have been reopened because it seems to be hot to see the recent XHTML validation, but the purpose of XHTML is to better transition to XML and form a standardized form of data. Data and data expression, The separation of behavior and style in data expression is for more efficient organization of data.

Let's take a look at some examples

The following code comes from:
www.blueidea.com/bbs/NewsDetail.asp?&id=2440917

Code that simulates a small window with a layer:

Run Code Box

<ptml><pead><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 ' >< !--function Initialize () {var a = new Xwin ("1", 160,200,200,200, "Window 1", "Xwin <br> a cool Pop Div window<br>versi On:1.0<br>2002-8-13 "); var B = new Xwin ("2", 240,200,100,100, "Window 2", "Welcome to visited myPersonal 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, "Window 3", "Copyright by <a href= ' mailto:wildwind_zz@21cn.com ' >wildwind</a >! "); Showhide ("1", "none");/hidden window 1}window.onload = Initialize;//--></script></pead><base target= "_ Blank "><body onselectstart= ' return false ' oncontextmenu= ' return false ' ><a href= '" > Window 1</a><a href= "" > Window 2</a><a href= "" > Window 3</a></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

As you can see, there's a pattern of data, data styles, and patterns that you need to express in this section, and so much code can be a problem for readers who only care about the data itself. Let's use the technology we mentioned earlier to regroup.

Sorry, this code can't be executed directly, because I have no place to put CSS and HTC files that need to be referenced

At this time everyone will be very happy to find that the page has become so simple, the code basically only data itself, almost no JS, then where is JS? The following is a CSS file: sp/css/global.css

X\:* {
Behavior:url (SP/HTC/GLOBAL.HTC);
font-size:13px;
line-height:13px;
Background-color:white;
Color: #444;
}

The behavior of the data is also counted as one of the expression styles of the data oh, then we look at the HTC file

This code is extracted from a larger HTC of my own, and includes a thin line select

Run Code Box

<ptml><pead><public:component><public:attach event= "Oncontentready" onevent= "DoInit ()"/> </public:component><script>//**property area******//**event Area ******function doinit () {switch (Element.nodeName.toLowerCase ()) {case "select"://Thin Line 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"://Initialization window Initxwin (); Break }function Doover () {}function doout () {}//**method area******//**private functions***</script><script>function Initxwin () {//SET global variable 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= ' #3366//color; Element.document.index=isnan (Element.document.index) 10000:parseint (element.document.index) +1;//z-index; Set ID element.id=element.id?element.id: "xwin_" + (new Date ()). GetTime () +parseint (Math.random () *100000); Record display style Var tempdisplay=element.style.display; Change display style element.style.display= "block"; Set window variable 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; Empty window element.innerhtml= ""; Sets the window style 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"; //Set Window method element. Showhide=function (dis) {var bdisplay = (dis==null)? ( (this.style.display== "None")? ": None":d is; This.style.display = Bdisplay; This.nextSibling.style.display = Bdisplay; //Window Mouse press event 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; }//Set window title element.otitle=element.document.createelement ("Div"); Sets the window caption style with (Element.oTitle.style) {backgroundcolor=element.normal; Color= "#FFFFFF"; width=element.w-4; height=20; ///Window Title Mouse press event Element.otitle.onmousedown=function () {if (event.button==1) {//Lock title bar; This.setcapture (); Define the object; var win = This.parentnode; var sha = win.nextsibling; Record mouse and layer position; element.x0 = Event.clientx; Element.y0 = Event.clienty; element.x1 = parseint (win.style.left); Element.y1 = parseint (win.style. top); Record color; Element.normal = This.style.backgroundColor; Change style; 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; }//Window title mouse move Event 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; }//Window title Mouse Bounce Event 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; }//Set window caption Content 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; Sets the window Caption Minimize button element.otitlembutton=element.document.createelement ("span"); With (Element.oTitleMButton.style) {width=12; height=20; margin=0; Fontfamily= "Webdings"; } element.otitlembutton.innertext=0; Set Window Title Minimize button click event & Set window title double-click event 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"; }//Set window Title Close button 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 ();}//Set window content 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; Sets the window Shadow 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); Restore display style element.style.display=tempdisplay;} </script></pead><body></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

So far we completely separate the three, for not proficient in scripting language page designer, he can arbitrarily modify the HTM page without worrying about what will cause unexpected consequences, only to use <x:win> can simply make a window, It's as if it's an ordinary HTML tag. Later, if you want to modify the window to not drag, you just need to modify an HTC can change all the pages. The structure of the data will make the maintenance of the website extremely easy.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

The integrated application of XML CSS HTC

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

The integrated application of XML CSS HTC

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support