jquery ui resizable bug解決方法
更新時(shí)間：2010年10月26日 09:31:55 作者：
其實(shí)這個(gè)也不算是 resizable 的BUG,但從官網(wǎng)下載下來(lái)的確實(shí)存在問(wèn)題
但開(kāi)啟 helper: 'ui-resizable-helper' 或animate: true, 時(shí)候,會(huì)發(fā)現(xiàn)官方的例子的寬度自動(dòng)增加了10PX 仔細(xì)翻源代碼一看,發(fā)現(xiàn)有以下問(wèn)題:(如圖)
竟然用padding 難怪會(huì)自動(dòng)添加寬度
這個(gè)問(wèn)題在ie firefox下都存在.
其中這個(gè)問(wèn)題比較難發(fā)現(xiàn),但你可以用以下代碼測(cè)試出來(lái):
<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 難怪會(huì)自動(dòng)添加寬度
這個(gè)問(wèn)題在ie firefox下都存在.
其中這個(gè)問(wèn)題比較難發(fā)現(xiàn),但你可以用以下代碼測(cè)試出來(lái):
復(fù)制代碼 代碼如下:
<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; }
即可.
其實(shí)細(xì)心一點(diǎn)會(huì)發(fā)現(xiàn)還有問(wèn)題:
其實(shí)就是ui-widget-content的邊框的大小為1px造成的,所以,我們改把#resizable的寬度在縮小2px
修改代碼:
#resizable { width: 350px; height: 150px; }
為:
#resizable { width: 348px; height: 150px; }
在測(cè)試,正常了.
發(fā)現(xiàn)JQUI的小問(wèn)題還真不少....
相關(guān)文章
jquery實(shí)現(xiàn)多級(jí)下拉菜單的實(shí)例代碼
多級(jí)菜單，理論上支持無(wú)限多的層級(jí)，文件結(jié)構(gòu)非常簡(jiǎn)單的，以下是完整代碼，有需要的朋友可以參考一下2013-10-10
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間,結(jié)合了jquery需要的朋友可以參考下2012-02-02
這篇文章主要介紹了Jquery中基本選擇器用法,以實(shí)例形式較為詳細(xì)的分析了jQuery中常見(jiàn)選擇器的使用方法,并備有較為詳細(xì)的備注說(shuō)明,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
jQuery 獲取遍歷獲取table中每一個(gè)tr中的第一個(gè)td的方法
下面小編就為大家?guī)?lái)一篇jQuery 獲取遍歷獲取table中每一個(gè)tr中的第一個(gè)td的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了jQuery選擇器源碼解讀（三）：tokenize方法,本文用詳細(xì)的注釋解讀了tokenize方法的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03
jQuery validata插件實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery validata插件實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
jQuery實(shí)現(xiàn)ajax無(wú)刷新分頁(yè)頁(yè)碼控件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax無(wú)刷新分頁(yè)頁(yè)碼控件,需要的朋友可以參考下2017-02-02
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個(gè)，用來(lái)在線生成二維碼2013-08-08
在jquery的ajax中如果我們希望實(shí)現(xiàn)同步或者異步我們可以直接設(shè)置async發(fā)生為真或假即可true false，下面舉幾個(gè)jquery ajax同步和異步實(shí)例2013-11-11