代码如下:需要在熟练,代码可以进行简化。
把控制条的颜色去掉就可以了。
<!-- 可调节大小面板 -->
.panel{
position:relative;
left:100px;
width:300px;
height:200px;
border:1px solid #ccc;
}
.title{
background-color:#eee;
text-align:center;
line-height:30px;
border:1px solid #fff;
font-weight:bold;
}
.ui-Resizable-r{
position:absolute;
right:0;
top:0;
width:10px;
height:100%;
background-color:yellow;
cursor:e-resize;
}
.ui-Resizable-b{
position:absolute;
bottom:0;
right:0;
width:100%;
height:10px;
background-color:blue;
cursor:s-resize;
}
.ui-Resizable-rb{
position:absolute;
bottom:0;
right:0;
width:10px;
height:10px;
background-color:red;
cursor:nw-resize;
}
<div class="panel" id="panelDiv">
<div class="title">Resizable Panel</div>
<div class="ui-Resizable-r"></div>
<div class="ui-Resizable-b"></div>
<div class="ui-Resizable-rb"></div>
</div>
<script type="text/javascript">
window.onload=function(){//页面加载完成后执行这段代码,否则浏览器会先执行JS代码,由于页面还没有加载完成通过getElementById无法找到指定id的元素,所以执行操作会无效。也可以使用JQuery的方法。
var arr=[['id','名称','血量','伤害'],['1','gareen','340','58'],['2','teemo','320','56'],['3','annie','380','38'],['4','deadbo','400','90']];
var table=document.createElement("table");
for(var i=0;i<arr.length;i++){
var tr=document.createElement("tr");
for(var j=0;j<arr[i].length;j++){
var td=document.createElement("td");
var text=document.createTextNode(arr[i][j]);
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
var showtable=document.getElementById("showtable");
showtable.appendChild(table);
//document.getElementsByTagName("body")[0].appendChild(table);这种方法也可以将表格添加到body元素当前的位置
//可调节大小控制面板,简单原理与鼠标拖拽相同,对控制条进行拖拽,条件面板大小
var r_control=document.getElementsByClassName("ui-Resizable-r")[0];
var b_control=document.getElementsByClassName("ui-Resizable-b")[0];
var rb_control=document.getElementsByClassName("ui-Resizable-rb")[0];
var panel=document.getElementById("panelDiv");
var moveTop=0;
var moveLeft=0;
var isDrop=false;
var top=0;
var left=0;
var minWidth=100;
var minHeight=60;
var mycontrol,myname;
function mouseDown(e,control,name){
var e=e||window.event;
moveTop=e.pageY-control.offsetTop;
moveLeft=e.pageX-control.offsetLeft;
mycontrol=control;
myname=name;
isDrop=true;
}
document.onmousemove=function(e){
if(isDrop===true){
var e=e||window.event;
top=e.pageY-moveTop;
left=e.pageX-moveLeft;
top=Math.max(top,minHeight);
left=Math.max(left,minWidth);
switch(myname){
case 'r': mycontrol.style.left=left+"px";
panel.style.width=left+10+"px";
break;
case 'b':mycontrol.style.top=top+"px";
panel.style.height=top+10+"px";
break;
case 'rb': mycontrol.style.left=left+"px";
mycontrol.style.top=top+"px";
panel.style.width=left+10+"px";
panel.style.height=top+10+"px";
break;
}
}
}
r_control.onmousedown=function(e){
var e=e||window.event;
mouseDown(e,r_control,"r");
}
b_control.onmousedown=function(e){
mouseDown(e,b_control,"b");
}
rb_control.onmousedown=function(e){
mouseDown(e,rb_control,"rb");
}
document.onmouseup=function(){
isDrop=false;//设置为不可移动标志
//清除上次移动时更改的left或者top值使其定位的值初始化会紧贴面板,否则会定位到上次的位置不随着面板移动
r_control.style.left="";
b_control.style.top="";
rb_control.style.left="";
rb_control.style.top="";
}
};
</script>
笔记:
改写成 Jquery的插件。这样调用就行了 $(’#div’).resizeable();记录别人的代码还没有进行练习,先记录下来:
$.fn.resizeable = function(){
$(this).each(function(){
Resizable( $(this).attr('id') )
})
}
// 设置某个面板支持调整大小
function Resizable(panelId) {
if (!window.__resizable_var) {
with (window) {
// ctrl :控制元素,panel :面板 , type 类型
m_panel = 1, m_ctrl = 1 , m_type = 1
// move: 是否侦听鼠标移动,
// m_start_x: 鼠标相对ctrl元素的left、right
// m_to_x: 鼠标的新位置
moving = 0 , m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0;
// 面板最小尺寸
m_min_w = 100, m_min_h = 40;
}
}
var panel = document.getElementById(panelId);
// 插入调整控制元素
var r = document.createElement("div");
var b = document.createElement("div");
var rb = document.createElement("div");
r.class = r.className = 'ui-Resizable-r ui-Resizable-ctrl';
b.class = b.className = 'ui-Resizable-b ui-Resizable-ctrl';
rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
panel.appendChild(r);
panel.appendChild(b);
panel.appendChild(rb);
// 鼠标移动处理
function on_move() {
if (moving) {
// 计算最小的 left 和 top (使panel的新大小不能小于自身的位置)
var min_left = 0
var min_top = 0
var to_x = Math.max(min_left + m_min_w, m_to_x - m_start_x);
var to_y = Math.max(min_top + m_min_h, m_to_y - m_start_y);
// 元素的新位置 = 鼠标新位置 - 鼠标相对元素的位置s
switch (m_type) {
case 'r' :
m_ctrl.style.left = to_x + "px";
m_panel.style.width = to_x + 10 + 'px';
break;
case 'b' :
m_ctrl.style.top = to_y + "px";
m_panel.style.height = to_y + 10 + 'px';
break;
case 'rb' :
m_ctrl.style.left = to_x + "px";
m_ctrl.style.top = to_y + "px";
m_panel.style.width = to_x + 20 + 'px';
m_panel.style.height = to_y + 20 + 'px';
break;
}
}
}
// 在控制元素中按下
function on_mousedown(e, panel, ctrl, type) {
var e = e || window.event;
// 计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置
m_start_x = e.pageX - ctrl.offsetLeft;
m_start_y = e.pageY - ctrl.offsetTop;
m_panel = panel;
m_ctrl = ctrl;
m_type = type;
// 开始处理移动事件
moving = setInterval(on_move, 10);
}
// 为调整控制元素设置拖拽处理
r.addEventListener('mousedown', function (e) {
on_mousedown(e, panel, r, 'r');
})
b.addEventListener('mousedown', function (e) {
on_mousedown(e, panel, b, 'b');
})
rb.addEventListener('mousedown', function (e) {
on_mousedown(e, panel, rb, 'rb');
});
if (!window.__resizable_var) {
// 页面鼠标移动侦听处理
document.addEventListener('mousemove', function (e) {
var e = window.event || e;
m_to_x = e.pageX;
m_to_y = e.pageY;
})
// 鼠标弹起处理
document.addEventListener('mouseup', function (e) {
clearInterval(moving);
var cls = document.getElementsByClassName('ui-Resizable-ctrl');
for (var i = 0; i < cls.length; i++) {
cls[i].style.left = '';
cls[i].style.top = '';
}
})
window.__resizable_var = true;
}
}