有样式的tips
- WBOYOriginal
- 2016-07-06 13:28:311195Durchsuche
跳至
[1]
[2]
[3]
[全屏预览]
@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. [文件] LJTIPS.html ~ 2KB 下载(0) 跳至 [1] [2] [3] [全屏预览]
<!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. [文件] ljtips.js ~ 3KB 下载(0) 跳至 [1] [2] [3] [全屏预览]
// 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;
}
}();
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：php+phpexcel+uploaddify批量导入EXCEL平台注册用户数据批量发短信2Nächster Artikel：php+phpexcel+uploaddify批量导入EXCEL平台注册用户数据批量发短信