2列布局, 拖动改变宽度
2016-11-10 本文已影响509人
yisky
最终效果
代码:
html:
<body>
<section id="layoutcontent" class="ui grid">
<div class="ui ten wide column">
<div class="ui-header">
<h3 class="modal-title">项目组织架构模版</h3>
</div>
<br /><br /><br />
</div>
<div id="layoutSep" class="ui layout_sep">
</div>
<div class="ui six wide column">
<div class="ui-header">
<h3 data-bind="text:titleMsg" class="modal-title">公司组织架构</h3>
</div>
<div class="ui list"></div>
</div>
</section>
</body>
js
$(document).ready(function() {
//拖拽改变列宽
layoutSep('layoutSep');
});
//需要配合resize使用....否则拖拽了后, 会把百分比宽度改成000px宽度.如果用户改变窗口大小...会把布局挤破...
$(window).resize(function() {
var ns = $('.ui .ten');
var ps = $('.ui .six');
if($($("section")[0]).width() < 550) {
ns.css('width', '60.5%');
ps.css('width', '32.5%');
} else {
ns.css('width', '62.5%');
ps.css('width', '34.5%');
}
});
function layoutSep(id) {
var x = 0;
var s = $("#" + id);
var ns = s.next();
var ps = s.prev();
s.mousedown(function(ev) {
s.data('is_dragging', true);
x = ev.pageX;
document.onmousemove = function(e) {
if(s.data('is_dragging')) {
var movex = e.pageX - x;
x = e.pageX;
ps.width(ps.width() + movex);
ns.width(ns.width() - movex);
return false;
}
}
document.onmouseup = function() {
s.data('is_dragging', false);
document.onmouseup = document.onmousemove = null;
}
return false;
})
}
