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代码(如:name,age)
Aug 10 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
js数组去重的方法总结
2019/01/18 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python生成器(Generator)详解
2015/04/13 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
小区门卫工作职责
2013/12/14 职场文书
2014学年自我鉴定
2014/02/23 职场文书
优乐美广告词
2014/03/14 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
公司管理建议书
2015/09/14 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Redis三种集群模式详解
2021/10/05 Redis