jquery BS,dialog控件自适应大小


Posted in Javascript onJuly 06, 2009

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

Javascript 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 #Javascript
javascript 写类方式之十
Jul 05 #Javascript
javascript 写类方式之九
Jul 05 #Javascript
javascript 写类方式之八
Jul 05 #Javascript
javascript 写类方式之七
Jul 05 #Javascript
javascript 写类方式之六
Jul 05 #Javascript
javascript 写类方式之五
Jul 05 #Javascript
You might like
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
jquery实用代码片段集合
2010/08/12 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python获取从命令行输入数字的方法
2015/04/29 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
销售高级职员求职信
2013/10/29 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
电力培训心得体会
2014/09/02 职场文书
转让协议书范本
2014/09/13 职场文书
三严三实学习心得体会
2014/10/13 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
我的收音机情缘
2022/04/05 无线电
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS