zoukankan      html  css  js  c++  java
  • Ajax:创建提示工具

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>自动提示功能</title>
        <script type="text/javascript">
            var xmlHttp;
            var dataDiv;
            var dataTable;
            var dataTableBody;
            var offSetEl;
            function createXMLHttpRequest() {
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTp");
                }
                else if (window.XMLHttpRequest) {
                    xmlHttp = new XMLHttpRequest();
                }
            }
            function initVars() {
                dataTableBody = document.getElementById("courseDataBody");
                dataTable = document.getElementById("courseData");
                dataDiv = document.getElementById("popup");
            }
            function getCourseData(element) {
                initVars();
                createXMLHttpRequest();
                offSetEl = element;
                var url = "WS.asmx/AutoToolTip?key=" + escape(element.id);
                xmlHttp.onreadystatechange = callback;
                xmlHttp.open("GET", url, true);
                xmlHttp.send(null);
    
            }
    
            function callback() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        setData(xmlHttp.responseXML);
                    }
                }
            }
            function setData(courseData) {
                clearData();
                setOffsets();
    
                var length = courseData.getElementsByTagName("length")[0].firstChild.data;
                var par = courseData.getElementsByTagName("par")[0].firstChild.data;
                var row, row2;
                var parData = "Par:" + par;
                var lengthData = "Length:" + length;
    
                row = createRow(parData);
                row2 = createRow(lengthData);
                dataTableBody.appendChild(row);
                dataTableBody.appendChild(row2);
            }
    
            function createRow(data) {
    
                var row, cell, txtNode;
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.setAttribute("bgcolor", "#FFFAFA");
                cell.setAttribute("border", "0");
    
                txtNode = document.createTextNode(data);
                cell.appendChild(txtNode);
                row.appendChild(cell);
    
                return row;
            }
    
            function setOffsets() {
    
                var end = offSetEl.offsetWidth;
                var top = calculateOffsetTop(offSetEl);
                dataDiv.style.border = "black 1px solid";
                dataDiv.style.left = end + 15 + "px";
                dataDiv.style.top = top + "px";
            }
    
            function calculateOffsetTop(field) {
                return calculateOffset(field, "offsetTop");
            }
    
            function calculateOffset(field, attr) {
    
                var offset = 0;
                while (field) {
                    offset += field[attr];
                    field = field.offsetParent;
                }
                return offset;
            }
    
            function clearData() {
                var ind = dataTableBody.childNodes.length;
                for (var i = ind - 1; i >= 0; i--) {
                    dataTableBody.removeChild(dataTableBody.childNodes[i]);
                }
                dataDiv.style.border = "none";
            }
        </script>
    </head>
    <body>
        <h1>
            自动提示</h1>
        <h3>
            课程</h3>
        <table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2">
            <tbody>
                <tr>
                    <td id="1" onmousemove="getCourseData(this);" onmouseout="clearData();">
                        课程1
                    </td>
                </tr>
                <tr>
                    <td id="2" onmousemove="getCourseData(this);" onmouseout="clearData();">
                        课程2
                    </td>
                </tr>
                <tr>
                    <td id="3" onmousemove="getCourseData(this);" onmouseout="clearData();">
                        课程3
                    </td>
                </tr>
                <tr>
                    <td id="4" onmousemove="getCourseData(this);" onmouseout="clearData();">
                        课程4
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="position: absolute;" id="popup">
            <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2">
                <tbody id="courseDataBody">
                </tbody>
            </table>
        </div>
    </body>
    </html>

    后台代码如下:

     public class CourseData
            {
                private int par;
                private int length;
    
                public CourseData(int par, int length)
                {
                    this.par = par;
                    this.length = length;
                }
                public int GetPar()
                {
                    return this.par;
                }
                public int GetLength()
                {
                    return this.length;
                }
            }
    
            public Dictionary<int, CourseData> initData()
            {
                Dictionary<int, CourseData> courseDatas = new Dictionary<int, CourseData>();
                CourseData courseData1 = new CourseData(72, 7290);
                CourseData courseData2 = new CourseData(70, 7214);
                CourseData courseData3 = new CourseData(72, 6566);
                CourseData courseData4 = new CourseData(70, 7392);
                courseDatas[1] = courseData1;
                courseDatas[2] = courseData2;
                courseDatas[3] = courseData3;
                courseDatas[4] = courseData4;
                return courseDatas;
            }
    
            [WebMethod]
            public void AutoToolTip()
            {
                var task = Context.Request.QueryString["key"];
                var key = int.Parse(task);
                CourseData data = initData()[key];
    
    
                Context.Response.ContentType = "text/xml";
                Context.Response.Write("<response>");
                Context.Response.Write("<par>" + data.GetPar() + "</par>");
                Context.Response.Write("<length>" + data.GetLength() + "</length>");
                Context.Response.Write("</response>");
            }

    运行效果如下:

  • 相关阅读:
    面向对象-01
    网络编程-02-客户端搭建
    网络编程-01-服务端搭建
    日志-02
    日志-01
    md5加密
    shell 第五天
    shell第四天
    shell第三天
    shell
  • 原文地址:https://www.cnblogs.com/lufangtao/p/2717389.html
Copyright © 2011-2022 走看看