鼠标移动到热点上,显示详细信息
1.userController文件
public functionshowDetailAction(){
$userModel=new userModel("localhost","liuyanban","root","123");
$rows = $userModel->searchAll();
$this->smarty->assign('list',$rows);
$this ->smarty->display("showDetail.tpl");
}
public function processAction(){
$user_id =$_REQUEST['user_id'];
$userModel=new userModel("localhost","liuyanban","root","123");
$row = $userModel->getOne($user_id);
echo json_encode($row);
}
2.userModel文件
public function search($username){
$sql="select username from user where username='".$username."'";
//var_dump($sql);
$result =mysql_query($sql);
$row =mysql_fetch_assoc($result);
return $row;
}
public function searchAll(){
$sql="select * from user";
$result =mysql_query($sql);
$rows = array();
while($row =mysql_fetch_assoc($result)){
$rows[] =$row;
}
3.showDetail文件
<table align="center">
<tr>
<th>显示详细信息</th>
</tr>
<{foreach from=$list item="value"}>
<tr style="background-color:#F9F">
<tdid="name_<{$value.user_id}>"><{$value.user_id}></td>
<tdonMouseOver="showDetai(<{$value.user_id}>)"
οnmοuseοut="hideDetail(<{$value.user_id}>)">
<{$value.username}></td>
</tr>
<{/foreach}>
</table>
<script>
functionshowDetai(user_id){
var xhr;
if(window.ActiveXobject){
xhr = newActiveXobject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xhr =new XMLHttpRequest();
}
xhr.open("POST","index.php?c=user&a=process",true);
xhr.onreadystatechange=callback;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('user_id='+user_id);
function callback(){
if(xhr.readyState==4){
if(xhr.status==200){
var json = eval('('+xhr.responseText+')');
var new_div =document.createElement('div');
new_div.style.backgroundColor="#ccc";
new_div.style.position="absolute";
new_div.id="new_div"+user_id;
new_div.style.marginLeft='170px';
new_div.innerHTML="id:"+json.user_id+"<br/>username:"+json.username+"<br/>loginime:"+json.loginime;
document.getElementById('name_'+user_id).appendChild(new_div)
}
}
}
}
function hideDetail(user_id){
var new_div =document.getElementById("new_div"+user_id);
document.getElementById("name_"+user_id).removeChild(new_div);
}
</script>