lhgdialog弹出窗口框架(最终完善版).

简介: 本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1275  一、组件简介 lhgdialog DIV弹出窗口框架是一个简洁、高效、美观、易用的多功能弹出窗口组件。

本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1275

 一、组件简介

lhgdialog DIV弹出窗口框架是一个简洁、高效、美观、易用的多功能弹出窗口组件。
它的主要特点有:
代码简洁:整个组件所有代码总共18K,如果不算上图片和CSS样式表文件,总共大小才12K不到。(这是在代码未压缩情况下)
程序运行效率高:弹出窗口在打开和拖动时非常流畅,在同等测试条件下,CUP的占有率在30%左右,最高不超过40%。而其它弹出 窗口(比如:JQuery,ExtJs,Mootools,还有其它弹出窗口等)CUP的占有率都在50%左右,最高60%以上。
窗口样式更改简便:组件采用的是QQ2009窗口的界面,虽说不上很漂亮,但也不算难看(本个界面设计能力较差:-)...)如果你 想更改窗口样式也很容易,组件采用的是静态模板来设计的窗口的样式,你只要更改lhgdialog.html里body 之间的HTML代码,再相应改下lhgdialog.css样式表文件即可。而且组件样式不受调用页面限制,可随意更改 你想要的样式。
可扩展性强,复用性高:组件提供了基本常用的功能,在此基础上可根据个人需要增加相应功能,只需要增加少量代码即可开发 出各种弹出窗口。而且窗口的内容页和框架也是相互独立的,设计好框架后你只要更改内容页即可。
组件调用灵活:在同一页面可以调用任意多个弹出窗口,而且最突出的是在同一页面可以弹出不带遮罩和带遮罩的窗口混用。
支持所有主流浏览器:IE6+,Firefox2.0+,Chrome(谷歌浏览器),Opera9.5+,Safari3.0+等。(题外音:个人觉得Opera最好用,打开 网页的速度是我上面列出所有浏览器中最快的,不是指打开我的组件,而是打开任何网页个人感觉速度很 快,而且人性化设计也是比较突出的。不是做广告噢:-)...)
本人编写组件一直争取能在满足使用的情况下做到代码最简洁,执行效率高,所以有些不太实用的功能就没有加上,如朋友们需要 可自行加上,或与我共同探讨也可。我的QQ:463214570 ,blog:http://www.cnblogs.com/lhgstudio 
二、组件结构
lhgdialog.js:组件主调用文件,在调用的地方只需要该文件。
lhgdialog.html:组件窗口静态模板文件,控制窗口样式及对窗口的操作。
lhgdialog.css:组件窗口样式表文件。
_content.html:组件窗口内容页示例文件,此页面由用户自己随意定制。
_samples.html:调用组件示例页,即此页面。
images:窗口所有图片文件夹
三、调用方法及参数说明
在需要调用的页面引入lhgdialog.js,例如:<script type="text/javascript" src="lhgdialog.js"></script>
然后在要调用的位置上引发的事件中加入调用代码,例如:<input type="button" onclick="lhgdialog.opendlg(...);"/> 或者在onclick=这写个自己的函数,如:open();然后再在JS的部位里加个function open()函数,再在里面调用lhgdialog.opendlg
参数说明:lhgdialog.opendlg是主调函数,他共有7个参数,详细如下:
lhgdialog.opendlg( 窗口标题,内容页,窗口宽,窗口高,是否显示遮罩层,弹出窗口距顶部距离,弹出窗口距左边距离 )
例如:lhgdialog.opendlg( '登录窗口', 'login.html', 400, 300 ); 后面的参数如果不用可以省略
  lhgdialog.opendlg( '', 'ok.html', 600, 480, true, 100, 200 ); 如果前面有不填的参数就用''就可以了,但不可省略。
四、下载:
http://files.cnblogs.com/lhgstudio/lhgdialog.rar
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1275
目录
相关文章
|
2月前
|
Web App开发 API
在机器人流程自动化(RPA)中,判断网页或元素是否加载完成是一个重要的步骤
【2月更文挑战第24天】在机器人流程自动化(RPA)中,判断网页或元素是否加载完成是一个重要的步骤
48 6
|
9月前
|
前端开发 安全 JavaScript
突破常规的前端技巧与方法(一)
突破常规的前端技巧与方法(一)
54 0
|
9月前
|
JavaScript 前端开发 测试技术
突破常规的前端技巧与方法(四)
突破常规的前端技巧与方法(四)
49 0
|
9月前
|
JSON JavaScript 前端开发
突破常规的前端技巧与方法(二)
突破常规的前端技巧与方法(二)
29 0
|
6月前
每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧
每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧
43 1
|
9月前
|
前端开发 JavaScript 搜索推荐
突破常规的前端技巧与方法(三)
突破常规的前端技巧与方法(三)
137 0
突破常规的前端技巧与方法(三)
|
11月前
|
数据库 Android开发
重新构建711的Android项目(一),巧妙的小屏菜单查询框架实现
重新构建711的Android项目(一),巧妙的小屏菜单查询框架实现
|
12月前
|
JavaScript 前端开发
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
聊天框(番外篇)—如何实现@功能的整体删除
上一篇文章中,我们已经初步实现了聊天输入框,但其@功能是不完善的,例如无法整体删除、无法获取除用户名以外的数据(假设用户名不是唯一的)。有问题就要想办法解决,在网上百度了一圈后,倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。
964 0
聊天框(番外篇)—如何实现@功能的整体删除
|
Java Spring
编程小技巧7-配置文件自动提示功能消失解决方案
编程小技巧7-配置文件自动提示功能消失解决方案
110 0
编程小技巧7-配置文件自动提示功能消失解决方案