CocoRoboDesktop/js/UForm/Element.js

//处理元素属性设置。HTML元素大小及定位
Namespace.register("U.UF.EL");

/*
**  作用：获取元素的定位位置
**  @param {element} el 需要获取元素的定位位置的元素
**  @return {array} arr 返回元素的位置的数组
*/
U.UF.EL.getElementPosition = function (el) {
    var _key, //获取元素的class值
        _arr = [0, 0]//获取需要返回的元素的定位位置的top和left值
    while (el && (el = el.offsetParent)) {//循环是否有el这个元素 //如果position的值为static，则获取该元素的父级元素，继续执行获取position的值，进行判断是否元素有定位位置
        _key = U.UF.EL.getStyle(el, "position"); //通过U.UF.EL.getStyle函数，获取元素的position的值
        //判断元素的position的值是什么
        if (_key != "static") {//如果position的值不为static，则执行下面内容
            _arr[0] += el.offsetTop; //获取元素的定位位置的上距
            _arr[1] += el.offsetLeft; //获取元素的定位位置的左距
        }

    }
    return _arr; //如果已经获取了元素的定位位置的上距和左距，就返回一个拥有元素定位位置的数组
}

/**
* 
*
* @param  {element} el 元素
* @param  {string} 获取长或者宽的属性
* @return {number} 返回元素宽度 
*/
U.UF.EL.getElementRealWidth = function (el) {
    var _offset; //存储元素拖动后的offset属性
    //获取元素的当前宽度，并且转化为整型
    _offset = parseInt(Math.min(el.offsetWidth, el.scrollWidth, el.clientWidth));

    //判断是否获取到了宽度属性
    if (_offset <= 0) {
        _offset = parseInt(el.style.height);    //获取元素的样式中的高度并且转化为整型
    }

    //返回元素宽度
    return _offset;
}

/**
* 
*   作用：获取元素的真实高度
*   @param  {element} 需要获取真实高度的元素
*   @param  {string} 获取长或者宽的属性
*   @return {number} 返回元素高度 
*/
U.UF.EL.getElementRealHeight = function (el) {
    var _offset; //存储元素拖动后的offset属性
    //获取元素的当前高度，并且转化为整型
    _offset = parseInt(Math.min(el.offsetHeight, el.scrollHeight, el.clientHeight));
    //判断是否获取到了高度属性
    if (_offset <= 0) {
        _offset = parseInt(el.style.height);    //获取元素的样式中的高度并且转化为整型
    }
    //返回元素高度
    return _offset;
}

/**
* 获取元素的位置大小
*
* @param  {element} el 元素
* @return  {object} 返回元素的位置  函数内有详细的注释
*/
U.UF.EL.getElementInfo = function (el) {
    var _elgetbc = el.getBoundingClientRect(), //获取
        _elp = U.UF.EL.offsetParent(el);

    //    ancestorscrollbartop
    //    ancestorscrollbarleft
    //    scrollheight
    //    scrollwidth
    //    clientheight
    //    clientwidth
    //    clienttop
    //    clientleft
    //    offsetheight
    //    offsetwidth
    //    offsetleft
    //    offsettop
    //    boundingheight
    //    boundingwidth
    //    boundingtop
    //    boundingleft
    //    boundingbottom
    //    boundingright

    return {
        ancestorscrollbartop: (document.documentElement.scrollTop) + _elp.scrollTop, //滚动条top位置
        ancestorscrollbarleft: (document.documentElement.scrollLeft) + _elp.scrollLeft, //滚动条left位置
        SH: el.scrollHeight,  //包含滚动掉的高度
        SW: el.scrollWidth, //包含滚动条的长度
        SL: el.scrollLeft, //滚动条向左的位置
        ST: el.scrollTop, //滚动条向右的位置
        CH: el.clientHeight, //页面不包含 border padding宽度
        CW: el.clientWidth, //页面不包含 border padding长度
        CT: el.clientTop, //页面margin + top的高度
        CL: el.clientLeft, //页面margin + left的长度
        OH: el.offsetHeight, ///页面包含 border padding宽度
        OW: el.offsetWidth,  //页面包含 border padding长度
        OL: el.offsetLeft, //页面left的长度 
        OT: el.offsetTop, //页面top的高度
        BCRH: _elgetbc.bottom - _elgetbc.top, //元素的显示高度
        BCRW: _elgetbc.right - _elgetbc.left, //元素的显示长度
        BCRT: _elgetbc.top, //元素的显示top
        BCRL: _elgetbc.left, //元素的显示left
        BCRB: _elgetbc.bottom, //元素的显示bottom
        BCRR: _elgetbc.right //元素的显示right
    }
}

/*
** 作用：获取元素offsetParent
** @param {element} el1 获取需要开始寻找的元素
** @param {boolean} b 是否要从上级开始找起，true为真，false为假
** @param {string} str 规定的position值
** return {element} el2 返回offsetParent
*/
U.UF.EL.offsetParent = function (el1, b, str) {
    var _str, //存放获取所需要的样式
		_el1 = document.body; //获取body部分的整体元素
    //while循环语句，之所以不用for循环，是因为for循环需要知道循环的次数，而while则用语不知道循环的次数，只要达到条件，就跳出循环
    while (el1 && el1 != _el1) {//循环条件为：是否拥有开始寻找的元素并且开始寻找的元素不超出body部分
        _str = U.UF.EL.getStyle(el1, "position"); //通过U.UF.EL.getStyle()这个函数获取元素所需要的样式
        //判断语句，判断获取的元素样式是否存在，并且样式的key值不为"static"，或者是获取的元素样式是规定的position值
        if ((!str && _str != "static") || (_str == str)) {//如果满足两个条件之一
            break; //则跳出循环
        }
        el1 = el1.offsetParent; //如果不满足，则获取开始传值的元素的父级元素，继续向上一级寻找是否有需要的规定的position值
    }
    return el1; //跳出循环后，则返回offsetParent值
}


/*
**  作用：根据ID获取指定的祖先元素
**  @param {element} el 获取当前的元素
**  @param {string} str 祖先元素的id
** @return {element} 返回祖先元素
*/
U.UF.EL.getAncestor = function (el, str) {
    //循环条件，是否有当前元素，并且，当前元素的id不等于祖先元素的id
    while (el && !(el == str || el.id == str)) {//符合条件
        el = el.parentNode; //获取当前元素的父级元素，并且把当前元素的父级元素赋值为当前元素，并继续循环
    }
    return el; //如果循环出拥有id的祖先元素，则返回祖先元素
}

/*
**  作用：获取不为文字子节点的元素子节点
**  @param {element} el 当前的元素
**  @param {string} str 获取父亲元素的id
**  @return {array} 返回获取所有子节点的数组
*/
U.UF.EL.getChildrenNoText = function (el, str) {
    var i, //用于循环，获取所有子节点
        _arr = []; //用于存放获取到的子节点，并且返回
    for (i = 0; i < el.length; i++) {
        //nodeType属性返回以数字值返回指定集结点的节点类型，如果节点是元素节点，则nodeType属性将返回1
        //判断是否拥有父级元素的id，或者是检索需要的id是否存在
        if (el[i].nodeType == 1 && (!str || str.indexOf(el[i].tagName.toLowerCase()) == -1)) {//如果满足两个条件，则证明是元素子节点
            _arr.push(el[i]); //给获取子节点的数组的末尾添加获取到的元素子节点
        }
    }
    return _arr; //返回数组和数组新的长度
}

/*
**  作用：获取当前元素上级的可编辑的元素
**  @param {element} el 当前元素
*/
U.UF.EL.getAncestorEditElement = function (el) {
    var _el1 = document.body; //获取body部分的元素，不包括body以外的元素
    while (el && _el1 != el) {//while循环语句，条件为拥有当前元素，并且当前元素不超出body部分
        if (el.tagName) {//判断当前元素是否有标签名
            //判断是检索中是否当前元素是否拥有可编辑的元素，大于-1则证明有可编辑的元素 
            //或者判断元素中是否有contentEditable = true，如果有，证明也是可编辑的div元素
            if ("textarea,input".indexOf(el.tagName.toLocaleLowerCase()) > -1 || el.contentEditable == "true") {
                break; //如果符合条件，则结束循环
            }
        }
        el = U.selectEl(el).Parent(); //如果没有标签名或者是没有可编辑的元素，则获取当前元素的父级元素，继续判断
    }
    return el; //如果有可编辑的元素，则返回当前元素
}

/*
**  作用：判断元素是否是上级元素的子元素
**  @param {element} el1 该元素的父级元素
**  @param {element} el2 需要判断的元素
**  @return {boolean} b 获取元素的大小，判断是否是上级元素的子元素
*/
U.UF.EL.isChild = function (el1, el2) {
    //判断是否拥有两个传值，一个是需要判断的元素，一个是该元素的父级元素
    if (el1 && el2) {//如果有需要的元素和父级元素，则进行程序的运行
        //判断是否ie chrome兼容
        if (el1.contains) {//如果兼容
            //判断父级元素是否拥有需要判断的子元素
            if (el1.contains(el2)) {//如果父级元素有需要判断的子元素
                return true; //返回true
            }
        }
        //判断是否为Firefox的兼容
        else if (el1.compareDocumentPosition) {//如果是Firefox的兼容,compareDocumentPosition返回的是一个数值
            //判断el2位于el1的哪个位置，双!!感叹号表示把数据类型转换为bool类型
            if (!(!!(el1.compareDocumentPosition(el2)))) {//如果父级元素有需要判断的子元素
                return true; //返回true
            }
        }
    }
    return false; //返回false
}

