jquery提示插件qtip2使用(全面)

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

qTip

打开边栏(ESC) 关闭边栏(ESC)

首先引入jquery.qtip.css和jquery.qtip.js

下载地址http://qtip2.com/download

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>qTip插件</title>
<link href='jquery.qtip.min.css' rel='stylesheet' />
<script src='jquery.min.js'></script>
<script src='jquery.qtip.min.js'></script>
</head>

<body>
用户名：<input type="text" id="username"><br>
密码：<input type="text" id="password"><br>
密码2：<input type="text" id="password2"><br>
密码3：<input type="text" id="password3"><br>
<script>
$(function(){
	//只有简单提示
	$('#username').qtip({ // Grab some elements to apply the tooltipto
		content: {
			text: '用户名只能输入英文字母或者数字'
		}
	}); 
	//带标题的
	$('#password').qtip({ // Grabsome elements to apply the tooltip to
		content: {
			text:'密码为6-12位数',
			title:"演示",
		}
	});
	//设置位置
	/*
	my:是指三角的位置
	at:是在提示在组件的相对位置（top 上 bottom下  ）（ left左 right右center中）两组配合使用
	*/
	$('#password2').qtip({ // Grab some elements to apply the tooltipto
		content: {
	    	text: '密码为6-12位数',
			title:"演示",
		},
		position:{
			my: 'top left',
			at: 'bottom center',
		}
	});
	//设置风格
	/*
	classes可以有多种选择，可以自定义qtip-purple
	qtip-light浅色
	qtip-dark 深色
	qtip-cream
	qtip-red
	qtip-blue
	qtip-shadow
	qtip-rounded圆角
	qtip-youtube
	qtip-jtools
	qtip-cluetip
	qtip-tipsy
	qtip-tip
	qtip-titlebar
	qtip-default
	*/
	$('#password3').qtip({ // Grab some elements to apply the tooltipto
		content: {
	    	text: '密码为6-12位数',
			title:"演示",
		},
		position:{
			my: 'top left',
			at: 'bottom center',
		},
		style:{
			classes: 'qtip-red',
			tip: {		          
		    	border:1,
		    	width:50,
		    	height:20
		    }
		}
	});

});

</script>
<style>
/*可以自定义 上面的qtip-purple就是我自己定义的*/
.qtip-purple{background-color:#9FF0E1;border-color:#EEC933;color:#42B453}
.qtip-purple.qtip-titlebar{background-color:#9465E1} 
/*background-color是内容的背景颜色
border-color:整个的边框
color:文字的颜色*/
.qtip-purple.qtip-titlebar{background-color: #9465E1}  /*设置的是标题的背景色*/
/*标题还可以设置标题文字颜色*/
.qtip-purple .qtip-titlebar{background-color:#9465E1;color:red} 
</style>
</body>
</html>

赏

前一篇

jQuery中$.each()方法的使用

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

jQuery中$.each()方法的使用

jQuery 3.3.1 cdn链接