jquery调整大小(resizable)

发布时间:2020-04-29 17:51:18 作者:huxiaoqi567
来源:网络 阅读:1211

 看着jquery的大小收缩,自己也尝试写了一个,其实就是增加了三个div来控制大小。

jquery调整大小(resizable)效果图

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>resizable</title> 
  6. <style type="text/css"> 
  7. body{    
  8.   -moz-user-focus:ignore;    
  9.   -moz-user-input:disabled;    
  10.   -moz-user-select:none;    
  11. }      
  12. .ui-resizable-bd{ 
  13.     background:none; 
  14.     position: absolute; 
  15.     z-index: 1000; 
  16. .ui-resizable-bd-east{ 
  17.     cursor: e-resize; 
  18. .ui-resizable-bd-south{ 
  19.     cursor: s-resize; 
  20. .ui-resizable-bd-corner{ 
  21.     width:16px; 
  22.     height:16px; 
  23.     cursor: nw-resize; 
  24. /*  右下角小图标 */ 
  25.     background: url(p_w_picpaths/resizable.JPG) no-repeat;  
  26. </style> 
  27. </head> 
  28. <body> 
  29. <div style='width:960px;height:600px;margin: 0px auto;'> 
  30.     <div id='demo' style='width:200px;height:200px;border: 1px solid;margin: 0px auto;'> 
  31.          
  32.     </div> 
  33. </div> 
  34. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>  
  35. <script type="text/javascript"> 
  36. /** 
  37.  * jquery resizable 
  38.  * @author huxiaoqi 
  39.  */ 
  40. (function($){ 
  41.     $.fn.resizable = function(cfg){ 
  42.         var self = $(this); 
  43.         var BD_E = $("<div class='ui-resizable-bd ui-resizable-bd-east'></div>"); 
  44.         var BD_S = $("<div class='ui-resizable-bd ui-resizable-bd-south'></div>"); 
  45.         var BD_SE = $("<div class='ui-resizable-bd ui-resizable-bd-corner'></div>"); 
  46.         var WIDTH = self.width(); 
  47.         var HEIGHT = self.height(); 
  48.         var pos = self.offset(); 
  49.         var BD_WIDTH = 3;   //default border width 
  50.         var documentObj = $(document); 
  51.         var bodyObj = $('body',documentObj); 
  52.         /* 
  53.          * 定义缩放最小值 
  54.          */ 
  55.         var _default = {                     
  56.                             minwidth:50, 
  57.                             minheight:50 
  58.                         }; 
  59.         var config = $.extend({},_default,cfg); 
  60.         //放入节点 
  61.         BD_E.insertAfter(self); 
  62.         BD_S.insertAfter(self); 
  63.         BD_SE.insertAfter(self); 
  64.         setBDPos(WIDTH, HEIGHT, pos.left, pos.top); 
  65.         documentObj.bind({ 
  66.             'mousedown':function(e){ 
  67.                 if(isBD(e.target)){ 
  68.                     var currentTarget = e.target; 
  69.                     var className = currentTarget.className; 
  70.                     documentObj.bind('mousemove',function(e){ 
  71.                         pos = self.offset(); 
  72.                         WIDTH = self.width(); 
  73.                         HEIGHT = self.height(); 
  74.                         var width = e.pageX - pos.left; 
  75.                         var height = e.pageY - pos.top; 
  76.                         if(className.indexOf('bd-east') != -1){ 
  77.                             /* 
  78.                              * east border 
  79.                              */                          
  80.                             if(width > config.minwidth ){ 
  81.                                 self.width(width); 
  82.                                 setBDPos(width, HEIGHT, pos.left, pos.top); 
  83.                             } 
  84.                             bodyObj.css('cursor','e-resize'); 
  85.                         } 
  86.                         else if(className.indexOf('bd-south') != -1){ 
  87.                             /* 
  88.                              * south border 
  89.                              */ 
  90.                             if(height > config.minheight ){ 
  91.                                 self.height(height); 
  92.                                 setBDPos(WIDTH, height, pos.left, pos.top); 
  93.                             } 
  94.                             bodyObj.css('cursor','s-resize'); 
  95.                         } 
  96.                         else if(className.indexOf('bd-corner') != -1){ 
  97.                             /* 
  98.                              * south-east border 
  99.                              */ 
  100.                             if(width > config.minwidth && height > config.minheight){ 
  101.                                 self.width(width); 
  102.                                 self.height(height); 
  103.                                 setBDPos(width, height, pos.left, pos.top); 
  104.                             } 
  105.                             bodyObj.css('cursor','se-resize'); 
  106.                         } 
  107.                     }); 
  108.                 } 
  109.             }, 
  110.             'mouseup':function(e){ 
  111.                 documentObj.unbind('mousemove'); 
  112.                 bodyObj.css('cursor','default'); 
  113.             } 
  114.         }); 
  115.          
  116.         //get border position 
  117.         function setBDPos(w,h,l,t){ 
  118.             BD_E.css({'width':BD_WIDTH,'height':h,'left':l+w,'top':t}); 
  119.             BD_S.css({'width':w,'height':BD_WIDTH,'top':t+h,'left':l}); 
  120.             BD_SE.css({'left':l+w-BD_SE.width(),'top':t+h-BD_SE.height()}); 
  121.         }; 
  122.         //justify target is border ? 
  123.         function isBD(target){       
  124.             if(target && target.className){ 
  125.                 return target.className.indexOf('ui-resizable-bd') != -1; 
  126.             }    
  127.             return false; 
  128.         } 
  129.     }; 
  130. })(jQuery); 
  131. </script> 
  132. <script type="text/javascript"> 
  133. $('#demo').resizable(); 
  134. </script> 
  135. </body> 
  136. </html> 

 

推荐阅读:
  1. jquery中easyui对话框怎么用
  2. 07 jQuery EasyUI 之Resizable调整大小

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery调整大小(resizable ue j

上一篇:40款非常棒的 jQuery 插件和制作教程(系列二)

下一篇:Python基础【高阶函数】

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》