/*
**  作用：判断元素位于指定的位置第几个
**  @param {element} el 需要判断位置的当前元素
**  备注，此函数在C.1473.cn,d.1473.cn中被采用，但代码不一样。
*/
U.UF.EL.indexOfParent = function (el) {
    var _el = U.selectEl(el).Parent(); //获取当前元素的父级元素
    var _el2 = U.selectEl(_el).Child(); //获取当前元素的父级元素的所有的子元素
    return _el2.indexOf(el); //通过indexOf检索元素在指定元素的第几个位置
}

/*
**  作用：判断元素的属性是自定义属性还是系统属性，true是自定义属性，false是系统属性
**  @param {element} el 当前需要判断的元素
**  @param {string} str 判断元素的属性
**  @return {number} 位置
*/
U.UF.EL.isCustomAttributes = function (el, str) {
    el = el || $$("div"); //获取当前需要判断的元素
    var _att = el.attributes; //获取当前元素的属性集合
    //判断当前元素是否拥有属性
    if (_att) {//如果当前元素拥有属性
        //判断当前元素的属性集合是否有需要判断的元素属性，这是IE6-7的兼容
        if (_att[str]) {//如果有需要判断的元素属性
            return _att[str].expando == true; //则判断的元素属性是自定义属性
        } else {//是否为自定义属性
            //返回元素的属性的类型和值都不为空或者当前元素的指定元素为undefined
            return el.getAttribute(str) !== null || el[str] === void 0;
        }
    }
}

/*
**  作用：添加自定义属性
**  @param {array} el 获取元素
**  @param {element} name 属性的名称
**  @param {element} value 属性的值
**  实例    <div id="box" pid = "2", style="width:100px;height:100px;">
123
</div>
var box = U.selectEl("#box")[0];
box.onclick = function(){
U.UF.EL.addAttributes(box,{"pname":"pvalue","pname1":"pvalue1","pname2":"pvalue1"});//添加自定义属性
U.UF.EL.delAttributes(box,"pname");//删除自定义属性 
*/
U.UF.EL.addAttributes = function (el, name, value) {
    // 如果传入的参数为name, value 
    el.setAttribute(name, value) // 设置元素的自定义属性
}
/*
**  作用：删除自定义属性
**  @param {array} el 获取元素
**  @param {element} name 属性的名称
*/
U.UF.EL.delAttributes = function (el, name) {
    // 判断属性是否具有传入的属性名
    if (el.hasAttribute(name)) {
        el.removeAttribute(name)// 删除该属性
    }
}

