Der Screenshot lautet wie folgt: (Sie können die Breite der Divs auf beiden Seiten ändern, indem Sie den blauen Balken in der Mitte bewegen)
Der spezifische Implementierungscode lautet wie folgt:
< %@ Page Language = "C#" AutoEventwireUp = "True" CodeFile = "default10.aspx.cs" inherits = "default10" %> <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w.w3.org/1999/xhtml"> < type = "text/javaScript" src = "jQuery 2.0.3.js"> </script> <style type = "text/css"> .highlightTextSearch {Hintergrundfarbe: Rot; } A: Hover {Farbe: rot; } .Style2 {width: 1000px; } .div {scrollbar-face-color: #dcdcdc; /* Cursorfarbe*/ Scrollbar-Shadow-Color: #99BBE8; /* Cursor-Randfarbe*/ Scrollbar-Highlight-Color: #ff3300; /* Cursor Highlight*/ scrollBar-3Dlight-Color: #9EBFE8; Scrollbar-Darkshadow-Farbe: #9EBFE8; Scrollbar-Track-Color: #dfe8f6; /*Schiebereisen-Hintergrundfarbe*/ Scrollbar-Arrow-Color: #6699ff; /*Pfeilfarbe*/} </style> </head> <body> <form id = "Form1" runat = "server"> <div> <table align = "center" cellpadding = "0" cellpacing = "0"> <tr> <tdd align = "links" valign = "top"> <divFlows. Gelb "moveModule"> </div> <div id = "Arrowborder" style = "float: links; </tr> </table> </div> <script type = "text/javaScript"> var isdown = false; var minwidth = 160; var maxwidth = 800; $ ("#Arrowborder"). MouseDown (function () {this.setCapture (); isdown = true; $ ("Körper"). CSS ("Cursor", "e-resize");}); $ ("body"). mauseup (function () {this.releasecapture (); isdown = false; $ ("Körper"). CSS ("Cursor", "Standard");}); $ ("Body"). Mousemove (Funktion (Ereignis) {if (isdown) {var _mx = event.clientx; // var _my = event.clienty; var _poin = $ ("#Arrowborder"). _rw = $ ("#RightFrame"). Width (); _W); (_lw - minwidth)); </script> </form> </body> </html>