<Html>
<Head>
<Title> _ xWin </title>
<Style type = 'text/css '>
<! --
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>
<! --
// It can be packaged as a js file;
Var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
Var offx = 6, offy = 6;
Var moveable = false;
Var hover = 'Orange ', normal = 'slateegray'; // color;
Var index = 10000; // z-index;
// Start dragging;
Function startDrag (obj)
{
If (event. button = 1)
{
// Lock the title bar;
Obj. setCapture ();
// Define the object;
Var win = obj. parentNode;
Var sha = win. nextSibling;
// Record the mouse and layer position;
X0 = event. clientX;
Y0 = event. clientY;
X1 = parseInt (win. style. left );
Y1 = parseInt (win. style. top );
// Record the color;
Normal = obj. style. backgroundColor;
// Change the style;
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;
}
}
// Drag;
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;
}
}
// Stop dragging;
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;
}
}
// Obtain the focus;
Function getFocus (obj)
{
If (obj. style. zIndex! = Index)
{
Index = index + 2;
Var idx = index;
Obj. style. zIndex = idx;
Obj. nextSibling. style. zIndex = idx-1;
}
}
// Minimize;
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 ";
}
}
// Close;
Function cls (obj)
{
Var win = obj. parentNode. parentNode;
Var sha = win. nextSibling;
Win. style. visibility = "hidden ";
Sha. style. visibility = "hidden ";
}
// Create an object;
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 ();
}
// Initialization;
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: 10px ;"
+ "Font-family: Verdana ;"
+ "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]) '"
+ ">"
+ "<Span style = 'width:" + (this. width-2*12-4) + "; padding-left: 3px; '>" + this. title + "</span>"
+ "<Span style = 'width: 12; border-width: 0px; color: white; font-family: webdings; 'onclick = 'min (this) '> 0 </span>"
+ "<Span style = 'width: 12; border-width: 0px; color: white; font-family: webdings; 'onclick = 'cls (this) '> r </span>"
+ "</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 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 );"
+ "'> By wildwind </div> ";
Document. body. insertAdjacentHTML ("beforeEnd", str );
}
// -->
</Script>
<Script language = 'jscript'>
<! --
Function initialize ()
{
Var a = new xWin ("1", 160,200,200,200, "Message", "xWin <br> A Cool Pop Div Window <br> Version: 1.0 <br> 2005-7-12 ");
Var B = new xWin ("2", 240,200,100,100, "Wildwind's Msgbox", "Welcome to visited my personal website: <br> <a href = http://www.webjx.com/target = _ blank> http://www.webjx.com </a> <br> and u can also sign my guestbook: <br> <a href = http://www.webjx.com/target = _ blank> http://www.webjx.com </a> <br> thx !!! = )...");
Var c = new xWin ("3", 200,160,250, 50, "Copyright", "Copyright by <a href = 'mailto: web@webjx.com '> Wildwind </a>! ");
}
Window. onload = initialize;
// -->
</Script>
</Head>
<Body onselectstart = 'Return false' oncontextmenu = 'Return false' scroll = 'no'>
</Body>
</Html>
Microsoft style buttons
<Html>
<Head>
<Style>
. Button2
{
Border-right: 1px solid buttonhighlight;
Border-left: 1px solid buttonshadow;
Border-bottom: 1px solid buttonhighlight;
Border-top: 1px solid buttonshadow
}
TD
{
Cursor: hand; font-size: 9pt; font-family:; text-align: center; text-valign: middle
}
. Handin
{
Height: 18px;
Width: 2px;
Border-left: 1px solid buttonshadow;
Border-right: 1px solid buttonhighlight
}
. Handout
{
Height: 18px;
Width: 2px;
Border-left: 1px solid buttonhighlight;
Border-right: 1px solid buttonshadow;
}
.
{
Width: 100%;
Border-right: 1px solid buttonhighlight;
Border-left: 1px solid buttonshadow;
Border-bottom: 1px solid buttonhighlight;
Border-top: 1px solid buttonshadow
}
. Outto,. button1
{
Background-color: buttonface;
Background-repeat: repeat;
Background-attachment: scroll;
Border-left: 1px solid buttonhighlight;
Border-right: 1px solid buttonshadow;
Border-top: 1px solid buttonhighlight;
Border-bottom: 1px solid buttonshadow;
Background-position: 0%"
}
. Button0
{
}
</Style>
</Head>
<Body topmargin = "0" leftmargin = "0" bgcolor = "# E0E0E0">
<Script>
Function change_button (num)
{
If (event. srcElement. tagName = "TD" & event. srcElement. value = "button ")
Event. srcElement. className = "button" + num;
}
</Script>
<Div class = "into" style = "width: 100%; height: 25">
<Table class = "outto" border = "0" width = "100%" height = "25" cellspacing = "1" onmouseover = "change_button (1) "onmouseup =" change_button (0) "onmousedown =" change_button (2) "onmouseout =" change_button (0) ">
<Tr>
<Td width = "1%" height = "19"> <span class = "handout"> </span> </td>
<Td width = "9%" height = "19" value = "button"> button TD </td>
<Td width = "1%" height = "19"> <span class = "handin"> </span> </td>
<Td width = "9%" height = "19" value = "button"> button TD </td>
<Td width = "1%" height = "19"> <span class = "handin"> </span> </td>
<Td width = "9%" height = "19" value = "button"> button TD </td>
<Td width = "1%" height = "19"> <span class = "handin"> </span> </td>
<Td width = "69%" height = "19"> </td>
</Tr>
</Table>
</Div>
</Body>
</Html>
