jquery BS,dialog控件自适应大小

有一个家人文

有一个家人文

2016-02-19 15:59

下面图老师小编跟大家分享一个简单易学的jquery BS,dialog控件自适应大小教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!
样式有点丑,为此,还重搞了个样式,哪知以为完工的时候,发现IE上工作不正常,自适应大小等无法实现。

原来它需要xhtml才行,而公司的产品是html的。为此,研究了一下自适应大小的实现。

原来一直觉得jquery取宽度高度很神奇,原来是直接取的dom中element的offsetWidth/offsetHeight等属性,当有element插入dom中,浏览器就会根据规则计算出相应的属性,这里抄几个相关的属性。

scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。

clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

clientWidth、offsetWidth、clientHeight..区别



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均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。

研究了下实现不了的原因。原来是jquery.alerts控件里面全是div的,简单的HTML在IE里,div的宽度似乎不根据内部内容变大而变大,直接有多大就多大,这样取到的offsetWidth就很大了,自适应大小就没实现,当然XHTML的情况取offsetWidth就可以了。

看了下EXT的实现方式,它就聪明多了,内部内容用span等随内容大小变化的el,这样取到offset属性就真实了,然后将内部一个个el的宽度都加上,包括padding和border,算出外层的总宽度。

虽然也想简单用xhtml,但没办法。还是学EXT,虽然麻烦一些,但可靠。
展开更多 50%)
分享

猜你喜欢

jquery BS,dialog控件自适应大小

Web开发
jquery BS,dialog控件自适应大小

jQuery解决iframe高度自适应代码

Web开发
jQuery解决iframe高度自适应代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用CSS控制图片自适应大小

Web开发
用CSS控制图片自适应大小

使TStringGrid自适应宽度

编程语言 网络编程
使TStringGrid自适应宽度

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

android控件封装 自己封装的dialog控件

编程语言 网络编程
android控件封装 自己封装的dialog控件

通过JAVAScript实现页面自适应

Web开发
通过JAVAScript实现页面自适应

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

什么是电脑cmos

什么是电脑cmos

用JBuilder 2005实现重构之认识重构

用JBuilder 2005实现重构之认识重构
下拉加载更多内容 ↓