@charset "utf-8";
/* CSS Document */
/* ljtips 1.0 */
/* lujun idche@qq.com*/
/* 2010-10-8*/
.lj-tipsWrap,.lj-in,.lj-close {
display: inline-block;
color: #fff
}
.lj-tipsWrap {
background: #000;
filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity:0.6;
opacity : 0.6;
line-height: 1.6em;
padding: 10px 15px;
position: absolute;
text-align: left;
text-align: left;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.lj-in {
position: absolute;
zoom: 1;
border: 10px dashed transparent;
width: 0px;
height: 0px;
}
.lj-in span {
zoom: 1;
width: 0px;
height: 0px;
overflow: hidden;
}
.lj-close {
position: absolute;
text-decoration: none;
color: #fff;
font-size: 14px;
height: 9px;
width: 9px;
overflow: hidden;
line-height: 0.5em;
right: 0;
top: 0;
}
.lj-close:hover {
color: red;
}
.lj-top {
border-top: 10px solid #000;
bottom: -20px;
left: 3px;
}
.lj-top span {
border-top: 10px solid #000;
margin: -11px 0 0 -10px;
}
.lj-right {
border-right: 10px solid #000;
left: -20px;
top: 3px;
}
.lj-right span {
border-right: 10px solid #000;
margin: -10px 0 0 -9px;
}
.lj-bottom {
border-bottom: 10px solid #000;
top: -20px;
left: 3px;
}
.lj-bottom span {
border-bottom: 10px solid #000;
margin: -9px 0 0 -10px;
}
.lj-left {
border-left: 10px solid #000;
right: -21px;
top: 3px;
}
.lj-left span {
border-left: 10px solid #000;
margin: -10px 0 0 -11px;
}
.lj-left ~ .lj-close {
left: 0;
}
/*css 3 渐进增强*/
.lj-tipsWrap {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单提示框插件</title>
<link href="ljtips.css" type="text/css" rel="stylesheet" />
</head>
<body style="text-align:center;">
<input type="text" id="test" style="margin:50px auto;" /><br/>
<input type="button" value="左弹出" onclick="a.show({content:'Hello World! This is LJTIPS.',p:'left',clear:true,time:1000})" title="1秒消失" />
<input type="button" value="右弹出" onclick="a.show({content:'Hello World! This is LJTIPS.<br/>换行',p:'right',clear:true,closeBtn:true})" title="有关闭按钮" />
<script type="text/javascript" src="ljtips.js"></script>
<script type="text/javascript">
/* 实例化调用*/
var a = ljtips('test');
a.show({content:'这里是LJTIPS弹出的提示<br>hello word',p:'right',clear:true,closeBtn:true});
</script>
<div style="text-align:left;" >
必须文件：ljtips.css,<br/>ljtips.js(JS请在页面最后加载，也就是DOM元素载入完成以后)
</div>
<dl style="text-align:left;">
<dt>ljtips();</dt>
<dd>参数:String 页面DOM 元素ID<br/>
element 页面DOm元素对象
</dd>
<dd>返回值:Object
{show,hide}
</dd>
<dl>.show()</dl>
<dd>参数{conteng:String,
p:String,
clear:boolean,
closeBtn:boolean,
time:1000
}</dd>
<dd>
conteng:提示内容,可以是HTML片段<br/>
p:提示的位置。可选参数[top,bottom.left,right] 默认right<br/>
clear:强制清除他已经存在的提示 默认 false<br/>
boolean:是否有关闭按钮 默认false<br/>
time:提示显示时间，单位毫秒 默认不消失<br/>
<br/>
</dd>
<dl>.hide()</dl>
<dd>清除当前对象上的提示，无参数</dd>
<dd><a href="#" onclick="ljtips(this).show({content:'行内调用',closeBtn:true});">点击我</a></dd>
</dl>
</body>
</html>
// JavaScript Document
window.ljtips = function(){
var html = "<div class=\"lj-tipsWrap\" id=\"tipsWrap-<%=r%>\">\
<div></div>\
<span class=\"lj-in lj-<%=p%>\"><span class=\"lj-in\"></span></span>\
<a href=\"javascript:void(0)\" id=\"ljClose<%=r%>\" class=\"lj-close\">x</a>\
</div>";
var dg = function(id){return document.getElementById(id);};
var dt = function(parent, nodeName){return parent.getElementsByTagName(nodeName);};
var db = document.body;
var dd = document.documentElement;
var of = 15;// 偏移量
var prefix = 'lj';// 前缀
var w = window;
var lock = true;// 锁定同一对象 多次弹出提示
return function(id){
var elem = id ? typeof id == "string" ? dg(id) : id : this;
var offset = null;
var width = elem.offsetWidth;
var height = elem.offsetHeight;
var rand = 0;// 随即值
var func = null;// 窗口变化绑定的函数
var _this = {};
var pos = {
left : function(w, h){return {top:offset.top , left:offset.left - w - of}},
top : function(w, h){return {top:offset.top - h - of, left:offset.left}},
right : function(w, h){return {top:offset.top , left:offset.left + width + of}},
bottom : function(w, h){return {top:offset.top + height + of , left:offset.left}}
};
_this.show = function(obj){
if(elem.lock && !obj.clear)return false;
if(obj.clear)_this.clear(dg(prefix + rand));
elem.lock=true;
offset = elem.getBoundingClientRect();
var top = db.scrollTop + dd.scrollTop;
var left= db.scrollLeft + dd.scrollLeft;
obj.p = obj.p || 'right';
var wrap = _this.append(obj.p, obj.closeBtn || false);
dt(wrap, "DIV")[0].innerHTML = obj.content;
var p = pos[obj.p](wrap.offsetWidth,wrap.offsetHeight);
wrap.style.top = p.top + top + "px";
wrap.style.left = p.left + left + "px";
obj.time && setTimeout(function(){_this.clear(dg(prefix+rand));}, obj.time);
obj.fn && obj.fn.call(elem, dg(prefix+rand));
//--检测窗口发生变化
func = function(a, b){
return function(){
var top = db.scrollTop + dd.scrollTop;
var left= db.scrollLeft + dd.scrollLeft;
offset = elem.getBoundingClientRect();
var c = pos[obj.p](wrap.offsetWidth, wrap.offsetHeight);
b.style.top = c.top + top + 'px';
b.style.left = c.left + left + 'px';
}
}(elem, wrap);
w.attachEvent ? w.attachEvent('onresize', func) : w.addEventListener('resize', func, false);
}
_this.append = function(p,closeBtn){
var r = rand = Math.floor(Math.random() * 10000);
var x = document.createElement("DIV");
x.id = prefix + r;
x.innerHTML = html.replace("<%=p%>",p).replace(/<%=r%>/g,r);
document.body.appendChild(x);
if(closeBtn){
dg("ljClose"+r).onclick = _this.hide;
}else{
dg("ljClose"+r).style.display = "none";
}
return dg("tipsWrap-" + r);
}
_this.clear = function(a){
a && a.parentNode && a.parentNode.removeChild(a);
// try{
w.attachEvent ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false);
// }catch(e){}
elem.lock = false;// 解除锁定
}
_this.hide = function(){
_this.clear(dg(prefix + rand));
}
return _this;
}
}();
