有样式的tips-PHP源码-php.cn

Maison

php教程

PHP源码

有样式的tips

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 06, 2016 pm 01:28 PM

跳至 [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;
}

Copier après la connexion

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>

Copier après la connexion

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;
		}
	}();

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn