jquery BS,dialog控件自适应大小_jquery

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

时间: 2024-08-18 02:32:40

jquery BS,dialog控件自适应大小_jquery的相关文章

jQuery UI Dialog控件中的表单无法正常提交的解决方法_jquery

最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化

深入理解jQuery layui分页控件的使用_jquery

$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

看看我的代码 是不是这个问题 关于C#控件自适应的代码

问题描述 namespacekeyshare{classAutoSizeFormClass{//声明结构,记录初始窗体的位置和控件大小publicstructControlRect{publicintLeft;publicintTop;publicintWidth;publicintHeight;}//声明对象记录当前大小publicList<ControlRect>Oldcontrol;//C两个函数,记录控件和窗体的初始大小publicvoidcontrolInitsize(Form1mF

jQuery获取file控件中图片的宽高与大小_jquery

问题 如何判断input file表单里上传的图片的宽高和大小呢? 解决方案 这个时候图片还没真正上传,也不是在页面上展示,不能使用$("#id").width(),$("#id").height()这种方式. 在Stack Overflow找到一个方法获取input file图片文件的宽高: var _URL = window.URL || window.webkitURL; $("#file").change(function (e) { v

duilib corner属性的贴图技巧——让图片自动贴到控件的的某一边或者一角并自适应控件的大小

转载请说明原出处,谢谢~~          Duilib给控件贴图功能可以附带多个属性,各个属性的配合可以达到许多效果.以下是duilib支持的所有贴图属性: 贴图描述:          Duilib的表现力丰富很大程度上得益于贴图描述的简单强大.Duilib的贴图描述分为简单模式和复杂模式两种.          简单模式使用文件名做为贴图描述内容,在这种方式下,此图片将会以拉伸方式铺满控件.          复杂模式使用带属性的字符串表示贴图方式,既支持从文件中加载图片,也可以从资源中

ocx控件自适应网页所给区域大小

问题描述 ocx控件自适应网页所给区域大小 ocx控件开发时固定大小为650*700,网页调用时所给出区域只有500*500,怎么让ocx控件自适应网页所给区域大小 解决方案 用js改变ocx的大小,而ocx里面的控件在onsize里面调整大小,适应ocx本身的大小.

基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合_jquery

本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

实例详解jQuery结合GridView控件的使用方法_jquery

jQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1.数字2.平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用jQuery来实现? 我们直接在页面的Page_Load事件中输入如下代码: protected void Page_Load(object sender, EventArgs e)

jQuery操作基本控件方法实例分析_jquery

本文实例讲述了jQuery操作基本控件方法.分享给大家供大家参考,具体如下: 1. 根据控件的样式class获取控件 复制代码 代码如下: $(".className")...... //className代表的就是控件的样式 2. 根据控件的ID获取控件 复制代码 代码如下: $("#id")...... 3. 根据控件的name获取控件 $("input[name='objName']")...... /*$("check[name