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 相关文章推荐
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
vue实现登陆页面开发实践
May 30 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 mssql 数据库分页SQL语句
2008/12/16 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
Python break语句详解
2014/03/11 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
设备售后服务承诺书
2014/05/30 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
高一数学教学反思
2016/02/18 职场文书
Python天气语音播报小助手
2021/09/25 Python