jquery ui resizable bug解决方法


Posted in Javascript onOctober 26, 2010

但开启 helper: 'ui-resizable-helper' 或animate: true, 时候,会发现官方的例子的宽度自动增加了10PX 仔细翻源代码一看,发现有以下问题:(如图)
jquery ui resizable bug解决方法

竟然用padding 难怪会自动添加宽度
这个问题在ie firefox下都存在.
其中这个问题比较难发现,但你可以用以下代码测试出来:

<style type="text/css"> 
#resizable { width: 350px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-helper { border: 1px dotted #ddd; } 
</style> 
<script type="text/javascript"> 
$(function() { 
$("#resizable").resizable({ 
maxWidth: 350,#让最大宽度和最小宽度一致 
minHeight: 150, 
minWidth: 350, 
helper: 'ui-resizable-helper' 
}); 
}); 
</script> 
</head> 
<body> 
<div id="resizable" class="ui-widget-content"> 
test 
</div> 
</body>

jquery ui resizable bug解决方法

只要把上面的

 #resizable { width: 350px; height: 150px; padding: 0.5em; }
 #resizable h3 { text
-align: center; margin: 0; }

改为:

 #resizable { width: 350px; height: 150px; }
 #resizable h3 { text
-align: center; margin: 5px; } 

即可.

其实细心一点会发现还有问题:

jquery ui resizable bug解决方法 

其实就是ui-widget-content的边框的大小为1px造成的,所以,我们改把#resizable的宽度在缩小2px

修改代码:

 #resizable { width: 350px; height: 150px; }

为:

#resizable { width: 348px; height: 150px; } 

在测试,正常了.

发现JQUI的小问题还真不少....

Javascript 相关文章推荐
文字幻灯片
Jun 26 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
详解vue 图片上传功能
Apr 30 Javascript
js实现秒表计时器
Dec 16 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
HTML Dom与Css控制方法
Oct 25 #Javascript
Dom在ajax技术中的作用说明
Oct 25 #Javascript
Dom与浏览器兼容性说明
Oct 25 #Javascript
Dom 是什么的详细说明
Oct 25 #Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 #Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 #Javascript
javascript 隔行换色函数代码
Oct 24 #Javascript
You might like
PHP 图片水印类代码
2012/08/27 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python字典底层实现原理详解
2019/12/18 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
新文化运动的基本口号
2014/06/21 职场文书
医药销售自我评价200字
2014/09/11 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2015年党员承诺书
2015/01/21 职场文书
班主任开场白
2015/06/01 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
实习报告范文
2019/07/30 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书