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, ////滑出秒数
});

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索控件
, 内容
, jquery 时间控件
, 提示
, position
, 时间
, 消息
, 顶部控件消失
, jquery控件
, 顶部停留
, 滑入滑出
, 提示控件
, jquery提示控件
jquerytab滑入切换
jquery messagetip、messagetip、jquery tip、jquery poshytip、jquery.poshytip.js,以便于您获取更多的相关知识。

时间: 2024-10-29 11:20:26

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

基于jquery实现智能提示控件intellSeach.js_jquery

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入"李",系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友

jQuery带时间的日期控件代码分享_jquery

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图:                    -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h

iOS8统一的系统提示控件——UIAlertController

iOS8统一的系统提示控件--UIAlertController 一.引言         相信在iOS开发中,大家对UIAlertView和UIActionSheet一定不陌生,这两个控件在UI设计中发挥了很大的作用.然而如果你用过,你会发现这两个控件的设计思路有些繁琐,通过创建设置代理来进行界面的交互,将代码逻辑分割了,并且很容易形成冗余代码.在iOS8之后,系统吸引了UIAlertController这个类,整理了UIAlertView和UIActionSheet这两个控件,在iOS中,如

Windows 8 Store Apps学习(4) 提示控件和范围控件

提示控件: ProgressRing; 范围控件: ProgressBar, Slider 介绍 重新想象 Windows 8 Store Apps 之提示控件 ProgressRing - 进度圈控件 重新想象 Windows 8 Store Apps 之范围控件 ProgressBar - 进度条控件 Slider - 滑动条控件 示例 1.ProgressRing 的 Demo ProgressRingDemo.xaml <Page x:Class="XamlDemo.Control

jquery dialog open后,服务器端控件失效的快速解决方法

 本篇文章是对jquery dialog open后,服务器端控件失效的快速解决方法.进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多.    在使用jquery与.net共同开发时,直接调用jquery dialog的open后,服务器端控件全部失效了,不能执行相应的后台代码.只是源于jquery默认把dialog添加到body中,而不是原来所在的服务器端的f

exifinterface-请教:用VB6.0实现修改照片EXIF信息有什么控件可用?

问题描述 请教:用VB6.0实现修改照片EXIF信息有什么控件可用? 最近在写一个实现照片GPS信息修改的程序,vb6.0开发,找了几个动态连接库都不能用.各位大侠有什么控件可以直接用的,发一个给我,邮箱chenqi0919@126.com,谢谢! 解决方案 看看这个是不是有帮助 发布一个EXIF编辑软件 http://tieba.baidu.com/p/3714883798

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

原文:重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider [源码下载] 重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之提示控件 ProgressRing - 进度圈控件 重新想象 Windows

jQuery EasyUI中的日期控件DateBox修改方法_jquery

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs

Android编程基础之简单Button事件响应综合提示控件Toast应用示例_Android

本文实例讲述了Android简单Button事件响应综合提示控件Toast应用.分享给大家供大家参考,具体如下: 前面讲述了在main.xml里定义了Button对象,这里我们来学习Button如何实现事件响应. Button按钮所触发的事件处理,我们称之为Event Handle,只不过在Android当中,按钮事件是由系统的Button.OnClickListener所控制,熟悉Java程序设计的读者对OnXxxListener应该不陌生.以下的Demo,我们将实现当点击Button时,Te