原创:jquery qtip2与数据库交互的完美实现
相信来博客园的都是码农,那废话少说,直接上代码了:
index.php
<html>
<head>
<title>jQuery qtip2 实例演示</title>
<link rel="stylesheet" type="text/css" href="js/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.qtip.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<?php include("functions.php");
$str="为了回馈犀牛橄榄油的广大客户,非主流哦,巨万阳光启动了“犀牛送‘宝马’,助威西班牙”的市场活动;凡消费者在6月11日至7月10日于指定商超购买任意规格犀牛特级初榨橄榄油一支,即可参加活动。活动规则:若西班牙在本 次南非世界杯中夺冠,巨万阳光将抽取一等奖3名,将获得西班牙双人游;二等奖30名,将送出服装品牌ZARA或现金券5000元;三等奖200名,将获犀牛特级初榨橄榄油一箱(250mlx12支),总金额高达60万。在2010年7月12日02:30,西班牙绝杀荷兰,以1-0荣获世界杯冠军。";
//测试文章
?>
<script type="text/javascript">
$(function() {
$("#result a[rel]").each(function(){
$(this).qtip({
content: {
text: "loading...",
ajax: {
url: 'login.php'+'?keyword='+$(this).text()
// Use the rel attribute of each element for the url to load
},
title:{
text:"KRCMS-"+$(this).text(),
button: true
}
},
position: {
at: 'bottom center', // Position the tooltip above the link
my: 'top center',
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus'
})
})
.click(function(event) { event.preventDefault(); });
});
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:500px;height:380px;">
<?php getKeyArray($str);?>
</div>
</body>
</html>
login.php
<?php
error_reporting(0);
include("conn.php");
include("functions.php");
if($_GET['keyword']){
$param = $_GET['keyword'];
$query = "SELECT * FROM keywords WHERE `keyword` = '".$param."'";
$result = mysql_query($query);
while($row =mysql_fetch_array($result))
{
$key = trim($row['keyword']);
$key_intro=trim($row['introduction']);
$key_url=trim($row['rpurl']);
$key_url = autolink($key_url);
$str = "<h1 class=\"title\">$key</h1><b>$key_intro</b><br />";
$str.="<p class=\"note\">查看更多$key_url</p>";
}
echo $str;
}else{
echo "ERROR!";
}
?>
//从数据库中读取匹配 conn.php是数据库连接文件 functions.php即我其中转载的一片自动关键字获取文章中的两个方法,
关于qtip2
Website: http://craigsworks.com/projects/qtip2/
Demo: http://craigsworks.com/projects/qtip2/demos/
Download: http://craigsworks.com/projects/qtip2/download/
不懂可追问!原创精品:转载请标明出处!http://www.cnblogs.com/jia58960/archive/2012/02/24/2367074.html