Ajax无刷新更新子菜单选项
来源：luqidong
发布时间：2013-09-06 21:17:40
点击数：
鼠标移动后，效果图：
页面设计代码【内部引用了1.4版本的JQ】<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menuTest.aspx.cs" Inherits="WebApplication1.menuTest" %><!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 runat="server">
<title>支持Ajax无刷新更新子菜单选项DEMO</title>
<style type="text/css">
* { margin: 0px; padding: 0px; }
ul li { font-family: '微软雅黑'; list-style-type: none; font-size: 14px; float: left; background-color: #ccc; border: solid 1px black; margin-left: -1px; cursor: pointer; width: 80px; text-align: center; height: 30px; line-height: 30px; }
</style>
<script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
/*发送Ajax请求.*/
function sendRequest(str)
{
var xmlHttp = new XMLHttpRequest();
str = escape(str);
xmlHttp.open("get", "e.ashx?name=" + str);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4) {
//从Ajax的返回信息中,更新子菜单选项.
$("#dvInfo").html(xmlHttp.responseText);
}
}
xmlHttp.send(null);
}
var flag = false; /*全局flag,标识鼠标离开后,隐藏子菜单选项.*/
$(function()
{
$("li").mouseover(function()
{
flag = true;
$(this).css("background-color", "red").siblings().css("background-color", "");
var offsetLeftPix = this.offsetLeft;
document.getElementById("dvInfo").style.left = offsetLeftPix + 'px';
$("#dvInfo").show();
var text = $(this).text();
sendRequest(text);
//$("#dvInfo").html("<a href='#'>" + $(this).text() + "</a> <a href='a.aspx'>For Test</a>'");
});
/**/
$("#dvInfo").mouseover(function()
{
flag = true;
}).mouseleave(function() /*这个地方不能替换为mouseout事件,觉得leave和out在文字上描述差别不大,具体使用时,还是有区别的.*/
{
flag = false;
});
$("#dvMenu").mouseout(function()
{
if (flag == false) {
$("#dvInfo").get(0).style.display = 'none';
$("li").css("background-color", "");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dvMenu">
<ul>
<li>资讯动态</li>
<li>产品动态</li>
<li>市场营销</li>
<li>客服中心</li>
<li>人力资源</li>
<li>交流专区</li>
</ul>
<div id="dvInfo" style="position: absolute; top: 30px; display: none; border: solid 1px black;
height: 30px; line-height: 30px; text-align: center; width: 260px; font-family: '微软雅黑';
font-size: 14px;">
</div>
</div>
</div>
</form>
</body>
</html>