编程 Javascript

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的小问题还真不少....

jquery ui resizable bug解决方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js模仿jquery的写法示例代码

Jun 16 Javascript

js用正则表达式来验证表单(比较齐全的资源)

Nov 17 Javascript

js获取客户端外网ip的简单实例

Nov 21 Javascript

JS cookie中文乱码解决方法

Jan 28 Javascript

AngularJS模块管理问题的非常规处理方法

Apr 29 Javascript

JavaScript基本类型值-Number类型

Feb 24 Javascript

vue实现动态数据绑定

Apr 28 Javascript

Bootstrap布局之栅格系统学习笔记

May 04 Javascript

Bootstrap 模态框多次显示后台提交多次BUG的解决方法

Dec 26 Javascript

基于jquery.page.js实现分页效果

Jan 01 jQuery

使用vscode快速建立vue模板过程详解

Oct 10 Javascript

浅析JavaScript中的变量提升

Jun 01 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实现变色验证码实例

2014/01/06 PHP

php数组合并array_merge()函数使用注意事项

2014/06/19 PHP

PHP屏蔽过滤指定关键字的方法

2014/11/03 PHP

php中stdClass的用法分析

2015/02/27 PHP

php获取汉字拼音首字母的方法

2015/10/21 PHP

PHP设计模式（八）装饰器模式Decorator实例详解【结构型】

2020/05/02 PHP

PHP array_reverse() 函数原理及实例解析

2020/07/14 PHP

编写自己的jQuery插件简单实现代码

2011/04/19 Javascript

js中的preventDefault与stopPropagation详解

2014/01/29 Javascript

jQuery中:text选择器用法实例

2015/01/03 Javascript

DOM基础教程之事件对象

2015/01/20 Javascript

10个经典的网页鼠标特效代码

2018/01/09 Javascript

解决bootstrap-select 动态加载数据不显示的问题

2018/08/10 Javascript

JS数组去重的6种方法完整实例

2018/12/08 Javascript

js实现图片放大并跟随鼠标移动特效

2019/01/18 Javascript

JavaScript实现轮播图效果代码实例

2019/09/28 Javascript

Vue 实现CLI 3.0 + momentjs + lodash打包时优化

2019/11/13 Javascript

js prototype深入理解及应用实例分析

2019/11/25 Javascript

javascript实现电商放大镜效果

2020/11/23 Javascript

[01:10]DOTA2亚洲邀请赛征战号角响彻全场

2015/01/06 DOTA

[15:46]教你分分钟做大人——沙王

2015/03/11 DOTA

跟老齐学Python之有容乃大的list(2)

2014/09/15 Python

Python最长公共子串算法实例

2015/03/07 Python

python 爬取微信文章

2016/01/30 Python

Python快速从注释生成文档的方法

2016/12/26 Python

python使用logging模块发送邮件代码示例

2018/01/18 Python

python Pandas如何对数据集随机抽样

2019/07/29 Python

python程序实现BTC（比特币）挖矿的完整代码

2021/01/20 Python

详解Css3新特性应用之过渡与动画

2017/01/10 HTML / CSS

Linux文件系统类型

2012/02/15 面试题

护士辞职信模板

2014/01/20 职场文书

工厂门卫岗位职责范本

2014/04/04 职场文书

2014年教师业务学习材料

2014/05/12 职场文书

护士节策划方案

2014/05/19 职场文书

机电系毕业生求职信

2014/07/11 职场文书

2014年勤工助学工作总结

2014/11/24 职场文书