jquery ui resizable bug解决方法
更新时间：2010年10月26日 09:31:55 作者：
其实这个也不算是 resizable 的BUG,但从官网下载下来的确实存在问题
但开启 helper: 'ui-resizable-helper' 或animate: true, 时候,会发现官方的例子的宽度自动增加了10PX 仔细翻源代码一看,发现有以下问题:(如图)
竟然用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>
竟然用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>
只要把上面的
#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; }
即可.
其实细心一点会发现还有问题:
其实就是ui-widget-content的边框的大小为1px造成的,所以,我们改把#resizable的宽度在缩小2px
修改代码:
#resizable { width: 350px; height: 150px; }
为:
#resizable { width: 348px; height: 150px; }
在测试,正常了.
发现JQUI的小问题还真不少....
相关文章
多级菜单，理论上支持无限多的层级，文件结构非常简单的，以下是完整代码，有需要的朋友可以参考一下2013-10-10
js前台判断开始时间是否小于结束时间,结合了jquery需要的朋友可以参考下2012-02-02
这篇文章主要介绍了Jquery中基本选择器用法,以实例形式较为详细的分析了jQuery中常见选择器的使用方法,并备有较为详细的备注说明,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了jquery实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
下面小编就为大家带来一篇jQuery 获取遍历获取table中每一个tr中的第一个td的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jQuery选择器源码解读（三）：tokenize方法,本文用详细的注释解读了tokenize方法的实现源码,需要的朋友可以参考下2015-03-03
下面小编就为大家带来一篇jQuery validata插件实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了jQuery实现ajax无刷新分页页码控件,需要的朋友可以参考下2017-02-02
jquery除了它自己非常出色的js功能之外还附带有数不清的插件，可以完成各种美好的效果和功能。jquery.qrcode就是其中一个，用来在线生成二维码2013-08-08
在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false，下面举几个jquery ajax同步和异步实例2013-11-11
最新评论