2012/11/26——2012/11/30周记

最新推荐文章于 2023-08-27 19:49:07 发布

尐尐尐欢欢

最新推荐文章于 2023-08-27 19:49:07 发布

阅读量492

点赞数

分类专栏：工作日志

本文链接：https://blog.csdn.net/Learner9023/article/details/8225001

版权

工作日志专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2012-11-26 周一

说来伤心，要做鼠标拖动随意改变div大小的效果，昨天折腾了一个下午，最后搜索到了几段代码，还发现可以用jquery ui插件实现，没了耐心，所以打算今天再做。今天改来改去到了中午，算是搞定了。用jquery ui插件貌似要引入很多东西，总是报错，于是放弃了。

搜来一段代码修改一下用了：

<html>

<head>
<title></title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<style> 
#testDiv{ 
 position:absolute;
 width:100%;
 height:200;
 overflow: hidden; 
 z-index: 2; 
 border: 1px outset ; 
}

#innerNice{
 height: 200; 
 overflow: auto; 
 width: 100%; 
 border: 1px inset ; 
}

</style>

<SCRIPT language=javascript>
/
// Generic Resize                                     //
//                                                                     //
// You may use this script as long as this disclaimer is remained.     //
               //
//                                                                     //
// How to use this script!                                             //
// Link the script in the HEAD and create a container (DIV, preferable //
// absolute positioned) and add the class="resizeMe" to it.            //
/

var leftObject = null; //This gets a value as soon as a resize start

function resizeObject() {
 this.el        = null; //pointer to the object
 this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
 this.grabx = null;     //Some useful values
 this.graby = null;
 this.width = null;
 this.height = null;
 this.left = null;
 this.top = null;
}
 

//Find out what kind of resize! Return a string inlcluding the directions
function getDirection(el) {
 var xPos, yPos, offset, dir;
 dir = "";

 xPos = window.event.offsetX;
 yPos = window.event.offsetY;

 offset = 8; //The distance from the edge in pixels

 if (yPos<offset) dir += "n";
 else if (yPos > el.offsetHeight-offset) dir += "s";
 if (xPos<offset) dir += "w";
 else if (xPos > el.offsetWidth-offset) dir += "e";

 return dir;
}

function doDown() {
 var el = getReal(event.srcElement, "className", "resizeMe");
 var er = getReal(event.srcElement, "className", "resizeRight");

 if (el == null) {
  theobject = null;
  return;
 }  

 dir = getDirection(el);
 if (dir == "") return;

 leftObject = new resizeObject();
  
 leftObject.el = el;
 leftObject.dir = dir;

 leftObject.grabx = window.event.clientX;
 leftObject.graby = window.event.clientY;
 leftObject.width = el.offsetWidth;
 leftObject.height = el.offsetHeight;
 leftObject.left = el.offsetLeft;
 leftObject.top = el.offsetTop;

 window.event.returnValue = false;
 window.event.cancelBubble = true;
}

function doUp() {
 if (leftObject != null) {
  leftObject = null;
 }
}

function doMove() {
 var el, er, xPos, yPos, str, xMin, yMin;
 xMin = 200; //The smallest width possible
 yMin = 200; //             height

 el = getReal(event.srcElement, "className", "resizeMe");
 er = getReal(event.srcElement, "className", "resizeRight");

 if (el.className == "resizeMe") {
  str = getDirection(el);
 //Fix the cursor 
  if (str == "") str = "default";
  else str += "-resize";
  el.style.cursor = str;
 }
 
//Dragging starts here
 if(leftObject != null) {
  if (dir.indexOf("e") != -1)
   leftObject.el.style.width = Math.max(xMin, leftObject.width + window.event.clientX - leftObject.grabx) + "px";
 
  if (dir.indexOf("s") != -1)
   leftObject.el.style.height = Math.max(yMin, leftObject.height + window.event.clientY - leftObject.graby) + "px";

  if (dir.indexOf("w") != -1) {
   leftObject.el.style.left = Math.min(leftObject.left + window.event.clientX - leftObject.grabx, leftObject.left + leftObject.width - xMin) + "px";
   leftObject.el.style.width = Math.max(xMin, leftObject.width - window.event.clientX + leftObject.grabx) + "px";
  }
  if (dir.indexOf("n") != -1) {
   leftObject.el.style.top = Math.min(leftObject.top + window.event.clientY - leftObject.graby, leftObject.top + leftObject.height - yMin) + "px";
   leftObject.el.style.height = Math.max(yMin, leftObject.height - window.event.clientY + leftObject.graby) + "px";
  }
  
  window.event.returnValue = false;
  window.event.cancelBubble = true;
 } 
}


function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}

document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
</SCRIPT>

 

<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<body>

 <div class="resizeMe" id="testDiv" >
  <div id="innerNice" style="background-color:gray">
 border
   </div>
  </div>

</body>
</html>

为了防止拖大到一定程度会出现透明、露出底层的内容，可以把div的background设置为white。

2012-11-27 周二

上午调了很久也没有调好，想要实现上下两个div，在中间拖动鼠标可以实现上下两个div动态的缩放大小。

下午试着做fusionchart，明天再做到项目里面。这个配置起来是比皕杰报表容易多了。动态的效果也是皕杰报表没办法比的，不过，fusionchart不可以做表格，只可以做图表。

2012-11-28 周三

用Integer.parseint()转换字符串为整形的时候，注意，要处理NumberFormatException异常

2012-29 周四

完成了宁波的fusionchart，很简单，复制台州的

2012-11-30 周五

调整图表，做了一个表格，今天很得心应手，继续努力。

尐尐尐欢欢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2012/11/26——2012/11/30周记

2012-11-26 周一说来伤心，要做鼠标拖动随意改变div大小的效果，昨天折腾了一个下午，最后搜索到了几段代码，还发现可以用jquery ui插件实现，没了耐心，所以打算今天再做。今天改来改去到了中午，算是搞定了。用jquery ui插件貌似要引入很多东西，总是报错，于是放弃了。搜来一段代码修改一下用了： #testDiv{ position:abso
复制链接

扫一扫

专栏目录