Tips with style
- WBOYOriginal
- 2016-07-06 13:28:311195browse
Jump to
[1]
[2]
[3]
[Full screen preview]
@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;
}
2. [File] LJTIPS.html ~ 2KB Download(0) Jump to [1] [2] [3] [Full screen preview]
<!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>
3. [File] ljtips.js ~ 3KB Download(0) Jump to [1] [2] [3] [Full screen preview]
// 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;
}
}();
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn