`
abruzzi
  • 浏览: 452388 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

一个动态的Tip的实现

阅读更多

在web开发中,有时需要实时的向用户提示一些有用的信息,比如数据库插入/删除成功,网络情况等。而由于面板上的空间有限,我们需要设置一种可以动态显示的提示信息,这种信息在页面上动态生成,过一段时间(如5秒)后自动消失,这样既可以通知到用户,又可以节省页面上的空间。

事实上,一些桌面应用早就使用了这个技术,比如gmail的提示,卡巴斯基的提示等都采取这种方式。周末研究了一下这块,自己用javascript和CSS实现了一个动态的tip。先看看效果:



 提示可以有很多种,每一种都可以定义一个样式。

 从上边的分析来看,我们的动态tip需要这样几个参数:

  1. container:提示消息的容器(用于动态加载消息,并负责呈现)
  2. type:类型(用于表示消息的类型,如错误,警告,信息,其他)
  3. text:文字信息(消息体)
  4. timeout:超时参数(指定该消息在timeout毫秒后自动消失)

下面是这个模块的具体实现:

/*
 *  @param container the container of the tip
 *  @param type the type of the tip [error, warnning, infor, other]
 *  @param text of the tip, could be any thing you want to show to user.
 *  @param timeout when timeout,the tip will disappear
 *
 */
function showTip(container, type, text, timeout){
    var tipContainer = document.getElementById(container);

    var tip = document.createElement('div');

    var icon = document.createElement('img');
    var tipSpan = document.createElement('span');

    if(type == 'error'){
        tip.setAttribute('class', 'errorTip'); 
        icon.src = 'images/incorrect.gif';
    }else if(type == 'warnning'){
        tip.setAttribute('class', 'warnningTip');            
        icon.src = 'images/error.png';
    }else if(type == 'infor'){
        tip.setAttribute('class', 'inforTip');            
        icon.src = 'images/infor.gif';
    }else{
        tip.setAttribute('class', 'otherTip');            
        icon.src = 'images/correct.gif';
    }

    tipSpan.innerHTML = text;

    var tab = document.createElement('table');
    tab.border = '0px';

    var row = tab.insertRow(0);
    row.insertCell(0).appendChild(icon);
    row.insertCell(1).appendChild(tipSpan);
   
    tip.appendChild(tab);
    tipContainer.appendChild(tip);

    // set timeout handler
    setTimeout(function(){
        tipContainer.removeChild(tip);
        },
        timeout);
}

 下面是我定义的几个简单的样式,可以自己修改:

.errorTip{
	padding:2px 3px 3px 8px;
	border:1px solid #666666;
	font-size:0.9em;
	color:#000000;
    background:#FF0066;
}
.warnningTip{
	padding:2px 3px 3px 8px;
	border:1px solid #666666;
	font-size:0.9em;
	color:#000000;
    background:#FFEACC;
}
.inforTip{
	padding:2px 3px 3px 8px;
	border:1px solid #666666;
	font-size:0.9em;
	color:#000000;
    background:#C2CFF1;
}
.otherTip{
	padding:2px 3px 3px 8px;
	border:1px solid #666666;
	font-size:0.9em;
	color:#000000;
    background:#FFFFFF;
}

 顺便在这里给Vim做一下宣传,这里使用了一个vim的CSS插件,当定义了颜色值后,vim可以直接在编辑器中显示出这个颜色来,如下图所示:



 哈哈,比较神奇吧。好了,我们的动态tip就算介绍完成了。整个流程比较简单,做一下分析:

  • 根据传入的container的id找到container
  • 新建一个div
  • 新建一个img,一个span,分别用于存放icon和text信息
  • 新建一个table,并设置其border为0,
  • 在table上建一个行,并在行上建两列
  • 将img和span分别加载到这两个列上
  • 设置timeout处理函数

唯一值得一说的是这个setTimeout函数的使用,这体现了javascipt作为一个牛B语言的牛B之处:

    setTimeout(function(){
        tipContainer.removeChild(tip);
        },
        timeout);

 第一个参数是一个函数,相当于C里的函数指针,第二个参数是一个时间值(毫秒级)。当timeout时,调用第一个函数。在这个例子中,这个函数是一个匿名函数,当然也可以定义在外部。

 

JavaScript是一个神奇的语言,我们平时在web中只用到了其中的一部分。在以后,我会陆续把我对JavaScript的学习的笔记贴出来,敬请关注。

  • 大小: 1.6 KB
  • 大小: 1.5 KB
  • 大小: 45 KB
分享到:
评论
8 楼 abruzzi 2009-03-09  
yandongdiy123 写道

刚查了一下,setTimeout的作用域是全局window,将function(){  
    tipContainer.removeChild(tip);  
    }复制给setTimeout的内部函数指针,那tipContainer.removeChild(tip)的域也变成了window,在window域下还没有定义tipContainer,虽然用闭包可以把函数复制给setTimeout的内部函数指针前取到tipContainer,但完成后执行后作用域又转到window域,tipContainer作为一个函数内的局部变量,一个window作用域的函数可以取到吗?

不太明白你的意思?你不是想用这个小工具showTip吗?传入你指定的参数就可以了啊。可否把你的需求描述的详细一些,呵呵。
7 楼 yandongdiy123 2009-03-08  
刚查了一下,setTimeout的作用域是全局window,将function(){  
    tipContainer.removeChild(tip);  
    }复制给setTimeout的内部函数指针,那tipContainer.removeChild(tip)的域也变成了window,在window域下还没有定义tipContainer,虽然用闭包可以把函数复制给setTimeout的内部函数指针前取到tipContainer,但完成后执行后作用域又转到window域,tipContainer作为一个函数内的局部变量,一个window作用域的函数可以取到吗?
6 楼 abruzzi 2009-03-08  
yandongdiy123 写道

如果setTimeout在函数内部的话,tipContainer是闭包,function(){ 
    tipContainer.removeChild(tip); }可以取到tipContainer,是这样吗?

对,是在内部的,你需要将container的id传入,剩下的事就交给这个封装来做,从逻辑上更清晰一些。不要有什么全局变量,不然项目一大人就崩溃了。
5 楼 yandongdiy123 2009-03-08  
如果setTimeout在函数内部的话,tipContainer是闭包,function(){ 
    tipContainer.removeChild(tip); }可以取到tipContainer,是这样吗?
4 楼 yandongdiy123 2009-03-08  
  tipContainer是在函数里定义的局部变量,setTimeout是另外的函数,可以调用到局部变量吗?
3 楼 abruzzi 2009-03-08  
引用

setTimeout(function(){ 
    tipContainer.removeChild(tip); 
    }, 
    timeout);
tipContainer可以直接取到吗?
可以取到啊,取tipContainer的代码在第9行。
var tipContainer = document.getElementById(container); 

Ext不是很熟,这个text.dom.value是什么意思?text会有dom属性吗?dom是整个html树的根吧?
2 楼 yandongdiy123 2009-03-08  
setTimeout(function(){  
    tipContainer.removeChild(tip);  
    },  
    timeout); 
tipContainer可以直接取到吗?
下面这个text就取不到
ajax回调场景,现在html有一个text输入框,一个按钮:
<input tpye="text" name="text" id="text">
<input type="button" name="button" id="button" value="button">
按这个按钮之后,使用ajax去后台读取数据,然后把后台相应的数据放到text里
function doSuceess(response){
    text.dom.value=response.responseText;
}
Ext.onReady(function(){
   Ext.get('button').on('click',function(){
     var text=Ext.get('text');
     Ext.lib.Ajax.request(
         'Post',
         '08-07.txt',
          {success:doSuccess},
         'param='+encodeURIComponent(text.dom.value)
    );
  });
));
为什么浏览器说text未定义
1 楼 smithsun 2008-12-29  

写的不错,条理很清晰,例子也很实用。
继续关注ing!

相关推荐

    动感的Tip提示效果,基于jquery的代码实现

    在基于jQuery实现动态Tip提示时,我们需要考虑以下几个关键知识点: 1. **jQuery选择器**:jQuery提供了丰富的选择器,如`id`选择器(`#id`)、类选择器(`.class`)、元素选择器(`tagname`)等,用于定位DOM元素。在...

    Qt实现的自定义tip

    本篇文章将详细探讨如何在Qt中实现一个自定义的提示框(Tip),即“自定义tip”。 首先,我们要理解“tooltip”在UI设计中的作用。Tooltip是当鼠标悬停在某个控件上时,会短暂显示的一段文字信息,用于提供关于该控件...

    JS实现简单实用的自动动态tips提示信息框(小的气泡框)效果

    以上代码示例展示了如何使用JavaScript实现一个基本的动态tips提示信息框。你可以根据实际需求调整样式、位置计算和事件处理。如果你想要更复杂的功能,例如动画效果或者自定义触发事件,可以进一步扩展这个基础框架...

    TIPTOP GP栏位跳转问题

    - **应用场景**: 当用户在一个输入框中完成输入后,可以通过NEXTFILED功能自动将焦点移至下一个输入框,从而实现流畅的数据录入流程。 - **实现方式**: - 在TIPTOP GP的表单设计中,可以通过设置NEXTFILED属性来...

    Tip.rar_delphi 消息提示_tip

    在Delphi编程环境中,开发一个能够实现在桌面右下角弹出消息提示的功能是一项常见的任务。这个"Tip.rar_delphi 消息提示_tip"压缩包很可能是包含了一个使用Delphi编写的示例程序,用于展示如何创建这样的消息提示...

    Tip类demo Tip类demo

    在Android中,创建一个Tip类可能意味着创建一个新的自定义View或Dialog。这通常涉及到继承自`View`或`DialogFragment`,并覆盖其中的方法,如`onDraw()`来绘制提示信息的图形界面。 2. **布局设计**: Tip类的...

    D3 Tip 获取 X,Y

    通过以上步骤,你就可以在D3图表中实现一个功能完善的提示系统,用户可以轻松获取图形上任何点的X和Y坐标值,从而增强图形的交互性和信息传递效果。在实际项目中,D3 Tip不仅可以用于显示坐标值,还可以展示其他相关...

    JavaScript实现简单Tip提示框效果

    通过上述知识点的介绍和实例分析,我们可以清楚地了解如何使用JavaScript实现一个简单的Tip提示框效果。了解这些基础知识和技巧将有助于我们在未来的Web开发中设计出更加友好和直观的用户界面。此外,根据文档提供的...

    Tiptop T100 Tiptop GP鼎捷智能物流平台 鼎捷APP 二维码整体解决方案 鼎捷WMS仓库移动扫码鼎捷安卓PDA

    曾经参与鼎捷Tiptop GP实施十多个项目,具有丰富的二次开发经验,欢迎通过咨询交流, 支持 鼎捷 Tiptop GP 3.0版本以上二次开发 鼎捷ERP二维码整体解决方案 Tiptop GP条码管理系统 鼎捷ERP移动解决方案 鼎捷条码扫描...

    像QQ消息一样简单的Tip

    1. **消息弹出机制**:首先,需要创建一个能够动态显示和隐藏的消息窗口。这通常涉及到Windows API或跨平台GUI库(如Qt、wxWidgets)的使用,通过调用相关函数来创建窗口并控制其显示和隐藏。 2. **动画效果**:QQ ...

    js中的tip提示信息

    例如,在给定的部分内容中,定义了一个`ljtips`函数,该函数接收一个参数`l`,并根据这个参数获取DOM元素,然后进一步处理显示逻辑。 ### 三、技术实现方法 #### 1. 使用纯CSS实现 对于简单的提示信息,可以仅使用...

    div+tip(title)

    这个 `div` 可能会有一个特定的类名,以便在CSS中进行样式设置,并在JavaScript中作为目标元素。 ```html &lt;div class="tip-container" data-title="提示标题"&gt; &lt;span class="tip-trigger"&gt;悬停我 &lt;div class="tip...

    Java balloon Tip Tool

    Java Balloon Tip Tool 是一个基于Java编程语言的实用工具,主要用于在用户界面上显示临时性的提示信息,类似于操作系统中的气泡提示。这种工具通常用于快速传递简短的通知或信息,而不打断用户的正常工作流程。在...

    Jquery Tip 插件使用

    content: '这是一个提示信息', position: 'top', trigger: 'hover', delay: 500 }); ``` ### 4. 自定义样式 默认的CSS样式可能无法满足所有设计需求,开发者可以通过修改`jquery.tip.css`或在项目中创建新的...

    tiptop5.3_util.so

    今天,我们将聚焦于一个名为"tiptop5.3_util.so"的动态链接库文件,它在tiptop5.3系统中扮演了关键的角色,特别是对于JSON数据的解析。这篇详述将深入探讨util.so的功能、工作原理以及其与JSON解析的关联。 首先,...

    TipTop GP系统和TipTop旧系统同时运行的方法

    3. **负载均衡**:合理分配资源,避免某一个系统负担过重。 4. **监控与日志**:设置全面的监控和日志记录机制,以便及时发现问题并快速响应。 ### 三、具体实现方法 #### 1. 环境准备 - **安装TipTop GP系统**:...

    VC 6.0 编辑框 显示tip

    "编辑框显示tip"是指在用户将鼠标悬停在编辑框上时,程序自动弹出一个小型提示窗口(tooltip)显示相关信息。这种功能极大地提高了用户体验,因为它允许用户在不离开当前操作的情况下获取帮助信息。 在VC 6.0中实现...

    jquery title提示效果,jquery tip提示效果

    6. **插件使用**:`jquery.tip.js`可能是一个预封装的jQuery插件,用于方便地实现提示效果。使用时,需要先引入jQuery库,然后引入插件,最后调用相应的插件方法,如`$('selector').tip(options)`。 7. **示例代码*...

    TIPTOP内置函数(共享)

    4. **cl_batch_proc**: 这个函数用于动态创建批次数据处理界面,传入参数是一个以逗号分隔的表头字符串。如`CALL cl_batch_proc("img01,img02,img03,img04,imk09")`将根据提供的表头创建界面。 5. **cl_cal**: 此...

Global site tag (gtag.js) - Google Analytics