La capture d'écran est la suivante: (vous pouvez changer la largeur des divs des deux côtés en déplaçant la barre bleue au milieu)
Le code d'implémentation spécifique est le suivant:
<% @ Page Language = "C #" AutoEventWireUp = "True" CodeFile = "Default10.aspx.cs" Hérites = "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.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <xhtml> </ Title> type = "text / javascript" src = "jQuery 2.0.3.js"> </ script> <style type = "text / css"> .highlightTextSearch {background-Color: red; } A: Hover {couleur: rouge; } .style2 {largeur: 1000px; } .div {ScrollBar-Face-Color: #dcdcdc; / * Couleur du curseur * / Scrollbar-Shadow-Color: # 99BBE8; / * Couleur de la bordure du curseur * / Scrollbar-Highlight-Color: # FF3300; / * Highlight du curseur * / ScrollBar-3Dlight-Color: # 9EBFE8; Scrollbar-Darkshadow-Color: # 9EBFE8; Scrollbar-Track-Color: # dfe8f6; / * Couleur d'arrière-plan de la barre coulissante * / Scrollbar-Arrow-Color: # 6699FF; / * Couleur Arrow * /} </ style> </ad> <body> <form id = "form1" runat = "server"> <v> <table align = "Center" CellPadding = "0" Cellpacing = "0"> <tr> <td align = "Left" valign = "top"> <div style = "overflow: Auto; width: 325px; height: lot; floot: width: 325px; Yellow "id =" MoveModule "> </ div> <div id =" Arrowborder "Style =" Float: gauche; </tr> </ table> </ div> <script type = "Text / javascript"> var isown = false; var minWidth = 160; var maxwidth = 800; $ ("# arrowborder"). Mousedown (function () {this.setCapture (); isown = true; $ ("body"). css ("curseur", "e-resize");}); $ ("body"). MouseUp (function () {this.reeSeaCapture (); isown = false; $ ("body"). CSS ("Cursor", "Default");}); $ ("body"). MouseMove (fonction (événement) {if (lisdown) {var _mx = event.clientx; // var _my = event.clienty; var _poin = $ ("# arrowborder"). offset (); var _w = _mx - _poin.left; var _lw = $ ("# movemodule").);););); = $ ("# droit"). width (); {if (_w> 0) {$ ("# MoveModule"). Width (maxwidth); $ ("# rightframe"). minWidth));}}}}); </cript> </ form> </ body> </html>