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 相关文章推荐
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
ThinkPHP实现分页功能
2017/04/28 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python测试mysql写入性能完整实例
2018/01/18 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
一些PHP的面试题
2015/05/06 面试题
SQL面试题
2013/04/30 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
入党现实表现材料
2014/12/23 职场文书
颐和园英文导游词
2015/01/30 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Go语言设计模式之结构型模式
2021/06/22 Golang