jquery.resizable.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. /**
  2. * jQuery EasyUI 1.4.4
  3. *
  4. * Copyright (c) 2009-2015 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. *
  9. */
  10. /**
  11. * resizable - jQuery EasyUI
  12. *
  13. */
  14. (function($){
  15. // var isResizing = false;
  16. $.fn.resizable = function(options, param){
  17. if (typeof options == 'string'){
  18. return $.fn.resizable.methods[options](this, param);
  19. }
  20. function resize(e){
  21. var resizeData = e.data;
  22. var options = $.data(resizeData.target, 'resizable').options;
  23. if (resizeData.dir.indexOf('e') != -1) {
  24. var width = resizeData.startWidth + e.pageX - resizeData.startX;
  25. width = Math.min(
  26. Math.max(width, options.minWidth),
  27. options.maxWidth
  28. );
  29. resizeData.width = width;
  30. }
  31. if (resizeData.dir.indexOf('s') != -1) {
  32. var height = resizeData.startHeight + e.pageY - resizeData.startY;
  33. height = Math.min(
  34. Math.max(height, options.minHeight),
  35. options.maxHeight
  36. );
  37. resizeData.height = height;
  38. }
  39. if (resizeData.dir.indexOf('w') != -1) {
  40. var width = resizeData.startWidth - e.pageX + resizeData.startX;
  41. width = Math.min(
  42. Math.max(width, options.minWidth),
  43. options.maxWidth
  44. );
  45. resizeData.width = width;
  46. resizeData.left = resizeData.startLeft + resizeData.startWidth - resizeData.width;
  47. // resizeData.width = resizeData.startWidth - e.pageX + resizeData.startX;
  48. // if (resizeData.width >= options.minWidth && resizeData.width <= options.maxWidth) {
  49. // resizeData.left = resizeData.startLeft + e.pageX - resizeData.startX;
  50. // }
  51. }
  52. if (resizeData.dir.indexOf('n') != -1) {
  53. var height = resizeData.startHeight - e.pageY + resizeData.startY;
  54. height = Math.min(
  55. Math.max(height, options.minHeight),
  56. options.maxHeight
  57. );
  58. resizeData.height = height;
  59. resizeData.top = resizeData.startTop + resizeData.startHeight - resizeData.height;
  60. // resizeData.height = resizeData.startHeight - e.pageY + resizeData.startY;
  61. // if (resizeData.height >= options.minHeight && resizeData.height <= options.maxHeight) {
  62. // resizeData.top = resizeData.startTop + e.pageY - resizeData.startY;
  63. // }
  64. }
  65. }
  66. function applySize(e){
  67. var resizeData = e.data;
  68. var t = $(resizeData.target);
  69. t.css({
  70. left: resizeData.left,
  71. top: resizeData.top
  72. });
  73. if (t.outerWidth() != resizeData.width){t._outerWidth(resizeData.width)}
  74. if (t.outerHeight() != resizeData.height){t._outerHeight(resizeData.height)}
  75. // t._outerWidth(resizeData.width)._outerHeight(resizeData.height);
  76. }
  77. function doDown(e){
  78. // isResizing = true;
  79. $.fn.resizable.isResizing = true;
  80. $.data(e.data.target, 'resizable').options.onStartResize.call(e.data.target, e);
  81. return false;
  82. }
  83. function doMove(e){
  84. resize(e);
  85. if ($.data(e.data.target, 'resizable').options.onResize.call(e.data.target, e) != false){
  86. applySize(e)
  87. }
  88. return false;
  89. }
  90. function doUp(e){
  91. // isResizing = false;
  92. $.fn.resizable.isResizing = false;
  93. resize(e, true);
  94. applySize(e);
  95. $.data(e.data.target, 'resizable').options.onStopResize.call(e.data.target, e);
  96. $(document).unbind('.resizable');
  97. $('body').css('cursor','');
  98. // $('body').css('cursor','auto');
  99. return false;
  100. }
  101. return this.each(function(){
  102. var opts = null;
  103. var state = $.data(this, 'resizable');
  104. if (state) {
  105. $(this).unbind('.resizable');
  106. opts = $.extend(state.options, options || {});
  107. } else {
  108. opts = $.extend({}, $.fn.resizable.defaults, $.fn.resizable.parseOptions(this), options || {});
  109. $.data(this, 'resizable', {
  110. options:opts
  111. });
  112. }
  113. if (opts.disabled == true) {
  114. return;
  115. }
  116. // bind mouse event using namespace resizable
  117. $(this).bind('mousemove.resizable', {target:this}, function(e){
  118. // if (isResizing) return;
  119. if ($.fn.resizable.isResizing){return}
  120. var dir = getDirection(e);
  121. if (dir == '') {
  122. $(e.data.target).css('cursor', '');
  123. } else {
  124. $(e.data.target).css('cursor', dir + '-resize');
  125. }
  126. }).bind('mouseleave.resizable', {target:this}, function(e){
  127. $(e.data.target).css('cursor', '');
  128. }).bind('mousedown.resizable', {target:this}, function(e){
  129. var dir = getDirection(e);
  130. if (dir == '') return;
  131. function getCssValue(css) {
  132. var val = parseInt($(e.data.target).css(css));
  133. if (isNaN(val)) {
  134. return 0;
  135. } else {
  136. return val;
  137. }
  138. }
  139. var data = {
  140. target: e.data.target,
  141. dir: dir,
  142. startLeft: getCssValue('left'),
  143. startTop: getCssValue('top'),
  144. left: getCssValue('left'),
  145. top: getCssValue('top'),
  146. startX: e.pageX,
  147. startY: e.pageY,
  148. startWidth: $(e.data.target).outerWidth(),
  149. startHeight: $(e.data.target).outerHeight(),
  150. width: $(e.data.target).outerWidth(),
  151. height: $(e.data.target).outerHeight(),
  152. deltaWidth: $(e.data.target).outerWidth() - $(e.data.target).width(),
  153. deltaHeight: $(e.data.target).outerHeight() - $(e.data.target).height()
  154. };
  155. $(document).bind('mousedown.resizable', data, doDown);
  156. $(document).bind('mousemove.resizable', data, doMove);
  157. $(document).bind('mouseup.resizable', data, doUp);
  158. $('body').css('cursor', dir+'-resize');
  159. });
  160. // get the resize direction
  161. function getDirection(e) {
  162. var tt = $(e.data.target);
  163. var dir = '';
  164. var offset = tt.offset();
  165. var width = tt.outerWidth();
  166. var height = tt.outerHeight();
  167. var edge = opts.edge;
  168. if (e.pageY > offset.top && e.pageY < offset.top + edge) {
  169. dir += 'n';
  170. } else if (e.pageY < offset.top + height && e.pageY > offset.top + height - edge) {
  171. dir += 's';
  172. }
  173. if (e.pageX > offset.left && e.pageX < offset.left + edge) {
  174. dir += 'w';
  175. } else if (e.pageX < offset.left + width && e.pageX > offset.left + width - edge) {
  176. dir += 'e';
  177. }
  178. var handles = opts.handles.split(',');
  179. for(var i=0; i<handles.length; i++) {
  180. var handle = handles[i].replace(/(^\s*)|(\s*$)/g, '');
  181. if (handle == 'all' || handle == dir) {
  182. return dir;
  183. }
  184. }
  185. return '';
  186. }
  187. });
  188. };
  189. $.fn.resizable.methods = {
  190. options: function(jq){
  191. return $.data(jq[0], 'resizable').options;
  192. },
  193. enable: function(jq){
  194. return jq.each(function(){
  195. $(this).resizable({disabled:false});
  196. });
  197. },
  198. disable: function(jq){
  199. return jq.each(function(){
  200. $(this).resizable({disabled:true});
  201. });
  202. }
  203. };
  204. $.fn.resizable.parseOptions = function(target){
  205. var t = $(target);
  206. return $.extend({},
  207. $.parser.parseOptions(target, [
  208. 'handles',{minWidth:'number',minHeight:'number',maxWidth:'number',maxHeight:'number',edge:'number'}
  209. ]), {
  210. disabled: (t.attr('disabled') ? true : undefined)
  211. })
  212. };
  213. $.fn.resizable.defaults = {
  214. disabled:false,
  215. handles:'n, e, s, w, ne, se, sw, nw, all',
  216. minWidth: 10,
  217. minHeight: 10,
  218. maxWidth: 10000,//$(document).width(),
  219. maxHeight: 10000,//$(document).height(),
  220. edge:5,
  221. onStartResize: function(e){},
  222. onResize: function(e){},
  223. onStopResize: function(e){}
  224. };
  225. $.fn.resizable.isResizing = false;
  226. })(jQuery);