样式有点丑,为此,还重搞了个样式,哪知以为完工的时候,发现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,虽然麻烦一些,但可靠。
标签:
jquery,dialog,控件自适应

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jquery BS,dialog控件自适应大小”

暂无“jquery BS,dialog控件自适应大小”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。