原创: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

posted @ 2012-02-24 18:27  jia58960  阅读(914)  评论(0编辑  收藏  举报