This page is more cool. The small window is floating above the main page, you can minimize, restore, close these small windows, or drag them to any location of the main page. The example interface is as follows:
Specific use methods, see the full page code below should know.
/ / Can be packaged as JS file;
VAR X0 = 0, Y0 = 0, X1 = 0, Y1 = 0;
VAR OFFX = 6, OFFY = 6;
Var moveable = false;
Var Hover = 'Orange', Normal = 'Slate'; // Color;
Var index = 10000; // z-index;
// Start drag;
Function StartDrag (OBJ)
{
IF (event.button == 1)
{
// Lock the title bar;
Obj.setcapture ();
// Define objects;
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;
}
}
// Get 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";
}
}
//shut down;
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 = ""
"
"Style = '"
"z-index:" this.zindex ";" "width:" this.width ";"
"Height:" THISHEIGHT ";"
"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 ";"
"'"
"οnmοusedοwn = 'getfocus (this)'>"
"
"Style = '"
"Background-Color:" Normal ";"
"Width:" (this.width-2 * 2) ";"
"HEIGHT: 20;"
"Color: White;"
"'"
"οnmοusedοwn = 'startdrag (this)'"
"οnmοuseup = 'stopdrag (this)'"
"οNMοUSEMοVE = 'DRAG (this)'"
"οNDBLCLICK = 'min (this.childnodes [1])'"
">"
"" this.title span> "
" 0 span>"
r span> "
" div>"
"
" div>"
"
Document.body.insertadjacenthtml ("BeForend", STR);
}
// ->
script>
Function initialize ()
{
VAR A = New Xwin ("1", 100, 200, 0, "Arui1", "Test1");
VAR B = New XWIN ("2", 100, 200, 0, 200, "Arui2", "Test2");
// var C = New XWIN ("3", 200, 160, 250, 50, "ARUI3", "Test3");
}
Window.onload = Initialize;
// ->
script>
hEAD>
html>