jquery BS,dialog控件自適應(yīng)大小
更新時間:2009年07月06日 13:19:45 作者:
今天準(zhǔn)備用jquery.alerts的開源控件,基于jquery的,代碼很少,很容易就搞定。
樣式有點(diǎn)丑,為此,還重搞了個樣式,哪知以為完工的時候,發(fā)現(xiàn)IE上工作不正常,自適應(yīng)大小等無法實(shí)現(xiàn)。
原來它需要xhtml才行,而公司的產(chǎn)品是html的。為此,研究了一下自適應(yīng)大小的實(shí)現(xiàn)。
原來一直覺得jquery取寬度高度很神奇,原來是直接取的dom中element的offsetWidth/offsetHeight等屬性,當(dāng)有element插入dom中,瀏覽器就會根據(jù)規(guī)則計算出相應(yīng)的屬性,這里抄幾個相關(guān)的屬性。
scrollWidth 是對象的實(shí)際內(nèi)容的寬,不包邊線寬度,會隨對象中內(nèi)容的多少改變(內(nèi)容多了可能會改變對象的實(shí)際寬度)。
clientWidth 是對象可見的寬度,不包滾動條等邊線,會隨窗口的顯示大小改變。
offsetWidth 是對象的可見寬度,包滾動條等邊線,會隨窗口的顯示大小改變。
clientWidth、offsetWidth、clientHeight..區(qū)別
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
offsetwidth:是元素相對父元素的偏移寬度。等于border+padding+width
clientwidth:是元素的可見寬度。等于padding+width
scrollwidth:是元素的寬度且包括滾動部分。
研究了下實(shí)現(xiàn)不了的原因。原來是jquery.alerts控件里面全是div的,簡單的HTML在IE里,div的寬度似乎不根據(jù)內(nèi)部內(nèi)容變大而變大,直接有多大就多大,這樣取到的offsetWidth就很大了,自適應(yīng)大小就沒實(shí)現(xiàn),當(dāng)然XHTML的情況取offsetWidth就可以了。
看了下EXT的實(shí)現(xiàn)方式,它就聰明多了,內(nèi)部內(nèi)容用span等隨內(nèi)容大小變化的el,這樣取到offset屬性就真實(shí)了,然后將內(nèi)部一個個el的寬度都加上,包括padding和border,算出外層的總寬度。
雖然也想簡單用xhtml,但沒辦法。還是學(xué)EXT,雖然麻煩一些,但可靠。
原來它需要xhtml才行,而公司的產(chǎn)品是html的。為此,研究了一下自適應(yīng)大小的實(shí)現(xiàn)。
原來一直覺得jquery取寬度高度很神奇,原來是直接取的dom中element的offsetWidth/offsetHeight等屬性,當(dāng)有element插入dom中,瀏覽器就會根據(jù)規(guī)則計算出相應(yīng)的屬性,這里抄幾個相關(guān)的屬性。
scrollWidth 是對象的實(shí)際內(nèi)容的寬,不包邊線寬度,會隨對象中內(nèi)容的多少改變(內(nèi)容多了可能會改變對象的實(shí)際寬度)。
clientWidth 是對象可見的寬度,不包滾動條等邊線,會隨窗口的顯示大小改變。
offsetWidth 是對象的可見寬度,包滾動條等邊線,會隨窗口的顯示大小改變。
clientWidth、offsetWidth、clientHeight..區(qū)別
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
offsetwidth:是元素相對父元素的偏移寬度。等于border+padding+width
clientwidth:是元素的可見寬度。等于padding+width
scrollwidth:是元素的寬度且包括滾動部分。
研究了下實(shí)現(xiàn)不了的原因。原來是jquery.alerts控件里面全是div的,簡單的HTML在IE里,div的寬度似乎不根據(jù)內(nèi)部內(nèi)容變大而變大,直接有多大就多大,這樣取到的offsetWidth就很大了,自適應(yīng)大小就沒實(shí)現(xiàn),當(dāng)然XHTML的情況取offsetWidth就可以了。
看了下EXT的實(shí)現(xiàn)方式,它就聰明多了,內(nèi)部內(nèi)容用span等隨內(nèi)容大小變化的el,這樣取到offset屬性就真實(shí)了,然后將內(nèi)部一個個el的寬度都加上,包括padding和border,算出外層的總寬度。
雖然也想簡單用xhtml,但沒辦法。還是學(xué)EXT,雖然麻煩一些,但可靠。
相關(guān)文章
Jquery獲取radio選中值實(shí)例總結(jié)
在本篇文章里小編給大家分享了關(guān)于Jquery獲取radio選中值實(shí)例總結(jié)內(nèi)容,有興趣的朋友們可以學(xué)習(xí)下。2019-01-01
javascript loadScript異步加載腳本示例講解
本文講解了javascript異步加載腳本并觸發(fā)回調(diào)函數(shù)的方法,在加載遠(yuǎn)程數(shù)據(jù)的時候可以用到,下面提供代碼示例和源碼2013-11-11
jQuery實(shí)現(xiàn)簡潔的導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡潔的導(dǎo)航菜單效果,簡潔大方的導(dǎo)航菜單,需要的朋友可以參考下2015-11-11
jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01
jQuery ajax serialize() 方法使用示例
serialize() 方法創(chuàng)建以標(biāo)準(zhǔn) URL 編碼表示的文本字符串,下面為大家介紹下jQuery serialize方法的使用2014-11-11
jquery使用animate方法實(shí)現(xiàn)控制元素移動
這篇文章主要介紹了jquery使用animate方法實(shí)現(xiàn)控制元素移動,涉及jQuery中animate方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法,但是還沒有看見用jQuery寫的,效果實(shí)現(xiàn)很簡單,確切的說是用jquery實(shí)現(xiàn)這個效果很簡單,這就是jquery的強(qiáng)大和魅力所在。2011-04-04

