jquery.resizable.js 7.3 KB

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