Javascript + jquery + jqueryui mimic the window form

/*** @ Author pan * @ Param # select ID * @ Param. select class to return array * @ Param without ID. The first class */function $ (name) {If (name. indexof ('#') = 0) {var STR = Name. replace ('#', ''); Return document. getelementbyid (STR);} If (name. indexof ('. ') = 0) {return document. getelementsbyclassname (name. replace ('. ', '') [0];} return document. getelementsbyclassname (name);} // you must write and obtain the object here; otherwise, the object is nullwindow. onload = function () {// Register the event var OBJ =$ $ ('. menu-list'); var Lis = obj. getelementsbytagname ('lil'); For (VAR I = 0; I <Lis. length; I ++) {var ELEM = Lis [I]; ELEM. onclick = function () {menuclick (this) ;}/// remove all Li event try {var menus =$ $ ('lef-menus '); for (VAR I = 0; I <menus. length; I ++) {var ul = menus [I]; var Lis = ul. getelementsbytagname ('lil'); For (var j = 0; j <Lis. length; j ++) {var li = Lis [J]; If (! (Typeof li = "undefined") {Li. onclick = function (e) {If (E & E. stoppropagation) {// non-IE browser E. stoppropagation ();} else {// IE browser window. event. cancelbubble = true;} liselect (this) ;}}}} catch (e) {alert (E + "Li") ;}}; function lightform () {var Bol = false; var parent = NULL; var text = "New Form"; var src = ""; var frameid = "mainframe "; vaR position = eval ('+ "{'top': '0', 'left': '0', 'width ': '20180101', 'height': '20180101'} "+ '); var objhtml =' <Div class =" iframe-item "style =" height: $ {height}; width :$ {width}; left :$ {left}; top :$ {top}; Z-index: 1; "> '; objhtml + = '<Div class = "iframe-title"> <B class = "form-icon" id = "$ {formicon}"> </B> <span> $ {text} </span> '; objhtml + = '<Div class = "ctrls-icon"> '; objhtml + = '<B id = "Min-BTN" Title = "minimal"> </B> '; objhtml + = '<B id = "Max-BTN" Title = "maximized"> </B>'; objhtml + = '<B Id = "Close-BTN" Title = "close"> </B> '; objhtml + =' </div> '; objhtml + = '<IFRAME src = "$ {SRC}" scrolling = "yes" id = "$ {ID}"> </iframe> '; objhtml + = '</div>'; var formicon = ""; // icon ID this. seticon = function (ID) {formicon = ID ;}; // whether to maximize this. setmax = function (BL) {If (BL! = NULL) {Bol = bl ;}; // target of the webpage loaded by the framework this. setsrc = function (URL) {src = URL ;}; // Title this. settext = function (STR) {text = STR ;}; // Set ID this. setid = function (STR) {frameid = STR ;}; // size this. setsize = function (W, h) {position. width = W; position. height = H ;}; // location this. setlocation = function (x, y) {position. left = x; position. top = y ;}; // This is displayed in the middle by default. showcenter = function () {// calculate top and left var left = parent. offsetwidth/2-position. width/2; var Top = parent. offsetheight/2-position. height/2; position. top = top; position. left = left ;}; // create the object this. create = function (contaier) {parent =$ $ (contaier) [0] ;}; // Display object this. show = function () {// replace content zindex (); // reset the Z-index of other objects to 0 to display it at the top of VaR html = objhtml. replace ('$ {text}', text ). replace ('$ {SRC}', Src ). replace ('$ {ID}', frameid); html = html. replace ('$ {width}', position. width + "PX "). replace ('$ {height}', position. height + "PX "). replace ('$ {left}', position. left + "PX "). replace ('$ {top}', position. top + "PX "). replace ('$ {formicon}', formicon); $ (parent ). append (HTML); // append element $ (". IFRAME-item "). draggable ({containment: 'parent'}); // register the drag event $ (". IFRAME-item "). resizable ({containment: 'parent'}); // register the resize event this. read (); // call the read registration event}; this. read = function () {// register the down event for the DIV Form Try {var items =$ ('iframe-item'); For (VAR I = 0; I <items. length; I ++) {var item = items [I]. getelementsbyclassname ('iframe-title') [0]; // get the instance // register and click the event item. onmousedown = function () {dragclick (this) ;}; // register double-click event item. ondblclick = function () {formdobleclick (this) ;}}} catch (e) {alert (E + "registration error ");} // to maximize the form, close the registration event try {var ctrls =$ $ ('ctrls-Icon '); For (VAR I = 0; I <ctrls. length; I ++) {// obtain the button panel var btnpanel = ctrls [I]; var btns = btnpanel. getelementsbytagname ('B'); // loop registration event for (VAR J = 0; j <btns. length; j ++) {var BTN = btns [J]; // sets whether a custom attribute flag maximizes BTN. setattribute ('max ', false); BTN. onclick = function () {windowbtnaddevent (this) ;}}} catch (e) {alert (e );}};} // double-click event function formdobleclick (OBJ) {// maximize object try {var ELEM = obj. getelementsbyclassname ('ctrls-Icon ') [0]; var maxbtn = ELEM. getelementsbytagname ('B') [1]; var max = maxbtn. getattribute ("Max"); var parent = obj. parentelement; If (max = 'false') {var position = "{'top': '" + parent. offsettop + "PX ', 'left':'" + parent. offsetleft + "PX ', 'width':'" + parent. offsetwidth + "PX ', 'height':'" + parent. offsetheight + "PX '}"; maxbtn. setattribute ('pos', position); parent. style. left = "0px"; parent. style. top = "0px"; parent. style. width = "100%"; parent. style. height = "100%"; maxbtn. setattribute ('max ', true);} else {var position = eval (' + maxbtn. getattribute ("POS") + '); maxbtn. setattribute ('max ', false); parent. style. left = position. left; parent. style. top = position. top; parent. style. height = position. height; parent. style. width = position. width ;}} catch (e) {alert (e) ;}} function windowbtnaddevent (OBJ) {Switch (obj. ID) {Case "Min-BTN": btnmin (OBJ); break; Case "Max-BTN": btnmax (OBJ); break; Case "Close-BTN ": btnclose (OBJ); break;} function btnmax (OBJ) {// maximized object var max = obj. getattribute ("Max"); try {var parent = obj. parentelement. parentelement. parentelement; If (max = 'false') {var position = "{'top': '" + parent. offsettop + "PX ', 'left':'" + parent. offsetleft + "PX ', 'width':'" + parent. offsetwidth + "PX ', 'height':'" + parent. offsetheight + "PX '}"; obj. setattribute ('pos', position); parent. style. left = "0px"; parent. style. top = "0px"; parent. style. width = "100%"; parent. style. height = "100%"; obj. setattribute ('max ', true);} else {var position = eval (' + obj. getattribute ("POS") + '); obj. setattribute ('max ', false); parent. style. left = position. left; parent. style. top = position. top; parent. style. height = position. height; parent. style. width = position. width ;}} catch (e) {alert (e) ;}} function btnmin (OBJ) {try {var parent = obj. parentelement. parentelement. parentelement; parent. style. height = "35px";} catch (e) {alert (e) ;}// close the current object function btnclose (OBJ) {var form = obj. parentelement. parentelement. parentelement; // var parentform = form. parentelement; // The parent container parentform of the form. removechild (form); // remove object} function liselect (OBJ) {// alert (obj. textcontent); // It is created if it exists. If it does not exist, it is not created // It gets the object, and then it cyclically judges var AR = findparentname (obj. textcontent); var STR = Ar + '-' + '<a href = "#">' + obj. textcontent + '</a>'; setnav (STR); var parent =$ ('. work-content'); var nodes = parent. getelementsbyclassname ('iframe-item'); For (VAR I = 0; I <nodes. length; I ++) {var node = nodes [I]; node. style. zindex = 0;} Try {for (VAR I = 0; I <nodes. length; I ++) {var node = nodes [I]. getelementsbyclassname ('iframe-title') [0]; If (obj. textcontent = node. textcontent) {node. parentelement. style. zindex = 1; return ;};}catch (e) {alert (e) ;}; // obtain the icon ID var pelem = obj. parentelement. parentelement; var B = pelem. getelementsbytagname ('B') [0]; // create an object var form = new lightform (); form. create ('work-content'); form. settext (obj. textcontent); form. setsize (800,500); form. seticon (B. ID); form. showcenter (); form. show () ;}// set all form Z-indexes to 0 Function zindex () {var nodes =$ $ ('iframe-item '); for (VAR I = 0; I <nodes. length; I ++) {var node = nodes [I]; node. style. zindex = 0 ;}/// when you press the mouse to register events for all drag objects, the current object will be displayed in front of other forms function dragclick (OBJ) {// alert (obj. textcontent); // top the current object // obtain the parent element try {var parent = obj. parentelement. parentelement; var nodes = parent. getelementsbyclassname ('iframe-item'); For (VAR I = 0; I <nodes. length; I ++) {var ELEM = nodes [I]; ELEM. style. zindex = 0;} // set the current object to the front obj. parentelement. style. zindex = 1; var AR = findparentname (obj. textcontent); var STR = Ar + '-' + '<a href = "#">' + obj. textcontent + '</a>'; setnav (STR);} catch (e) {alert (e) ;}} function setnav (STR) {var Title = $ ('. title-label '); title. innerhtml = STR;} // find the parent category by name function findparentname (STR) {var menus =$ $ ('lef-menus'); For (VAR I = 0; I <menus. length; I ++) {var ul = menus [I]; var Lis = ul. getelementsbytagname ('lil'); var text = ul. parentelement. getelementsbytagname ('A') [0]. textcontent; For (var j = 0; j <Lis. length; j ++) {var content = Lis [J]. textcontent; If (content = Str) {return text ;}} return "" ;}function menuclick (OBJ) {// expand and contract the object when you click it. // The initial size is 35px. // The height of all child elements in the current object is retrieved cyclically. var nodes = obj. getelementsbytagname ('ul ') [0]; var Height = nodes. offsetheight + obj. offsetheight; If (obj. offsetheight = 35) {obj. style. height = height + "PX";} else {obj. style. height = "35px ";}}

:

JavaScript code: