jquery ui resizable bug解決方法
更新時(shí)間：2010年10月26日 09:31:55 作者：
其實(shí)這個(gè)也不算是 resizable 的BUG,但從官網(wǎng)下載下來的確實(shí)存在問題
但開啟 helper: 'ui-resizable-helper' 或animate: true, 時(shí)候,會(huì)發(fā)現(xiàn)官方的例子的寬度自動(dòng)增加了10PX 仔細(xì)翻源代碼一看,發(fā)現(xiàn)有以下問題:(如圖)
竟然用padding 難怪會(huì)自動(dòng)添加寬度
這個(gè)問題在ie firefox下都存在.
其中這個(gè)問題比較難發(fā)現(xiàn),但你可以用以下代碼測(cè)試出來:
<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è)問題在ie firefox下都存在.
其中這個(gè)問題比較難發(fā)現(xiàn),但你可以用以下代碼測(cè)試出來:
復(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)還有問題:
其實(shí)就是ui-widget-content的邊框的大小為1px造成的,所以,我們改把#resizable的寬度在縮小2px
修改代碼:
#resizable { width: 350px; height: 150px; }
為:
#resizable { width: 348px; height: 150px; }
在測(cè)試,正常了.
發(fā)現(xiàn)JQUI的小問題還真不少....
相關(guān)文章
這篇文章主要介紹了淺談jquery中delegate()與live()的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Jquery使我們簡(jiǎn)化了禁止冒泡事件的操作，只需幾行代碼,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jquery加載單文件vue組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼，需要的朋友可以參考下。2011-07-07
推薦17個(gè)優(yōu)美新鮮的jQuery的工具提示插件
在web開發(fā)當(dāng)中，工具提示條對(duì)于完善web網(wǎng)站的用戶體驗(yàn)至關(guān)重要。title屬性通常是用來幫助用戶了解顯示鏈接的信息2012-09-09
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼,需要的朋友可以參考下。2010-10-10
在頁(yè)面上圖片比較多的時(shí)候，打開一張頁(yè)面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對(duì)于高清晰的圖片，占了幾百K的空間。那么我們?nèi)绾尾拍芨淖冞@種狀況呢，這就是今天我們要探討的問題了。2015-03-03
Jquery工作常用實(shí)例 使用AJAX使網(wǎng)頁(yè)進(jìn)行異步更新
AJAX 通過在后臺(tái)與服務(wù)器交換少量數(shù)據(jù)的方式，允許網(wǎng)頁(yè)進(jìn)行異步更新。這意味著有可能在不重載整個(gè)頁(yè)面的情況下，對(duì)網(wǎng)頁(yè)的一部分進(jìn)行更新。2011-07-07
這篇文章主要介紹了jQuery插件開發(fā)詳細(xì)教程,將概述jQuery插件開發(fā)的基本知識(shí),最佳做法和常見的陷阱,需要的朋友可以參考下2014-06-06
jPlayer是一個(gè)JavaScript寫的完全免費(fèi)和開源的jQuery多媒體庫(kù)插件，這篇文章主要介紹了基于jPlayer三分屏的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12