`

ajax|消息提示框|js获取html绝对位置 封装

阅读更多


         function Ajax(){
   
             //    doc.innerHTML='<span><img src="image/load.gif"/>Loading...</span>';
            ////创造对象
            var xmlhttp;
            try
            {
                if (window.ActiveXObject){
                    /* 不要删除以下注释,这部分不是注释 */
                    /*@cc_on @*/
                    /*@if (@_jscript_version >= 5)
                    try {
                      xmlhttp = new ActiveXObject("Msxml2.xmlhttp");
                    } catch (e) {
                      try {
                        xmlhttp = new ActiveXObject("Microsoft.xmlhttp");
                      } catch (e) {
                        xmlhttp = false;
                      }
                    }
                    @end @*/
                }else{
                    xmlhttp=new XMLHttpRequest();
                }
                if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
                  xmlhttp = new XMLHttpRequest();
                }
            }
            catch(e)
            {
            alert(e.message);
            }
            //alert(xmlhttp);
            if(!xmlhttp)
            {
            alert("你的浏览器不支持xmlhttp对象,所以一些功能无法使用,建议使用高版本的浏览器!!");
            return;
            }

//    
            ///函数主题
                this.getData=function(url,data,dodata)
                {
                    var verbs =data;
                   // alert(data);
                    xmlhttp.open("POST", url,true);

                        xmlhttp.onreadystatechange=function(){
                            if (xmlhttp.readyState==4){
                                dodata(xmlhttp);                 
                            }
                        }
                    xmlhttp.setRequestHeader("Content-Length",verbs.length);
                    xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
                    xmlhttp.send(verbs);
                }
                /////
                this.getUrlData=function(url,data,dodata)
                {
                    xmlhttp.open("GET",url,true);

                    xmlhttp.onreadystatechange = function() {

                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      dodata(xmlhttp);
                     Status.setStatusShow(false);
                    }
                    else
                    {
                      Status.showInfo("加载中...");
                    }
                 
                    }
                     xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
                    xmlhttp.send(null);
                }
                this.getFormData=function(demo)
                {
                alert(demo);
                }
            ///函数主题
}
/**
 * @author zxub 2006-06-01
 * 状态信息显示类,用var Status=new function()定义,可以静态引用其中的方法
 * 一般情况下为function Status(),这样不能静态引用其中的方法,需要通过对象来引用
 */
var Status=new function()
{
    this.statusDiv=null;
   
    /**
     * 初始化状态显示层
     */
 this.init=function()
 {
     if (this.statusDiv!=null)
     {
         return;
     }
  var body = document.getElementsByTagName("body")[0];
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.top = "50%";
  div.style.left = "50%";
  div.style.width = "280px";
  div.style.margin = "-50px 0 0 -100px";  
  div.style.padding = "15px";
  div.style.backgroundColor = "#353555";
  div.style.border = "1px solid #CFCFFF";
  div.style.color = "#CFCFFF";
  div.style.fontSize = "14px";
  div.style.textAlign = "center";
  div.id = "idstatus";
  body.appendChild(div);
  div.style.display="none";
  this.statusDiv=document.getElementById("idstatus");
 }
 
 /**
  * 设置状态信息
  * @param _message:要显示的信息
  */ 
 this.showInfo=function(_message)
 {  
     if (this.statusDiv==null)
     {
         this.init();
     } 
     this.setStatusShow(true);
     this.statusDiv.innerHTML = _message;    
 }
 
 /**
  * 设置状态层是否显示
  * @param _show:boolean值,true为显示,false为不显示
  */
 this.setStatusShow=function(_show)
 {  
     if (this.statusDiv==null)
     {
         this.init();
     }
     if (_show)
     {
         this.statusDiv.style.display="";
     }
     else
     {
         this.statusDiv.innerHTML="";
         this.statusDiv.style.display="none";
     }
 }
}
function GetPosition(element) {
    var result = new Object();
    result.x = 0;
    result.y = 0;
    result.width = 0;
    result.height = 0;
    if (element.offsetParent) {
        result.x = element.offsetLeft;
        result.y = element.offsetTop;
        var parent = element.offsetParent;
        while (parent) {
            result.x += parent.offsetLeft;
            result.y += parent.offsetTop;
            var parentTagName = parent.tagName.toLowerCase();
            if (parentTagName != "table" &&
                parentTagName != "body" &&
                parentTagName != "html" &&
                parentTagName != "div" &&
                parent.clientTop &&
                parent.clientLeft) {
                result.x += parent.clientLeft;
                result.y += parent.clientTop;
            }
            parent = parent.offsetParent;
        }
    }
    else if (element.left && element.top) {
        result.x = element.left;
        result.y = element.top;
    }
    else {
        if (element.x) {
            result.x = element.x;
        }
        if (element.y) {
            result.y = element.y;
        }
    }
    if (element.offsetWidth && element.offsetHeight) {
        result.width = element.offsetWidth;
        result.height = element.offsetHeight;
    }
    else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
        result.width = element.style.pixelWidth;
        result.height = element.style.pixelHeight;
    }
    return result;
}

分享到:
评论

相关推荐

    javascript 消息提示封装文件

    本文将深入探讨“javascript 消息提示封装文件”,了解如何通过前端技术来实现高效、可复用的消息提醒功能。 首先,我们要明白什么是消息提示封装。在JavaScript中,封装意味着将特定的功能或行为打包到一个独立的...

    Tmsgbox 基于bootstrap的消息提示框组件封装 模态框组件封装

    - **可配置性**:允许调整提示框的大小、位置、动画效果、关闭按钮等属性,以符合项目需求。 - **事件支持**:提供了丰富的事件接口,如打开、关闭、确认等,方便与其他功能进行交互。 ### 3. 使用Tmsgbox 使用...

    弹出消息提示框并动态读取提示数据信息

    3. **自定义消息组件**:创建一个自定义的JS函数或者类,封装消息提示框的创建、显示和关闭逻辑。这个组件可以包含多个状态(如成功、警告、错误),以及各种配置选项(如标题、图标、按钮等)。 4. **事件监听**:...

    页面右下角弹出消息提示框类似QQ或者MSN+ASP.NET

    - 数据传递:如果消息提示框的内容需要从服务器获取,可以通过ASP.NET的WebMethod或API接口实现。使用Ajax调用这些方法,将返回的数据动态填充到前端的提示框中。 - 异步更新:使用`PageMethods`(ASP.NET WebForm...

    ajax模拟百度自动下拉提示框

    在这个项目中,JavaScript负责处理用户输入事件,调用Ajax函数发送请求,解析服务器返回的数据,并动态更新DOM结构,显示下拉提示框。 **实现流程** 1. 用户在搜索框输入文字。 2. JavaScript监听键盘事件,当用户...

    Ajax+servlet实现搜索框智能提示

    在这个"Ajax+servlet实现搜索框智能提示"的主题中,我们将探讨如何利用Ajax技术和Servlet来创建一个实时、动态的搜索框,提供智能的用户输入建议。 首先,让我们了解Ajax的基本原理。Ajax的核心是XMLHttpRequest...

    jQuery支持自定义消息提示框代码.zip

    在实际应用中,自定义消息提示框的代码通常会封装成一个可复用的插件或者函数,方便在多个地方调用。开发者可以通过配置参数来改变提示框的样式、位置、动画效果等,实现高度定制化的用户体验。 总的来说,这个...

    仿google提示框 下拉提示框

    "仿Google提示框"和"下拉提示框"就是一种常见的UI设计元素,广泛应用于搜索引擎、输入法和其他需要提供智能建议的应用场景。这些提示框的设计灵感通常来源于Google的搜索框,它能在用户输入时提供即时的下拉建议,...

    Servlet+Ajax实现搜索框智能提示

    6. **前端处理响应**:在JavaScript中,监听Ajax请求的完成事件,获取响应数据,然后动态更新DOM,显示搜索提示。 7. **优化用户体验**:可以添加一些额外的优化,如防止重复请求、设置请求间隔、错误处理等,以...

    Ajax登陆验证有助于更好的封装

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的优点在于,用户可以一边浏览页面内容...

    ajax新消息无刷新提醒.rar(vb.net)

    前端通常会有一个JavaScript事件监听器,监控Ajax请求的结果,当接收到新消息时,会在页面的特定区域(如右上角的通知栏)动态添加提示信息,或者通过其他视觉效果吸引用户的注意力,如闪烁、弹出气泡等。...

    Ajax+servlet实现搜索提示列表效果

    4. **搜索提示框实现**: - 使用HTML和CSS创建一个动态显示的提示列表,初始时隐藏,当有Ajax请求返回时显示。 - 通过JavaScript动态添加列表项,每个项显示一个搜索建议,可以包括匹配的关键词及其相关上下文。 ...

    ajax实现搜索提示功能

    在网页开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现动态、无刷新的交互体验,其中一个常见的应用场景就是搜索提示功能。该功能能够显著提升用户体验,当用户在搜索框输入关键词时,系统...

    asp.net封装的消息框

    "asp.net封装的消息框"是一个非常实用的工具,它将这些常见的前端交互功能进行了集中处理和封装,方便开发者快速调用,提高了开发效率。 首先,消息框在Web应用中主要用于向用户显示警告、确认或信息。传统的ASP...

    ASP.NET Ajax框架与组件

    为了解决这些问题,Ajax(Asynchronous JavaScript and XML)技术应运而生,它允许在不重新加载整个页面的情况下更新部分网页内容,极大地提升了用户体验。 然而,Ajax技术本身涉及到的技术复杂度较高,包括...

    jquery alert 提示框、动态加载提示框、jquery插件

    使用jQuery,我们可以方便地监听事件,利用AJAX的success或error回调来控制提示框的显示与隐藏。 三、jQuery插件 jQuery插件是开发者为扩展jQuery功能而编写的代码,它们遵循特定的结构,通常包括一个函数,该函数...

    js 手动封装的各种效果

    "js 手动封装的各种效果"这个主题涵盖了如何使用纯JavaScript编写各种功能模块,这些模块可以被重复利用,而不需要依赖额外的库或框架。让我们深入探讨一下其中可能包含的知识点: 1. **函数封装**:在JavaScript中...

    ajax搜索提示PHP

    在IT行业中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于网页交互,特别是在实现动态搜索提示功能时。这个“ajax搜索提示PHP”项目显然旨在创建一个类似Google或迅雷的实时搜索建议系统,用户在输入...

Global site tag (gtag.js) - Google Analytics