编写原因:

作为提示框,jquery有个messagebox的控件,也就是弹出的提示框。但这个控件如果不是用在需要确认的时候,单单警告提示、消息提示、失败提示时,用户还需要去点下确认,有时这操作还是挺烦的(尽管可以设置timeout,会自动消失)。

控件需求:

现在需要一个简洁消息提示控件,不需确认。

1.提示框可以从顶部或底部滑入,在失效后滑出。

2.可以设置滑入时间,内容停留时间、滑出时间。

PS:比较简单的控件

效果如下

编写过程:

1.在无文档的情况下, 我建议将用户能传的参数的定义写在控件的最前面。

    var defaults = {
zIndex : 9999 ,
fadeInTimeOut : 1, //second
contentTimeOut : 3,
fadeOutTimeOut : 1,
position : "top" //show position top or bottom
};

这样使用者对他能够设的就非常清楚了,即便是没有文档,也能愉快的玩耍。

2.考虑浏览器的兼容性

因为控件的提示框是固定在底部或顶部的,不可避免的就是position:fixed的问题

IE6 IE7 IE8 固定定位元素 position:absolute 用设置,所以定位计算也要变化。

3.滑动效果的实现

滑入、内容停留、滑出。

具体的实现就不在这里说明,最后面会有源码链接。

PS:最主要东西就是上面这三个。

总结:

1.在强调的用户体验的年代,做这个控件也是为了用户能有更好的感受。

2.在做东西(编码)时,也时刻想能否这东西能否通用,而控件和框架也无非就是为了通用。

3.另附上我这个控件的下载链接

点击下载->  jquery.messagetip

DEMO:

$.messageTip.info({
   message:"我是提示消息.......",
fadeInTimeOut : 1, //滑入秒数
contentTimeOut : 3, //内容停留秒数
fadeOutTimeOut : 1, ////滑出秒数
});

jquery messagetip信息语提示控件的更多相关文章

  1. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  2. 气泡形提示控件grumble.js

    grumble.js 是一个很特别的气泡形状提示控件,最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制. 任何一个grumble都可以放 ...

  3. jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  4. 错误提示控件errorProvider

    http://www.cnblogs.com/suguoqiang/archive/2012/07/17/2596564.html 错误提示控件errorProvider VS显示: 核心代码: th ...

  5. Atitit.dwr3 不能显示错误详细信息的解决方案,控件显示错误详细信息的解决方案 java .net php

    Atitit.dwr3 不能显示错误详细信息的解决方案,控件显示错误详细信息的解决方案 java .net php 1. Keyword/subtitle 1 2. 使用dwr3的异常convert处 ...

  6. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  7. 重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider

    原文:重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider [源码下载] 重新想象 Wind ...

  8. RS开发日期提示控件默认为昨天之进阶篇

    时隔<RS开发日期提示控件默认为昨天>这篇博文已经很久了,请原谅我隔了这么久才继续来写这篇笔记.也希望读到这篇笔记的朋友可以从这篇笔记中学习到一些关于RS日期控件和JS的一些应用知识,当然 ...

  9. iOS项目开发实战——自己定义圆形进度提示控件

    iOS中默认的进度条是水平方向的进度条,这往往不能满足我们的需求. 可是我们能够自己定义类似的圆形的进度提示控件,主要使用iOS中的画图机制来实现. 这里我们要实现一个通过button点击然后圆形进度 ...

随机推荐

  1. 面试准备 - HashTable 的C#实现 开放地址法

    Hashtable是很经常在面试中遇到的数据结构,因为他的O(1)操作时间和O(n)空间 之所以自己写一份是因为: 加深对于hashtable的理解 某些公司面试的时候需要coding....... ...

  2. Docker - Docker国内镜像的配置及使用

    Docker国内镜像 DaoCloud - Docker加速器 阿里云 - 开发者平台 微镜像 - 希云cSphere 镜像广场 - 时速云 灵雀云 网易蜂巢 阿里云的Docker加速器 阿里云 - ...

  3. EnjoyCSS – 在线的,先进的 CSS3 代码生成器

    EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码.它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式.您将能够玩转所有的 EnjoyCSS 参数,就 ...

  4. CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. tomcat组成及工作原理

    1 - Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servlet containe ...

  6. Windows Azure Virtual Machine (26) 使用高级存储(SSD)和DS系列VM

    <Windows Azure Platform 系列文章目录> Update: 2016-11-3,如果大家在使用Linux VM,使用FIO进行IOPS测试的时候,请使用以下命令: su ...

  7. 如何使用Jedis操作Redis消息队列

    资源链接 Jedis的jar包 Commons-io的jar包 使用方法 代码样例如下,使用前,注意打开redis的server程序. 代码样例 package RedisExample; impor ...

  8. testing - 测试基本使用接口

    testing - 测试基本使用接口 当你写完一个函数,结构体,main之后,你下一步需要的就是测试了.testing包提供了很简单易用的测试包. 写一个基本的测试用例 测试文件的文件名需要以_tes ...

  9. The conversion of a varchar data type to a datetime data type resulted in an out-of-range value

    刚刚有在程序中,传递一个空值至MS SQL Server数据库,这个值的数据类型为DATETIME执行时,它却发生了如标题提示的异常:The conversion of a varchar data ...

  10. iOS 阶段学习第25天笔记(iOS沙盒机制介绍)

    iOS学习(OC语言)知识点整理 一.iOS沙盒机制介绍 1)概念: 每个ios应用都有自己的应用沙盒,应用沙盒就是文件系统目录,与其他应用放入文件 系统隔离,ios系统不允许访问 其他应用的应用沙盒 ...