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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 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获取金书网的书名的实现代码
2010/06/11 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Python中的各种装饰器详解
2015/04/11 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python 中@property的用法详解
2020/01/15 Python
Python reversed函数及使用方法解析
2020/03/17 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
使用C#编写创建一个线程的代码
2013/01/22 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
水务局局长岗位职责
2013/11/28 职场文书
初中生物教学反思
2014/01/10 职场文书
办理信用卡工作证明
2014/01/11 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
小学语文课后反思精选
2014/04/25 职场文书
运动会加油口号
2014/06/07 职场文书
2014年生产部工作总结
2014/12/17 职场文书
合同审查法律意见书
2015/06/04 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
MySQL派生表联表查询实战过程
2022/03/20 MySQL