HTML代码
<div class="modal-body"
style="width:100%; overflow: auto;margin: 0;">
<div id="main" class="col-xs-12">
<div id="menu" class="col-xs-6"
style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
</div>
<div id="codecontainer" class="col-xs-6"
style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
</div>
</div>
</div>
JS代码
$(function(){
var o = document.getElementById("main");
main = o.clientWidth||o.offsetWidth;
o2 = document.getElementById("codecontainer");
var codecontainer = o2.clientWidth||o2.offsetWidth;
bindResize(document.getElementById('menu'));
});
$(function(){
var o = document.getElementById("main");
main = o.clientWidth||o.offsetWidth;
o2 = document.getElementById("codecontainer");
var codecontainer = o2.clientWidth||o2.offsetWidth;
bindResize(document.getElementById('menu'));
});
function bindResize(el) {
var els = el.style,
x =0;
$(el).mousedown(function (e) {
x = e.clientX - el.offsetWidth,
el.setCapture ? (
el.setCapture(),
el.onmousemove = function (ev) {
mouseMove(ev || event)
},
el.onmouseup = mouseUp
) : (
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
)
e.preventDefault()
});
function mouseMove(e) {
var elsWidth = e.clientX - x;
if (elsWidth > 800){
elsWidth =800;
}
if (elsWidth < 400){
elsWidth =400;
}
els.width = elsWidth + 'px';
var rightWidth =main-elsWidth-31;
o2.style.width = rightWidth + 'px';
}
function mouseUp() {
el.releaseCapture ? (
el.releaseCapture(),
el.onmousemove = el.onmouseup = null
) : (
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
)
}
}
参考原文