/*
** 作用：获取元素所需要的样式
** @param {element} el 需要获取样式的元素
** @param {string} str 获取样式的属性值，如position：absolute，则传positon或者absolute
*/
U.UF.EL.getStyle = function (el, str) {
    //判断是否拥有需要获取样式的元素，并且，该元素有style样式
    if (el && el.style) {//如果满足两个两件，则进行下一步程序执行
        var _str = U.UF.EL.styleConversion(str); //style样式转换 如 text-align => textAlign 或者相反的换
        //判断元素是否需要的样式，并且获取的样式组为cssText
        if (el.style[_str] || _str == "cssText") {//如果同时满足两个条件
            return el.style[_str]; //返回获取需要的元素
        } else {
            //判断是否有需要的样式
            if (el.currentStyle) {//如果有
                return el.currentStyle[_str]; //返回样式值
            } else {//如果没有
                return ""; //获取js对应的的style值
            }
        }
        return ""; //获取js对应的的style值
    }
}
/*
**作用：用于指定的元素进行删除指定的class，如果class存在，那么class就删除，如果class不存则不处理
**参数一：el进行操作的对象
**参数二：str获取className的字符
*/
U.UF.EL.addClass = function (el, str) {
    var _Reg = el.className.match(new RegExp("(\\s|^)" + str + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格
    var _b = !!(_Reg);  //两个感叹号为转换为布尔值 以方便做判断
    if (!_b) {//判断元素存在指定的class
        el.className += " " + str; //给指定的元素添加指定的class
    }
}

/*
**作用：用于指定的元素进行删除指定的class，如果class存在，那么class就删除，如果class不存则不处理
**参数一：el1进行操作的对象
**参数二：el2获取className的字符
*/
U.UF.EL.removeClass = function (el, str) {
    var _Reg = el.className.match(new RegExp("(\\s|^)" + str + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格
    var _b = !!(_Reg);  //两个感叹号为转换为布尔值 以方便做判断
    if (_b) {//判断元素存在指定的class
        el.className = el.className.replace(new RegExp("(\\s|^)" + str + "(\\s|$)"), " ").trim(); // replace方法是替换
    }
}

/*
** 作用：用于判断是否有存在的class，如果有，则返回true，如果没有，则返回false
** @param {element} el
** @param {string} str
*/
U.UF.EL.isHasClass = function (el, str) {
    //判断是否存在指定的classname，如果指定的classname没有出现，则该方法返回 -1。
    if ((el.className).indexOf(str) > -1) {//如果出现了classname，则会出现比-1大的值
        return true; //则返回true
    }
    return false;
}

/*
** 作用：style样式转换 如 text-align => textAlign 或者相反的换
** @param {element} el 进行操作的对象
** @param {string} str 确定循环的范围
*/
U.UF.EL.styleConversion = function (el, str) {
    if (str) {//判断是否有确定循环的范围
        str = [/[A-Z]/g, "-", 0, "toLowerCase"]; //转换的样式或者属性,如textAlign => text-align
    }
    else {//否则的话就进行下面的语句
        str = [/-[a-z ]/g, "", 1, "toUpperCase"]; //转换的样式或者属性,如 text-align => textAlign
    }
    return el.replace(str[0], function (el2) {//利用正则表达式进行转换
        return str[1] + el2.charAt(str[2])[str[3]](); //利用charAt方法返回指定位置的字符
    });
}

/*
**作用：在指定的元素区域通过鼠标进行点击或者是鼠标的其他事件，这个时候我们就需要获取这个鼠标的位置在指定元素的相对位置。
**参数一：el 需要相对位置的元素
*/
U.UF.EL.getMousePosition = function (el) {
    var _eltop = 0, _elleft = 0,
        _mouseevent = event || window.event; //获取事件源
    //如果是手机点击则获取touches[0]对象
    if (_mouseevent.touches && _mouseevent.touches[0]) {
        _mouseevent = _mouseevent.touches[0]; //如果是手机则获取touches[0]对象
    }
    //如果是pc则获取事件源
    else {
        _mouseevent = _mouseevent; //如果是pc则获取事件源
    }
    //获取鼠标的坐标对象
    var _mousex = _mouseevent.clientX || 0, //获取鼠标的X坐标或者是手机点击的X坐标
	_mousey = _mouseevent.clientY || 0; //获取鼠标的Y坐标或者是手机点击的Y坐标
    //循环的找位置
    while (el) {
        _elleft += el.offsetLeft;
        _eltop += el.offsetTop;
        el = el.offsetParent;
    }
    //计算点击的相对位置
    _elx = _mousex - _elleft, //获取鼠标点击的相对位置X坐标
	_ely = _mousey - _eltop; //获取鼠标点击的相对位置的Y坐标
    return { x: _elx, y: _ely}//返回鼠标的相对位置X和Y坐标
}

/*
** 右键菜单处理
** @param {array} 菜单数组 {"name":"","onclick":function(){}} 
** @param {string} 定位到哪个元素
*/
U.UF.EL.rightMenu = function (arr, el, e) {
    var i, _menu;
    if ($("#U_UF_EL_rightmenu")[0]) {
        U.selectEl("#U_UF_EL_rightmenu")[0].remove();
    }
    _menu = $$("div", { "style": { "position": "fixed", "width": "150px", "border": "1px solid #e4e4e4", "backgroundColor": "White", "left": "100px", "display": "none", "z-index": "999" }, "id": "U_UF_EL_rightmenu" }, U.selectEl(el)[0]);
    for (i = 0; i < arr.length; i++) {
        var _div = $$('div', { "style": { "height": "25px", "lineHeight": "25px", "textAlign": "center", "width": "100%", "cursor": "pointer", "padding": "5px 0", "border-bottom": "1px solid rgb(228,228,228)" }, "className": "rightlist" }, _menu);
        U.selectEl(_div).addAttrArray(arr[i]);
    }
    U.selectEl(_menu)[0].style.display = "block";
    U.UF.C.rightClickMenuLocation($(_menu)[0]);
    e = e || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //分别兼容ie和chrome
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || (e.clientX + scrollX); //兼容火狐和其他浏览器
    var y = e.pageY || (e.clientY + scrollY);
    var _top = _menu.offsetHeight;
    var _left = _menu.offsetWidth;
    if (_top > y) {
        _menu.style.top = y + "px";
    }
    if (_left > x) {
        _menu.style.left = x + "px";
    }
    U.selectEl(_menu).bind('contextmenu', function (e) {
        U.UF.EV.stopBubble(e);                                    //阻止冒泡
    });
}
;