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 练习的更多相关文章

  1. easyloader.js源代码分析

    http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...

  2. Dojo前端开发框架与jQuery前端开发框架，对比分析总结

    最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...

  3. 3.EasyUI学习总结(三)——easyloader源码分析

    easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...

  4. easyloader源码

    /** * easyloader - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * ...

  5. Jquery easyui 教程

            Jquery easyui教程                 目  录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...

  6. easyui源码翻译1.32--EasyLoader（简单加载）

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  7. Dojo与jQuery综合比较分析

    最近一直都在参与项目,无法抽空写些或者看些东西,周末抽了点时间看了下关于Dojo和Jquery的东西,在CSDN上看到一篇两个框架进行对比的文章,感觉写的不错,就拿了过来,没有别的意思,一来想保留下来 ...

  8. EasyUI学习总结(三)——easyloader源码分析(转载)

    声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...

  9. (一)jQuery EasyUI 的EasyLoader载入原理

    1.第一次看了官网的demo.引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery ...

随机推荐

  1. CLR Profiler

    检查c#代码内存泄露工具-CLR Profiler 大家都知道.net有一套自己的内存(垃圾)回收机制,除非有一些数据(方法)长期占有内存不随着垃圾回收功能而释放内存,这样就造成了我们经常说的内存泄露 ...

  2. php基础05：常量

    <?php // 1.PHP 常量介绍 // 常量是单个值的标识符(名称).在脚本中无法改变该值.有效的常量名以字符或下划线开头(常量名称前面没有 $ 符号). // 2设置 PHP 常量 // ...

  3. TinyFrame升级之二：数据底层访问部分

    在上一篇中,我列举了框架的整体结构,下面我们将一一说明: 首先需要说明的是TinyFrame.Data. 它主要用于处理数据库底层操作.包含EF CodeFirst,Repository,Unitof ...

  4. 学习bash

    工作8年,前6年基本是Windows环境下,也就是个鼠标党:两年前换工作开始用linux,也就开始了领略了命令行的强大,无论是直接在命令行组合命令,也还写几行简单的shell脚本,其能完成的功能往往令 ...

  5. 启动页面设置，icon图标设置

    更多尺寸像素如何放置请看:http://chicun.jammy.cc/ 如何设置App的启动图,也就是Launch Image? 新建一个iosLaunchImage文件夹

  6. 身份证号码自动生成程序（Python）

    今天收到一个小需求:需要一个自动生成身份证号码的小程序.近期用python较多,因此打算用python实现. 需求细化: 1.身份证必须能够通过身份证校验程序. 2.通过查询,发现身份证号码是有国家标 ...

  7. 关于json 与 Request Header 的Content-Type 一些关系。

    由于最近遇到关于,ashx文件ajax解析参数的问题.查询网上很多资料后,已经解决. 鉴于网上已经足够多的,关于这个问题的文章.大部分内容来自互联网,我这里只是做一些整理和记录.特此说明并非原创. C ...

  8. 一句话概括下spring框架及spring cloud框架主要组件

    作为java的屌丝,基本上跟上spring屌丝的步伐,也就跟上了主流技术.spring 顶级项目:Spring IO platform:用于系统部署,是可集成的,构建现代化应用的版本平台,具体来说当你 ...

  9. jQuery基础之（二）jQuery中的$

    在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuer ...

  10. 一条命令使win7可以直接运行.net3.5程序

    dism /online /get-features 获取 功能名称 dism /online /enable-feature /featurename:NetFx3  启用win7自带的.net f ...