脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery messagetip信息语提示控件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 编写原因：

 

作为提示框，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, ////滑出秒数

});

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery messagetip信息语提示控件全部内容，希望文章能够帮你解决javascript代码实例教程-jquery messagetip信息语提示控件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。