|
 |
| |
สอบถาม jquery tooltip โดยดึงข้อมูลจาก database มา show ให้ show รูปภาพและ text ได้ |
| |
 |
|
|
 |
 |
|
ลองเอาไปปรับใช้ดูคับ
Database (SQL)
CREATE TABLE IF NOT EXISTS `bs_customer` (
`cus_id` varchar(10) NOT NULL,
`cus_fullname` varchar(50) NOT NULL default '',
`cus_address` text NOT NULL,
`cus_name` varchar(30) NOT NULL,
`cus_email` varchar(30) default NULL,
`cus_login` varchar(30) NOT NULL default '',
`cus_password` varchar(200) NOT NULL,
PRIMARY KEY (`cus_id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620;
connect.php
<?php
$hostname_connection = "localhost";
$database_connection = "XXXXXX";
$username_connection = "XXXX";
$password_connection = "XXXX";
$connection = mysql_connect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_connection);
mysql_query("SET character_set_results=tis620");
mysql_query("SET character_set_client=tis620");
mysql_query("SET character_set_connection=tis620");
?>
index.php
<!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>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a.userInfo").hover(function(event){ // img.userInfo คือ แท็ก img ที่มี class เท่ากับ userInfo
var userID=$(this).attr("id"); // id ของสมาชิกที่ตรงในฐานข้อมูล
var dataUser=$.ajax({
url:"getUserInfo.php",
data:"member_id="+userID,
success:function(dataUser){
callTooltip("#showUserInfo",event,dataUser);
}
}).responseText;
},function(){
$("#showUserInfo").hide();
});
});
function callTooltip(obj,event,strText){ // ฟังก์ชั่นแสดงกล่องข้อความ Tooltip
var locateX=event.pageX;
var locateY=event.pageY;
locateX+=10;
locateY+=10;
$(obj).show().css({
left:locateX,
top:locateY
}).html(strText);
}
</script>
<style type="text/css">
/* css สำหรับกำหนดรูปแบบของกล่องข้อความ Tooltip */
.iTooltip{
position:absolute;
border:1px solid #FFCC66;
background-color:#FFFFCC;
color:#000000;
display:none;
padding:5px;
width:auto;
font-size:12px;
}
</style>
</head>
<body>
<? require("connect.php");
$query="Select * From bs_customer";
$result=mysql_query($query,$connection);
while($rs=mysql_fetch_array($result)){
echo "<a href=\"#\" class=\"userInfo\" id=\"$rs[cus_id]\">$rs[cus_id]</a>"."</br>";
}
?>
<span class='iTooltip' id="showUserInfo"></span>
</body>
</html>
getUserInfo.php
<?
require("connect.php");
if($_GET['member_id']!=""){
$q="SELECT * FROM bs_customer WHERE cus_id='".$_GET['member_id']."' ";
$qr=mysql_query($q,$connection);
if(@mysql_num_rows($qr)>0){
$rs=mysql_fetch_array($qr);
echo "ชื่อ-สกุล : ".$rs['cus_fullname']."</br>";
echo "ที่อยู่ : ".$rs['cus_address']."</br>";
echo "mail : ".$rs['cus_email']."</br>";
echo "ชื่อ : ".$rs['cus_name']."</br>";
echo "Login : ".$rs['cus_login']."</br>";
}
}
?>
|
 |
 |
 |
 |
| Date :
2012-10-25 02:35:50 |
By :
Krungsri |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 03
|
