【消息提示组件】,兼容IE6/7&&FF2_javascript技巧

作者: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/

时间: 2024-09-30 21:32:01

【消息提示组件】,兼容IE6/7&&FF2_javascript技巧的相关文章

[ymPrompt消息提示组件]3.1版发布

新增配置项:新增fixPosition参数设定是否当页面滚动时使弹出框始终浮动在屏幕的固定位置.新增dragOut参数设定是否允许弹出框拖动到页面范围以外.新增autoClose参数设定是否当用户点击按钮后自动关闭弹出框. 公开的属性和方法接口: 属性:version:当前版本号 如:alert(ymPrompt.version)pubDate:当前版本的发布日期 如:alert(ymPrompt.pubDate);cfg:组件当前的默认配置 方法:setDefaultCfg(cfg):设定组件

百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

070823更新的一个[消息提示框]组件 兼容ie7_javascript技巧

提示:8.23修复了ie 7显示错误的bug,请下载过的朋友重新下载.对此表示抱歉! 更新说明: 2007-08-23 11:50 1.修复了IE7.0下按钮文字错位的BUG(下载源码已经更新,请下载过的朋友重新下载). 2.修改了部分js程序代码.(弹出框的高度只在初始化时进行计算) 2007-08-23 21:30  1.完善了组件简介,原来没有写5-7三个介绍,可能有些朋友也没有注意到.这里补上! ==============================================

JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件_javascript技巧

现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容.起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写.IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在<[CSS]IE6中的position:fixed问题与随滚动条滚动的效果>(点击打开链接)介绍过了. 下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件.

jquery右下角pop弹窗与类似discuz右下角消息提示框

pop.js代码    代码如下 复制代码 //兼容ie6的fixed代码 //jQuery(function($j){ // $j('#pop').positionFixed() //}) (function($j){     $j.positionFixed = function(el){         $j(el).each(function(){             new fixed(this)         })         return el;             

兼容IE6的图片圆角边框CSS

纯CSS实现的图片圆角边框效果,兼容IE6. 实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.核心CSS代码: .i_roundimg{ background:url(http://mrthink.ne

安卓-如何做到类似QQ上的未读消息提示 图标右上角带数字的那种

问题描述 如何做到类似QQ上的未读消息提示 图标右上角带数字的那种 最近做项目要用到 根据推送过来的消息数目显示 没有找到相关资料 难度大吗??? 解决方案 这个百度前两页就有demo 解决方案二: 自己写组件吧:---------------------------- 解决方案三: 自己画,难度应该不大 解决方案四: 查查bootstrap应该有相关组件. 解决方案五: 自己动手丰衣足食,哈哈 解决方案六: 推送机制有一个badge属性,根据初始值做累加就OK

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框_jquery

效果图:当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值. 具体代码如下: HTML代码: 复制代码 代码如下: <div class="float" id="float"> <p id="WB_