jquery messagetip信息语提示控件

简介:

编写原因:

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

 

控件需求:

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

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

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

PS:比较简单的控件

效果如下

QQ截图20140720133033

QQ截图20140720132716

QQ截图20140720132841

QQ截图20140720133000

 

编写过程:

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, ////滑出秒数
});
复制代码
相关文章
|
关系型数据库 MySQL Docker
利用docker 开发 信息系统,python + mysql + flask + jquery
利用docker 开发 信息系统,python + mysql + flask + jquery
113 2
|
3月前
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】
|
5月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
5月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
JavaScript 前端开发
JQuery显示和隐藏控件
JQuery显示和隐藏控件
62 0
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
96 0
|
7月前
|
Java 数据库 Android开发
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
|
JavaScript 前端开发
jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)
jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)
127 0
|
JavaScript
JQuery重复校验导致出现双重提示的问题记录
最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。
109 0
JQuery重复校验导致出现双重提示的问题记录
|
存储 JavaScript 前端开发
jquery scroll 滚动加载列表 获取腾讯云图片像素信息
整体列表通过拉取腾讯云COS文件桶信息,同时图片需要展示像素信息
jquery scroll 滚动加载列表 获取腾讯云图片像素信息