Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > php教程 > PHP源码 > 有样式的tips

有样式的tips

WBOY
Freigeben： 2016-07-06 13:28:31
Original
1217 Leute haben es durchsucht
跳至 [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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
		}
	}();
Nach dem Login kopieren
Verwandte Etiketten：
有样式的tips
Quelle：php.cn
Vorheriger Artikel：php+phpexcel+uploaddify批量导入EXCEL平台注册用户数据批量发短信2 Nächster Artikel：php+phpexcel+uploaddify批量导入EXCEL平台注册用户数据批量发短信
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
9
1588
Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus? Hier ist meine Sort.js-Stilkomponente: <SortWrapper><SortText>SortBy</SortT...
Aus 2024-04-06 21:28:37
0
1
2257
Die Abfrage und die Formel bilden die gesamte Tabelle mit neuen Spalten, wobei die neuen Spalten Formeln sind, die andere bedingte Spaltenwerte beinhalten BEARBEITEN: Die Formel sollte die Spalte „Wert“ sein – die Spalte „Wert“ mit der niedrigst...
Aus 2024-04-06 21:23:40
0
2
530
Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
Aus 2024-04-06 20:57:16
0
1
487
So verwenden Sie Laravel-Komponenten mit Livewire-Lazy-Platzhaltern Ich möchte das Skelett meiner Laravel-Komponente in einen Livewire3-Platzhalter einfügen. ...
Aus 2024-04-06 20:02:10
0
2
543
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage