【消息提示组件】,兼容IE6/7&&FF2


Posted in Javascript onSeptember 04, 2007

作者:yemoo
来源:WWW.AJAXBBS.NET
发布日期:2007-09-03

原文地址:http://www.ajaxbbs.net/blog/post/100/

特别说明:这只是一个纯客户端使用的js组件,非服务端控件(如asp.net控件等),改组件只是为了美化消息提示。

PS:希望大家多提有实际价值的建议或意见,如果合适我会继续做完善修改。
===================================================================
      前段时间公司需要写的一个小组件,用于替代windows2000默认的灰色消息组件(alert/Confirm),由于公司开发的系统主要针对IE浏览器,所以开始的代码在ff下运行无效,今日打算拿出共享,为了尽少挨砖,花了将近一个小时将代码进行了兼容性的修改,目前在ie6.0和FF2.0下运行正常,其他浏览器未测,公司任务在身,懒得花大量时间整这个,满足多数需求即可。

组件简介:

1、调用方式进行二次分装,首先封装成类,然后将调用方法变成几个简单的方法调用,调用时无需再new了。调用方法明了简单。
2、兼容IE6.0&&FF2.0。
3、目前提供了三种四种皮肤,Vista、QQ、ExtBlue和BlackColl。有兴趣可以修改样式表文件定义新的皮肤。
4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。
5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。
6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并关闭后该select仍保持隐藏状态,而只显示原本显示的select。
7、消息组件弹出时屏蔽对键盘Tab键和空格键的操作(防止键盘操作页面元素),按下Enter键当作点击消息组件的“确定”按钮处理。

使用简介:
   1、首先在页面中引入ymPrompt.js。
   2、然后调用需要的消息函数:   
   (1)Alert(content,width,height,title,okFunc,cancelFunc)  //消息提示类型  
   (2)SucceedInfo(....) //成功信息类型
   (3)ErrorInfo(...) //错误信息类型
   (4)ConfirmInfo(....) //询问消息类型

  四个方法的参数完全相同:

   content:消息组件要显示的内容。
   width:消息框的宽度,不设定请置null,宽度自适应。
   height:消息框的高度,不设定请置null,高度自适应。
   title:消息组件标题
   okFunc:点击确定按钮时执行的函数的名称。
   CancelFunc:点击取消或关闭按钮时执行的函数的名称。 

查看演示: http://www.ajaxbbs.net/test/ymPrompt/demo.htm
说明:网络空间速度原因,首次打开演示可能图片加载较慢,请打开后稍后图片下载完毕或下载源码到本地查看演示。
源码下载请到此处: http://www.ajaxbbs.net/blog/post/100/

Javascript 相关文章推荐
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery的position()方法详解
Jul 19 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
记一次vue跨域的解决
Oct 21 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
一个用js实现控制台控件的代码
Sep 04 #Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 #Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 #Javascript
给Javascript数组插入一条记录的代码
Aug 30 #Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 #Javascript
Expandable "Detail" Table Rows
Aug 29 #Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python 中的int()函数怎么用
2017/10/17 Python
django站点管理详解
2017/12/12 Python
遗传算法python版
2018/03/19 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python更改已存在excel文件的方法
2018/05/03 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python中os.remove()用法及注意事项
2021/01/31 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
学校先进集体事迹材料
2014/05/31 职场文书
总结Python常用的魔法方法
2021/05/25 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python