需求：给表单每个信息项添加一个帮助信息，当mouseover或focus时激活帮助信息
效果：如下图所示
程序实现：
/*
2007-01-30 lisq custom tooltip
use age:
<script src="/modules/commons/js/prototype.js"></script>
<script src="/modules/commons/js/tooltip.js"></script>
var config = new ToolTip.Config($('A0101'), '人员姓名', 400)
var arrConfig = []
arrConfig.push(config)
var tootip = ToolTip.Init(arrConfig)
*/
Event.observe(window, 'load', function(){
var div = document.createElement('div')
div.id = 'ToolTipID'
var divIntroTopLine = document.createElement('div')
divIntroTopLine.id = 'divIntroTopLine'
div.appendChild(divIntroTopLine)
var divIntroArrow = document.createElement('div')
divIntroArrow.id = 'divIntroArrow'
divIntroTopLine.appendChild(divIntroArrow)
var divIntroContent = document.createElement('div')
divIntroContent.id = 'divIntroContent'
divIntroContent.innerHTML = 'hello world'
div.appendChild(divIntroContent)
ToolTip.Container = div
ToolTip.ContainerContent = divIntroContent
document.body.appendChild(div)
Element.hide(div)
}, false)
var ToolTip = {
Config : function(ele, tip, width){
this.ele = ele
ele.config = this
this.tip = tip
this.width = width
},
Init : function(arrConfig){
for(var i=0; i<arrConfig.length; i++){
var config = arrConfig[i]
if(!config || !config.ele || !config.tip)
continue
config.ele.tip = config.tip
config.ele.onmouseover = ToolTip.MouseOver
config.ele.onmouseout = ToolTip.MouseOut
config.ele.onfocus = ToolTip.MouseOver
config.ele.onblur = ToolTip.MouseOut
}
},
MouseOver : function(){
ToolTip.Container.style.width = this.config.width
ToolTip.ContainerContent.innerHTML = this.tip
var arr = Position.positionedOffset(this)
eToolTip = $('ToolTipID')
eToolTip.style.left = arr[0] - 50
eToolTip.style.top = arr[1] + 21
Element.show(eToolTip)
},
MouseOut : function(){
eToolTip = $('ToolTipID')
Element.hide(eToolTip)
}
}
调用：
var config = new ToolTip.Config(fieldInput, field.HelpInfo, 150)
ToolTip.Init([config])
posted @ 2007-06-15 15:01
布尔 阅读(745)
评论(4) 编辑 收藏 网摘 所属分类:
Javascript