Ajax无刷新更新子菜单选项

来源:luqidong 发布时间:2013-09-06 21:17:40 点击数:
鼠标移动后,效果图:
78OA办公系统

78OA办公系统页面设计代码【内部引用了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>&nbsp;&nbsp;<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>