JS Resizable Panel 练习
Resizable Panel
HTML
<!doctype html>
<html>
<head>
<title>Resizable Panel</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="ui-resizable" class="ui-resizable">
<div id="title" class="title">resizable面板</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
.ui-resizable {
width:400px;
height:240px;
margin:50px;
position:relative;
border:1px solid black;
}
.title {
height:50px;
line-height:50px;
text-align:center;
font-size:24px;
font-weight:bold;
background-color:#ccc;
}
.resizable-r {
width:10px;
height:100%;
background-color:green;
position:absolute;;
right:;
top:;
cursor:e-resize;
}
.resizable-b {
width:100%;
height:10px;
background-color:blue;
position:absolute;
bottom:;
right:;
cursor:s-resize;;
}
.resizable-rb {
width:10px;
height:10px;
background-color:red;
position:absolute;
right:;
bottom:;
cursor:nw-resize;
}
JavaScript
思路总结：
（1）为面板附加三个控制元素；
（2）让控制元素支持拖动；
（3）动态调整面板的大小。
window.onload = function() {
//添加控制元素
resizable("ui-resizable");
}
function resizable(panel_id) {
//创建元素并添加属性
var panel = document.getElementById(panel_id);
var right = document.createElement("div");
var bottom = document.createElement("div");
var right_bottom = document.createElement("div");
right.className = "resizable-r resizable-control";
bottom.className = "resizable-b resizable-control";
right_bottom.className = "resizable-rb resizable-control";
//将元素添加到文档中
panel.appendChild(right);
panel.appendChild(bottom);
panel.appendChild(right_bottom);
document.body.appendChild(panel);
//为每一个元素添加事件，并传入相应的参数
right.onmousedown = function(event) {
fnDown(event, panel, right, "right");
}
bottom.onmousedown = function(event) {
fnDown(event, panel, bottom, "bottom");
}
right_bottom.onmousedown = function(event) {
fnDown(event, panel, right_bottom, "right_bottom");
}
};
function fnDown(event, panel, control, type) {
event = event || window.event;
//按下鼠标时，鼠标距离控制元素左上角的距离
//由于控制元素是绝对定位的，而且有一个已经定位的父元素，所以控制元素的offsetLeft值与offsetTop值需要额外处理
//控制元素right其offsetTop值为0.其真正距离页面上端的距离应该为它自己的offsetTop加上其父元素的offsetTop；
//其offsetLeft为390，其真正距离页面左边的距离应该加上其父元素的offsetLeft
var m_start_x = event.clientX - (control.offsetLeft + panel.offsetLeft);
var m_start_y = event.clientY - (control.offsetTop + panel.offsetTop);
document.onmousemove = function(event) {
event = event || window.event;
//计算控制元素移动的动态距离
var l = event.clientX - panel.offsetLeft - m_start_x;
var t = event.clientY - panel.offsetTop - m_start_y;
//控制其移动最小距离
if(l < 200) {
l =200;
}
if(t < 50) {
t = 50;
}
//对不同类型的控制元素分别进行处理
switch(type) {
case "right":
//让控制元素跟随鼠标移动
//一定要记得加单位！！！
control.style.left = l + "px";
//调整面板
panel.style.width = l + 10 + "px";
break;
case "bottom":
control.style.top = t + "px";
panel.style.height = t + 10 + "px";
break;
case "right_bottom":
control.style.left = l + "px";
control.style.top = t + "px";
panel.style.width = l + 10 + "px";
panel.style.height = t + 10 + "px";
}
}
document.onmouseup = function() {
//取消鼠标跟随
document.onmousemove = null;
document.onmouseup = null;
//将控制元素的位置复原
var controls = document.getElementsByClassName("resizable-control");
for(var i = 0, l = controls.length; i < l; i++) {
controls[i].style.left = "";
controls[i].style.top = "";
}
}
}
最后一步复原控制元素的位置，逻辑未明。。。
JS Resizable Panel 练习的更多相关文章
- easyloader.js源代码分析
http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...
- Dojo前端开发框架与jQuery前端开发框架，对比分析总结
最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...
- 3.EasyUI学习总结(三)——easyloader源码分析
easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...
- easyloader源码
/** * easyloader - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * ...
- Jquery easyui 教程
Jquery easyui教程 目 录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...
- easyui源码翻译1.32--EasyLoader（简单加载）
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- Dojo与jQuery综合比较分析
最近一直都在参与项目,无法抽空写些或者看些东西,周末抽了点时间看了下关于Dojo和Jquery的东西,在CSDN上看到一篇两个框架进行对比的文章,感觉写的不错,就拿了过来,没有别的意思,一来想保留下来 ...
- EasyUI学习总结(三)——easyloader源码分析(转载)
声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...
- (一)jQuery EasyUI 的EasyLoader载入原理
1.第一次看了官网的demo.引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery ...
随机推荐
- Win7上防火墙开放FTP服务以及ping解决方案（zz）
1.windows 防火墙开放ftp服务 The following 4 steps will allow both non-secure and SSL FTP traffic through fi ...
- 第十章实践——系统级I/O代码运行
第十章实践——系统级I/O代码运行 实验代码清单如下: 1. cp1——复制一个文件到另一个文件中(两个已经存在的文件) 复制前: 执行后结果 2. setecho.echostate——改变.显示输 ...
- 20145208 《Java程序设计》第7周学习总结
20145208 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda 认识Lambda语法 什么是Lambda语法 以下是维基百科上的解释: a function (or ...
- 实验箱FPGA部分测试报告及A8与FPGA链接测试报告
其实,我一开始还以为实验箱不会有什么问题只是让我们多学习东西才做这个测试的,结果发现还真的有不少问题. 1.实验准备部分 安装驱动时,win10系统无法正确安装usb-blaster Windows ...
- memset的使用
今天写程序的时候用了memset这个函数,我知道他是关于清空指针的,设置为0.但我用的时候,没有注意到他是以字节为单位进行操作的,改了半天其他程序内容.要注意的是,memset是对字字进行操作,所以以 ...
- C#中无边框窗体移动
拖动无边框窗体Form至桌面任何位置 首先建一个Windows应用程序将Form1的 FormBorderStyle属性设置为Noe Point mouseOff;//鼠标移动位置变量 bool le ...
- mysql慢查询分析工作pt-query-digest的使用
一.简单安装 wget percona.com/get/pt-query-digest chmoe u+x pt-query-digest 二.简单使用 ./pt-query-digest /var/ ...
- （旧）子数涵数·PS ——素描效果
一.准备素材(均为在百度上下载的) 二.打开ps,并在ps中打开第一张素材 三.复制图层(好习惯) 四.去色将图像变成黑白,图像->调整->去色,快捷键为Ctrl+Shift+U 五,复制 ...
- 15.C#回顾及匿名类型(八章8.1-8.5)
今天的篇幅应该会很长,除了回顾前面学的一些,还有写一些关于匿名类型的相关知识,总体上对后续的学习很有帮助,学好了,后面更容易理解,不明白的,那就前面多翻几次,看多了总是会理解的.那么,进入正题吧. 自 ...
- c# 6.0新特性（一）
写在前面 接近年底了,基本上没什么活了,就学点新东西,就想着了解下c# 6.0的新特性.在code project上看到了一篇不错的文章,就准备翻译一下,顺便照着学习学习.废话不多说,直奔主题. 原文 ...