Javascript :
// 提示插件
$.tips = function(ele, txt) {
// 参数
var r = true, // 插件返回值
wrap = $(' '), // required包裹元素
animationTime = 600,
_this = this, // this
;
// 显示提示框
_this.show = function($this) {
wrap
.prepend(txt) // 当存在data-required属性时,提示框显示其值。
.css({
"left" : $this.offset().left + $this.outerWidth() / 2 - 16,
"top" : $this.offset().top + $this.outerHeight() + 7
})
;
$("body").append(wrap);
wrap.fadeIn(animationTime);
// 移除提示框
_this.hide($this);
}
// 隐藏提示框
_this.hide = function ($this) {
var timer = setTimeout(function(){
_this.remove();
}, 6000);
$this.blur(function(){
clearTimeout(timer);
_this.remove();
});
$this.keydown(function(e) {
clearTimeout(timer);
_this.remove();
$this.unbind("keydown");
});
}
// 移除提示框
_this.remove = function() {
wrap.fadeOut(animationTime, function() {
$(this).remove();
});
}
_this.show(o.ele);
}
CSS :
/* tips提示框 { */
.tips {
border: 1px solid #C7C7C7;
background: #fff url(../img/required.gif) no-repeat 6px center;
padding-right: 16px;
padding-left: 33px;
height: 32px;
font: 14px/32px SimSun, 'Microsoft YaHei', SimHei;
position: absolute;
left: 40%;
top: 300px;
border-radius: 3px;
color: #000;
box-shadow: 0px 2px 5px 0px #c7c7c7;
display: none;
}
.tips i, .tips b {
position: absolute;
width: 0;
height: 0;
border-width: 0 7px 7px 7px;
border-style: solid;
border-color: transparent transparent #fff transparent;
top: -7px;
left: 10px;
}
.tips b {
top: -8px;
border-color: transparent transparent #c7c7c7 transparent;
}
/* tips 提示框 } */
|