编写原因:

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

控件需求:

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

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

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

PS:比较简单的控件

效果如下

编写过程:

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

  1. var defaults = {
  2. zIndex : 9999 ,
  3. fadeInTimeOut : 1, //second
  4. contentTimeOut : 3,
  5. fadeOutTimeOut : 1,
  6. position : "top" //show position top or bottom
  7. };

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

2.考虑浏览器的兼容性

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

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

3.滑动效果的实现

滑入、内容停留、滑出。

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

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

总结:

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

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

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

点击下载->  jquery.messagetip

DEMO:

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

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. 拓扑排序(二)之 C++详解

    本章是通过C++实现拓扑排序. 目录 1. 拓扑排序介绍 2. 拓扑排序的算法图解 3. 拓扑排序的代码说明 4. 拓扑排序的完整源码和测试程序 转载请注明出处:http://www.cnblogs. ...

  2. mac+apache+php+phpmyadmin集成php开发环境配置

    刚开始才接触php才发现macos还是比较强大了,macbook不仅是时尚达品还很实用哦. --------------他山之石-------------------------- http://da ...

  3. [转载]TFS测试管理

    微软2010年发布的Visual Studio 2010或Visual Studio Test Professional 2010包含一个称为 Microsoft 测试管理器的新应用程序,用于帮助您使 ...

  4. 抓包分析SSL/TLS连接建立过程【总结】

    1.前言 最近在倒腾SSL方面的项目,之前只是虽然对SSL了解过,但是不够深入,正好有机会,认真学习一下.开始了解SSL的是从https开始的,自从百度支持https以后,如今全站https的趋势越来 ...

  5. [C++][操作符]四种显示转换操作符

    整理了C++ Primer中提到的四种显示转换,用思维导图写出来,是不是很清晰O(∩_∩)O.

  6. MFC抓网页

    CString chinachar_str("读取的东西:"); CInternetSession sion(NULL,); CHttpFile *http=NULL; CStri ...

  7. Java魔法堂:类加载机制入了个门

    一.前言 当在CMD/SHELL中输入 $ java Main<CR><LF> 后,Main程序就开始运行了,但在运行之前总得先把Main.class及其所依赖的类加载到JVM ...

  8. Spring MVC 原理介绍(执行流程)

    Spring MVC工作流程图   图一   图二    Spring工作流程描述       1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServle ...

  9. Maven提高篇系列之(三)——使用自己的Repository(Nexus)

    这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) ...

  10. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...