Jquery UI resizable 方法 bug 解决办法。
2014-04-29 17:23
1181 查看
现在有这样一个需求,我需要改变两个div的大小,一个变大,另一个就需要变小。
有一排div 吧。
然后我让第一个变大,第二个就变小。用ui的resizable方法可以实现,但是有bug。当滑动很快时有很多问题。。研究了一下午,终于在stackoverflow上找到解决方法。网址如下:http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse/10247741#10247741
另外这个方法有点小问题,需要自己改一下,可能是他用的jquery版本太低。
如下是我改完的代码:
另外发现一个bug,如果是css有box-sizing:border-box;属性,div会一次一次的缩小...找个时间改一下。
有一排div 吧。
然后我让第一个变大,第二个就变小。用ui的resizable方法可以实现,但是有bug。当滑动很快时有很多问题。。研究了一下午,终于在stackoverflow上找到解决方法。网址如下:http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse/10247741#10247741
另外这个方法有点小问题,需要自己改一下,可能是他用的jquery版本太低。
如下是我改完的代码:
$.ui.plugin.add("resizable", "alsoResizeReverse", { start: function(event, ui) { var self = $(this).data("uiResizable"), o = self.options; var _store = function(exp) { $(exp).each(function() { $(this).data("resizable-alsoresize-reverse", { width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10), left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10) }); }); }; if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) { if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0]; _store(o.alsoResizeReverse); } else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); } }else{ _store(o.alsoResizeReverse); } }, resize: function(event, ui){ var self = $(this).data("uiResizable"), o = self.options, os = self.originalSize, op = self.originalPosition; var delta = { height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0, top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0 }, _alsoResizeReverse = function(exp, c) { $(exp).each(function() { var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left']; $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) { var sum = (start[prop]||0) - (delta[prop]||0); if (sum && sum >= 0) style[prop] = sum || null; }); //Opera fixing relative position if (/relative/.test(el.css('position')) && false) { self._revertToRelativePosition = true; el.css({ position: 'absolute', top: 'auto', left: 'auto' }); } el.css(style); }); }; if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) { $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); }); }else{ _alsoResizeReverse(o.alsoResizeReverse); } }, stop: function(event, ui){ var self = $(this).data("uiResizable"); //Opera fixing relative position if (self._revertToRelativePosition && $.browser.opera) { self._revertToRelativePosition = false; el.css({ position: 'relative' }); } $(this).removeData("resizable-alsoresize-reverse"); } });调用如下:
$("#div1").resizable({ grid: [ 20, 20 ], handles:'e', minWidth:20, alsoResizeReverse: "#div2", resize:function(event,ui){ $(this).resizable( "option", "maxWidth", div1.width()+div2.width()-20 ); } });
另外发现一个bug,如果是css有box-sizing:border-box;属性,div会一次一次的缩小...找个时间改一下。
相关文章推荐
- jquery ui resizable bug解决方法
- jquery ui resizable bug解决方法
- jquery.ui.dialog 1.81在IE8中出现滚动条bug解决方法
- jquery.ui.dialog 1.81在IE8中出现滚动条bug解决方法
- jquery formValidator插件ajax验证,在内容不做修改的前提下提示错误的bug解决方法
- comfortable-mexican-sofa 安装后提示:File to import not found or unreadable: jquery.ui.all 的解决办法
- JQuery UI autocomplete 中文乱码的解决方法
- DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
- ajax异步模式下实现等待loading(jQuery同步Ajax带来的UI线程阻塞问题及解决办法)
- Jquery ui dialog只能运行一次的解决方法
- Ajax请求Session超时的解决办法:拦截器 + 封装jquery的post方法
- 在jquery ui dialog里面的autocomplete和chosen插件的下拉列表被覆盖的解决方法
- jquery(live)中File input的change方法只起一次作用的解决办法
- jQuery UI Dialog 表单无法提交的解决方法
- jquery ajax done 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
- 曲线解决CMFCPropertyGridCtrl掩码的bug2009年12月30日 星期三 下午 01:24CMFCPropertyGridCtrl这个控件当用到掩码时,会有问题.解决办法用其他掩码替代.下面是一个IP掩码处理方法.代码如下
- jquery.ui.accordion 1.8.18与jQuery UI Tabs 1.8.18冲突的解决办法
- jQuery同步Ajax带来的UI线程阻塞问题及解决办法
- JQuery-AJAX 不支持对象此方法或属性解决办法
- jquery blockUI 遮罩不能消失与不能提交的解决方法