元素可以自定义大小,任意伸缩的JS类, HelloResizables 0.1 发布啦...

在ie6/ie7/ff2/sf3 + xp 下通过测试

Bug:ie6下有点瑕疵,op9失效...事件没添加成功.....

Demo: http://willko.cn/js/HelloResizables/demo.html

Download: http://willko.cn/js/HelloResizables/HelloResizables.css
                               http://willko.cn/js/HelloResizables/HelloResizables.js

Example:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1"   />
         < title > Untitled Document </ title >
         < link  rel ="stylesheet"  type ="text/css"  href ="HelloResizables.css"   />
         < script  type ="text/javascript"  src ="HelloResizables.js" ></ script >
         < script  type ="text/javascript" > ...
        //<![CDATA[
        function $(id) ...{
            return document.getElementById(id);
        }
        function d(o) ...{
            var str = '';
            for (var prop in o) ...{
                str += prop + ":" + o[prop] + " ";
            }
            return str;
        }
        
        //]]>
         </ script >
     </ head >
     < body >
         < a  href ="javascript:alert(d(he.getSize()));" > view </ a >
        
         < div  id ="resize"  style ="border:1px solid;height:50px;width:50px;position:absolute;left:30%;top:30%;" > &nbsp; </ div >
         < script  type ="text/javascript" > ...
            var he = new HelloResizables($('resize'), ...{'minHeight':35, 'minWidth':45
                                        , 'maxHeight':350, 'maxWidth':400});
         </ script >
     </ body >
</ html >

简单说明:
new HelloResizables($('resize'), {'minHeight':35, 'minWidth':45
                                        , 'maxHeight':350, 'maxWidth':400});
第一个参数可以是元素或者ID, 第2个参数可有可无请看setLimit函数..

HelloResizables.getSize 函数返回元素的height, width, left, top以及minHeight, maxHeight, minWidth, maxWidth

HelloResizables.setLimit 函数设置minHeight, maxHeight, minWidth, maxWidth
例如:{'minHeight':35, 'minWidth':45, 'maxHeight':350, 'maxWidth':400}