热门IT资讯网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 网络技术 >

jquery调整大小(resizable)

发表于：2024-11-28 作者：热门IT资讯网编辑
编辑最后更新 2024年11月28日，看着jquery的大小收缩，自己也尝试写了一个，其实就是增加了三个div来控制大小。效果图

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

效果图

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

相关文章

0