编写原因:

作为提示框,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. 将数据转化成字符串时:用字符串的链接 还是 StringBuilder

    /* 目的:将数据转化成字符串时:用字符串的链接 还是 StringBuilder呢? */ public class Test{ public static void main(String[] a ...

  2. Nginx配置网站适配PC和手机

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  3. vs xamarin android SharedPreferences

    读 PreferenceManager.GetDefaultSharedPreferences(this).GetInt("uid", 0); 写 var editor = Pre ...

  4. .net 使用Json(),maxJsonLength属性设置的值问题

    “使用JSON JavaScriptSerializer进行序列化或反序列化时出错.字符串的长度超过了为maxJsonLength属性设置的值” 今天业务找我说线上的国家地区都显示数字(地区ID),而 ...

  5. SQL Server安全(4/11):许可(Permissions)

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  6. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  7. 【原创】Kakfa utils源代码分析(二)

    我们继续研究kafka.utils包 八.KafkaScheduler.scala 首先该文件定义了一个trait:Scheduler——它就是运行任务的一个调度器.任务调度的方式支持重复执行的后台任 ...

  8. web前端学习笔记---实现雪花飘落的效果

    看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对le ...

  9. [Asp.net 5] DependencyInjection项目代码分析4-微软的实现(4)

    这个系列已经写了6篇,链接地址如下: [Asp.net 5] DependencyInjection项目代码分析 [Asp.net 5] DependencyInjection项目代码分析2-Auto ...

  10. CPU介绍

    CPU内核主要分为两部分:运算器和控制器. (一) 运算器 cpu基本想到的是计算,因此有算数计算,还有逻辑计算单元以及移位简单的运算:fp运算单独拿出:要运算就需要输入数字,因此有寄存器组,即通用寄 ...