在web开发中,有时需要实时的向用户提示一些有用的信息,比如数据库插入/删除成功,网络情况等。而由于面板上的空间有限,我们需要设置一种可以动态显示的提示信息,这种信息在页面上动态生成,过一段时间(如5秒)后自动消失,这样既可以通知到用户,又可以节省页面上的空间。
事实上,一些桌面应用早就使用了这个技术,比如gmail的提示,卡巴斯基的提示等都采取这种方式。周末研究了一下这块,自己用javascript和CSS实现了一个动态的tip。先看看效果:
提示可以有很多种,每一种都可以定义一个样式。
从上边的分析来看,我们的动态tip需要这样几个参数:
- container:提示消息的容器(用于动态加载消息,并负责呈现)
- type:类型(用于表示消息的类型,如错误,警告,信息,其他)
- text:文字信息(消息体)
- 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
分享到:
相关推荐
在基于jQuery实现动态Tip提示时,我们需要考虑以下几个关键知识点: 1. **jQuery选择器**:jQuery提供了丰富的选择器,如`id`选择器(`#id`)、类选择器(`.class`)、元素选择器(`tagname`)等,用于定位DOM元素。在...
本篇文章将详细探讨如何在Qt中实现一个自定义的提示框(Tip),即“自定义tip”。 首先,我们要理解“tooltip”在UI设计中的作用。Tooltip是当鼠标悬停在某个控件上时,会短暂显示的一段文字信息,用于提供关于该控件...
以上代码示例展示了如何使用JavaScript实现一个基本的动态tips提示信息框。你可以根据实际需求调整样式、位置计算和事件处理。如果你想要更复杂的功能,例如动画效果或者自定义触发事件,可以进一步扩展这个基础框架...
- **应用场景**: 当用户在一个输入框中完成输入后,可以通过NEXTFILED功能自动将焦点移至下一个输入框,从而实现流畅的数据录入流程。 - **实现方式**: - 在TIPTOP GP的表单设计中,可以通过设置NEXTFILED属性来...
在Delphi编程环境中,开发一个能够实现在桌面右下角弹出消息提示的功能是一项常见的任务。这个"Tip.rar_delphi 消息提示_tip"压缩包很可能是包含了一个使用Delphi编写的示例程序,用于展示如何创建这样的消息提示...
在Android中,创建一个Tip类可能意味着创建一个新的自定义View或Dialog。这通常涉及到继承自`View`或`DialogFragment`,并覆盖其中的方法,如`onDraw()`来绘制提示信息的图形界面。 2. **布局设计**: Tip类的...
通过以上步骤,你就可以在D3图表中实现一个功能完善的提示系统,用户可以轻松获取图形上任何点的X和Y坐标值,从而增强图形的交互性和信息传递效果。在实际项目中,D3 Tip不仅可以用于显示坐标值,还可以展示其他相关...
通过上述知识点的介绍和实例分析,我们可以清楚地了解如何使用JavaScript实现一个简单的Tip提示框效果。了解这些基础知识和技巧将有助于我们在未来的Web开发中设计出更加友好和直观的用户界面。此外,根据文档提供的...
曾经参与鼎捷Tiptop GP实施十多个项目,具有丰富的二次开发经验,欢迎通过咨询交流, 支持 鼎捷 Tiptop GP 3.0版本以上二次开发 鼎捷ERP二维码整体解决方案 Tiptop GP条码管理系统 鼎捷ERP移动解决方案 鼎捷条码扫描...
1. **消息弹出机制**:首先,需要创建一个能够动态显示和隐藏的消息窗口。这通常涉及到Windows API或跨平台GUI库(如Qt、wxWidgets)的使用,通过调用相关函数来创建窗口并控制其显示和隐藏。 2. **动画效果**:QQ ...
例如,在给定的部分内容中,定义了一个`ljtips`函数,该函数接收一个参数`l`,并根据这个参数获取DOM元素,然后进一步处理显示逻辑。 ### 三、技术实现方法 #### 1. 使用纯CSS实现 对于简单的提示信息,可以仅使用...
这个 `div` 可能会有一个特定的类名,以便在CSS中进行样式设置,并在JavaScript中作为目标元素。 ```html <div class="tip-container" data-title="提示标题"> <span class="tip-trigger">悬停我 <div class="tip...
Java Balloon Tip Tool 是一个基于Java编程语言的实用工具,主要用于在用户界面上显示临时性的提示信息,类似于操作系统中的气泡提示。这种工具通常用于快速传递简短的通知或信息,而不打断用户的正常工作流程。在...
content: '这是一个提示信息', position: 'top', trigger: 'hover', delay: 500 }); ``` ### 4. 自定义样式 默认的CSS样式可能无法满足所有设计需求,开发者可以通过修改`jquery.tip.css`或在项目中创建新的...
今天,我们将聚焦于一个名为"tiptop5.3_util.so"的动态链接库文件,它在tiptop5.3系统中扮演了关键的角色,特别是对于JSON数据的解析。这篇详述将深入探讨util.so的功能、工作原理以及其与JSON解析的关联。 首先,...
3. **负载均衡**:合理分配资源,避免某一个系统负担过重。 4. **监控与日志**:设置全面的监控和日志记录机制,以便及时发现问题并快速响应。 ### 三、具体实现方法 #### 1. 环境准备 - **安装TipTop GP系统**:...
"编辑框显示tip"是指在用户将鼠标悬停在编辑框上时,程序自动弹出一个小型提示窗口(tooltip)显示相关信息。这种功能极大地提高了用户体验,因为它允许用户在不离开当前操作的情况下获取帮助信息。 在VC 6.0中实现...
6. **插件使用**:`jquery.tip.js`可能是一个预封装的jQuery插件,用于方便地实现提示效果。使用时,需要先引入jQuery库,然后引入插件,最后调用相应的插件方法,如`$('selector').tip(options)`。 7. **示例代码*...
4. **cl_batch_proc**: 这个函数用于动态创建批次数据处理界面,传入参数是一个以逗号分隔的表头字符串。如`CALL cl_batch_proc("img01,img02,img03,img04,imk09")`将根据提供的表头创建界面。 5. **cl_cal**: 此...