jquery.resizable.js 6.3 KB

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