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 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
使用express来代理服务的方法
Jun 21 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
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP中使用curl入门教程
2015/07/02 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
Python自动发邮件脚本
2017/03/31 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
PyQt5实现简易计算器
2020/05/30 Python
python修改FTP服务器上的文件名
2019/09/11 Python
求网格中的黑点分布
2013/11/06 面试题
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
安全标兵事迹材料
2014/08/17 职场文书
团队拓展活动总结
2014/08/27 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
圣诞晚会主持词
2015/07/01 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL