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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
js 深拷贝函数
Dec 04 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
JS打印组合功能
Aug 04 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP计数器的实现代码
2013/06/08 PHP
php实现telnet功能示例
2014/04/08 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
浅析vue深复制
2018/01/29 Javascript
详解微信UnionID作用
2019/05/15 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python处理二进制数据的方法
2015/06/03 Python
Python AES加密模块用法分析
2017/05/22 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python groupby 函数 as_index详解
2019/12/16 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
探亲邀请信范文
2014/01/30 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
平面设计专业求职信
2014/08/09 职场文书
导游词之杭州西湖
2019/09/19 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis