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

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

赞 (0)

相关推荐

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

    作者:yemoo 来源:WWW.AJAXBBS.NET 发布日期:2007-09-03 原文地址:http://www.ajaxbbs.net/blog/post/100/ 特别说明:这只是一个纯客户端使用的js组件,非服务端控件(如asp.net控件等),改组件只是为了美化消息提示. PS:希望大家多提有实际价值的建议或意见,如果合适我会继续做完善修改. ===================================================================   

  • 用Vue.extend构建消息提示组件的方法实例

    用Vue.extend构建消息提示组件的方法实例

    前提 前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码.自己弄出来一个简陋的消息提示组件 Vue.extend是什么 按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它. 了解了这点之后

  • vue中使用svg封装全局消息提示组件

    vue中使用svg封装全局消息提示组件

    本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码,供大家参考,具体内容如下 先看效果图 一.首先安装下载需要用到的svg相关依赖 npm install svg-sprite-loader --save-dev 二.针对没有vue.config.js文件的vue项目,直接在webpack.base.conf.js中进行如下两个配置 1.找到图片相关配置位置,添加款选出的代码 2.在图片配置后添加如下代码 三.根据添加的代码我们去src下创建一个icons文件夹,icons下面

  • vue实现过渡动画Message消息提示组件示例详解

    vue实现过渡动画Message消息提示组件示例详解

    目录 概述 目录结构 总结 概述 在我自己平时做项目的时候,必不可少的会用到message组件,用来对用户友好反馈,总之使用频率还是挺高的,刚开始工作的时候,经常用的就是组件库的现成的,想想也不能总是用别人现成的,最近模拟组件库调用方式自己写了一个消息提示组件,支持过渡效果,支持自己进行扩展. 目录结构 .src/component/MessageBox/MessageBox.vue代码: <template> //css实现过渡 <transition name="fade-

  • 070823更新的一个[消息提示框]组件 兼容ie7

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

  • Uniapp全局消息提示以及其组件的实现方法

    目录 一.前言 二.实现 1.短轮询请求-App.vue中 2.全局消息提示组件 (1)定义一个GlobalMessage.vue组件 (2)新建GlobalMessage.js (3)main.js中 3.小程序中如何实现 4.vue-inset-loader的使用 (1)安装 (2)vue.config.js注入loader (3)pages.json配置文件中添加insetLoader 三.总结 一.前言 最近有项目需求我们能够在H5及小程序中全局实时刷新消息,并且在全局做一个消息提示,提

  • jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能.分享给大家供大家参考,具体如下: 其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择j

  • JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

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

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

  • JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    本文实例讲述了JavaScript实现的原生态兼容IE6可调可控滚动文字功能.分享给大家供大家参考,具体如下: 虽然HTML里面本身就有marquee标签,用来设置滚动文字(marquee标签在附录[HTML比较冷门标签与属性]里会有具体介绍)这个标签到了IE8就开始不支持,在IE6中可以设置的东西也很少,所以这东西还是用javascript来写为好.这个小组件也是比较常见的,但是网上的代码质量还是为了很多无关紧要的小特效而增加了许多无谓的代码.其实这东西,你只要弄得能自己向右向左滚,到了屏幕边

  • 微信小程序-消息提示框实例

    微信小程序-消息提示框实例

    做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }

随机推荐