网络编程

jquery ui resizable bug解决方法
网络编程 2025/5/16 佚名
3 2
但开启 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
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“jquery ui resizable bug解决方法”

暂无“jquery ui resizable bug解决方法”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com