/**
* 浏览器动态化效果及事件类
*
*
* @author xiongbing
* @date 2013-12-18
* @version 1.0
*
*/
//-----------------------------------------------------------------------------
/*判断浏览器*/
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1;
var $J = jQuery.noConflict();
//-----------------------------------------------------------------------------
$J(function() {
/**
* 网站页面对象
*
* @class Page
* @constructor
* @param {DOMDocument}document
*/
var Page = function(elem) {
/**
* 当前对象
*
* @property elem
* @private
*/
this.elem = elem;
this.common=Page.common;
};
Page.common = {
/**
* 去除字符串头尾空白字符
*
* @method trim
* @static
* @param {String}str
* @return {String}
*/
trim : function(str) {
return str.replace(/^\s*/, "").replace(/\s*$/, "");
},
isFunction : function(obj) {
return Object.prototype.toString.call(obj) === "[object Function]";
},
/**
* 获取一个元素相对于页面左上角的位置
* @param elem
* @return object {x:, y: }
*/
findPos : function(elem) {
var offset = {
x:0,
y:0
};
if (!!document.documentElement.getBoundingClientRect()) {//支持此方法的浏览器可以直接获取位置
offset.x = elem.getBoundingClientRect().left + this.scroll().left;
offset.y = elem.getBoundingClientRect().top + this.scroll().top;
} else {
while (elem) {
offset.x += elem.offsetLeft;
offset.y += elem.offsetTop;
elem = elem.offsetParent;
}
}
return offset;
},
/**
* 返回数组或对象中第一个值为 val 对象的 index 或 key
* @param obj 对象或数组
* @param val 待检测值
*/
indexOf : function indexOf(obj, val) {
if (obj.indexOf) {
return obj.indexOf(val);
} else {
var result = -1;
this.each(obj, function(idx) {
if (this[idx] === val) {
result = idx;
return false;
}
});
return result;
}
},
each : function (object, callback, context) {
if (object === undefined || object === null) {
return;
}
if (object.length === undefined || this.isFunction(object)) {
for (var name in object) {
if (object.hasOwnProperty(name)) { //只有此元素本身属性调用回调
if (callback.call(context || object[name], name, object[name]) === false) {
break;
}
}
}
} else {
for (var i = 0; i < object.length; i++) {
if (callback.call(context || object, i, object[i]) === false) {
break;
}
}
}
return object;
},
/**
* 设置或获取元素样式
*
* @method css
* @static
* @param {Object}elem
* @param {Object}styles
* @return {Object}
*/
css : function() {
/**
* 获取一个元素的样式
* @param elem
* @param styleName
*/
var getStyle = function(elem, styleName) {
var value = '';
if (styleName == 'float') {
document.defaultView ? styleName = 'float'/*cssFloat*/ : styleName = 'styleFloat';
}
if (elem.style[styleName]) {//内联样式
value = elem.style[styleName];
} else if (elem.currentStyle) {//IE
value = elem.currentStyle[styleName];
} else if (document.defaultView && document.defaultView.getComputedStyle) {//W3 DOM
styleName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem, '');
value = s && s.getPropertyValue(styleName);
} else { //other,for example, Safari
value = null;
}
//处理width 和 height 出现 auto 或是百分比宽度 的情况
if ((value == "auto" || value.indexOf('%') !== -1) && ('width' === styleName.toLowerCase() || 'height' === styleName.toLowerCase()) && elem.style.display != "none" && value.indexOf('%') !== -1) {
value = elem["offset" + styleName.charAt(0).toUpperCase() + styleName.substring(1).toLowerCase()] + "px";
}
if (styleName == "opacity") {
try {
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
value = value / 100;
} catch(e) {
try {
value = elem.filters('alpha').opacity;
} catch(err) {
}
}
}
return value;
};
return function(elem, styles) {
if (typeof styles === 'string') {
return getStyle(elem, styles);
} else {
this.each(styles, function(key, value) {
elem.style[key] = value;
});
}
};
}(),
scroll:function() {
return {
left : document.documentElement.scrollLeft + document.body.scrollLeft,
top : document.documentElement.scrollTop + document.body.scrollTop
}
}
};
Page.prototype={
/**
*判断是否存在额外的标识
*优先级为id/class/tagname依次下降
*①如果id存在并可以确定唯一arr[0]='{id}'，否则arr[0]='false'
*②如果①不成立，class存在并可以确定唯一arr[1]='{class}'，否则arr[1]='false'
*③如果②不成立，arr[2]='{tagname[index]}'
*
*@param ele 传入节点对象
*@return arr[] 返回数组
*/
'getMark':function (ele){
var html = $J(ele).html();
var arr = ['false','false','false'];
var isBreak=false;
//查看是否存在id，并判断是否可以唯一定位
if(!isBreak){
var id=$J(ele).attr("id");
if(id!=null&&id!=''&&id!=undefined){
if(html==$J('#'+id).html()){
arr[0]='#'+id;
isBreak=true;
}
}
}
//查看是否存在class，并判断是否可以唯一定位
if(!isBreak){
var css=$J(ele).attr("class");
if(css!=null&&css!=''&&css!=undefined&&css.indexOf(' ')==-1){
if(html==$J('.'+css).html()){
arr[1]='.'+css;
isBreak=true;
}
}
}
//前两个条件都不符合则返回该元素标签及所在节点级别中的索引
if(!isBreak){
var tagName=ele.tagName;
var curObj = $J(ele);
var preObj = curObj.prevAll();
var curIndex = preObj.filter(tagName).length;
var prevIndex=0;
var domIndex=0;
preObj.each(function(){
prevIndex=prevIndex+$J(this).find(tagName).length;
});
domIndex=curIndex +prevIndex;
arr[2]=tagName.toLowerCase()+':eq('+domIndex+')';
}
return arr;
},
/**
*获取选定对象所在dom中的符合jquery选择器的路径
*
*@param ele 传入节点对象
*@param nodepath 节点路径，初始为''
*@return str 返回节点路径
*/
'getPath':function (ele,nodepath){
var tagName = ele.tagName;
if(tagName!=undefined&&tagName.toLowerCase!='html'&&tagName.toLowerCase!='body'){
var arr = this.getMark(ele);
var mark = false;
var currnpath='';
var id=arr[0];
var css=arr[1];
var tName=arr[2];
if(id!='false'){
currnpath=id;
mark=true;
}
if(!mark&&css!='false'){
currnpath=css;
mark=true;
}
if(!mark){
currnpath=tName;
}
nodepath = currnpath+' '+nodepath;
if(!mark){
var pars = $J(ele).parent();
nodepath=this.getPath(pars[0],nodepath);
}else{
return nodepath;
}
}
return nodepath;
},
/**
*获取选定对象所在dom中的上下节点路径
*
*@param ele 传入节点对象
*@return str 返回本节点为中心的上下路径
*/
'relation':function (ele){
var nodepath='';
var currTagName = ele.tagName.toLowerCase();
var parsTag = $J(ele).parent();
var childTag = $J(ele).children();
if(parsTag!=null&&parsTag!=undefined&&parsTag.length>0){
var qppath = this.getPath(parsTag[0],'');
//nodepath = ""+parsTag[0].tagName.toLowerCase() + ".";
nodepath = ""+parsTag[0].tagName.toLowerCase() + ".";
}
var qcpath = this.getPath(ele,'');
nodepath = nodepath + "" + currTagName + "";
//nodepath = nodepath + "" + currTagName + "";
if(childTag!=null&&childTag!=undefined&&childTag.length>0){
var qcnpath = this.getPath(childTag[0],'');
//nodepath = nodepath + "." + childTag[0].tagName.toLowerCase() + "";
nodepath = nodepath + "." + childTag[0].tagName.toLowerCase() + "";
}
return nodepath;
},
'resize':function(ele) {
$J(ele).trigger("mouseover");
},
'creatDiv' : function(id,width,height,left,top,html,cssText){
var curr = this;
menuobj=this.elem;
var div = document.createElement('div');
div.id = id;
if(!cssText){
var cssText = 'position:absolute;filter:alpha(opacity=90);background-color:#ffce73;opacity:0.9;z-index:100;text-align:center; font-weight:bold;line-height:18px;font-size:16px;';
}
cssText += 'height:'+height+'px;';
cssText += 'width:'+width+'px;';
cssText += 'left:'+left+'px;';
cssText += 'top:'+top+'px;';
div.style.cssText = cssText;
div.innerHTML=html;
/*if(html==''){
//添加双击事件及右键菜单
$J(div).dblclick(function(event){dbclick(curr.elem,event);});
$J(div).contextMenu(menu1,{theme:'vista'});
}*/
return div;
},
'removeDiv': function (id){
var div = document.getElementById(id);
if(div){
document.body.removeChild(div);
}
},
'removeClipDiv':function(){
for (var i = 0 ; i < 5 ; i++){
this.removeDiv('yShade' + i);
}
this.shadeStatu = false;
},
'createClipDiv':function(color){
if(this){
var main = this;
//对象的左上角坐标
var y = Math.abs(main.common.findPos(main.elem).y);
var x = Math.abs(main.common.findPos(main.elem).x);
//对象的宽高
var mwidth = main.elem.scrollWidth;
var mheight = main.elem.scrollHeight;
//当前电脑页面宽高
var dwidth = document.documentElement.scrollWidth;
var dheight = document.documentElement.scrollHeight;
this.removeClipDiv();
var shadeArr = [];
//body不100%框的布尔状态
var isFullWidth = (document.body.scrollWidth == document.body.offsetWidth);
/*
var blueText = 'position:absolute;border:5px solid rgb(0, 154, 226);border:5px solid rgba(0, 154, 226,1.0);-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;z-index:100;';
var redText = 'position:absolute;border:5px solid rgb(208, 28, 29);border:5px solid rgba(208, 28, 29,1.0);-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;z-index:100;';
*/
var blueText = 'position:absolute; background-color:rgb(89, 207, 248); background-color:rgba(89, 207, 248,0.7);z-index:100;font-size:5px;';
var redText = 'position:absolute;background-color:rgb(252, 113, 123);background-color:rgba(252, 113, 123,0.7);z-index:100;font-size:5px;';
var cssText = blueText;
if(color=='red'){
cssText = redText;
}
var _leftTemp = (document.body.offsetWidth - document.documentElement.scrollWidth)/2 ;
//var html=main.elem.tagName;
//var html=this.getPath(main.elem,'');//alert(html);
var html=this.relation(main.elem);
var xTips=x-5;
var yTips=y-21;
if(y==0){
yTips=y+mheight+5;
}
shadeArr[0] = this.creatDiv('yShade0',mwidth+10,16,xTips,yTips,html);
//shadeArr[1] = this.creatDiv('yShade1',mwidth,mheight,x-5+_leftTemp,y-5,'',cssText);
shadeArr[1] = this.creatDiv('yShade1',mwidth+10,5,x-5,y-5,'',cssText);
shadeArr[2] = this.creatDiv('yShade2',mwidth+10,5,x-5,y+mheight,'',cssText);
shadeArr[3] = this.creatDiv('yShade3',5,mheight,x-5,y,'',cssText);
shadeArr[4] = this.creatDiv('yShade4',5,mheight,mwidth+x,y,'',cssText);
for (var i = 0,count = shadeArr.length ; i < count ; i++){
document.body.appendChild(shadeArr[i]);
}
}
this.shadeStatu = true;
}
};
//-----------------------------------------------------------------------------
/*节点路径中的单击事件*/
function resize(nodepath) {
$J(nodepath).trigger("mouseover");
}
//-----------------------------------------------------------------------------
/*双击事件*/
function dbclick(nodepath){
var elem = $J(nodepath)[0];
var tagName = elem.tagName;
var objid = $J(elem).attr("objid");
if(objid!=undefined){
var tagType = "span";
if(tagName.toLowerCase() == "span"){
tagType = "span";
}else if(tagName.toLowerCase() == "a"){
tagType = "alink";
}else if(tagName.toLowerCase() == "table" || tagName.toLowerCase() == "div" || tagName.toLowerCase() == "ul" || tagName.toLowerCase() == "dl" ){
tagType = "list";
}else if(tagName.toLowerCase() == "img"){
tagType = "pic&w="+this.width+"&h="+this.height;
}else{
return false;
}
window.parent.showDialog('p_setproperty','选择标签',"setparam/p_setproperty.jsp?objid="+objid+"&type="+tagType,902,565);
//openFile1("setparam/p_setproperty.jsp?objid="+objid+"&type="+tagType,"615","1002");
}
//event.stopPropagation();
}
//-----------------------------------------------------------------------------
function bindClick(){
//定义setTimeout执行方法
var TimeFn = null;
$J("[n]").click(function () {
var n='';
n = $J(this).attr("n");
// 取消上次延时未执行的方法
clearTimeout(TimeFn);
//执行延时
TimeFn = setTimeout(function(){
//do function在此处写单击事件要执行的代码
resize(n);
},300);
});
$J("[n]").dblclick(function () {
// 取消上次延时未执行的方法
clearTimeout(TimeFn);
//双击事件的执行代码
dbclick($J(this).attr("n"));
});
}
//-----------------------------------------------------------------------------
/*取消A链接*/
$J("a").click(function() {
return false;
});
//-----------------------------------------------------------------------------
/*鼠标悬停区域效果*/
//$J("table").add("div").add("ul").add("span").add("a").add("font").add("img").bind("mouseover",function(event){
$J("table").add("div").add("span").add("font").add("a").add("dd").add("dt").add("img").bind("mouseover",function(event){
event.stopPropagation();
var obj = this;
var tagName = this.tagName;
var objid = $J(this).attr("objid");
if($J(obj).attr("cmstag") && $J(obj).attr("cmstag")!=""){
var page1=new Page(obj);
page1.removeClipDiv();
page1.createClipDiv('red');
}/*else if(1==1){
}*/else{
var page1=new Page(obj);
page1.removeClipDiv();
page1.createClipDiv('blue');
}
bindClick();
event.stopPropagation();
});
//-----------------------------------------------------------------------------
/*双击事件*/
//$J("table").add("div").add("ul").add("span").add("a").add("dd").add("dt").add("img").dblclick(function(event){
$J("table").add("div").add("span").add("font").add("a").add("dd").add("dt").add("img").dblclick(function(event){
var obj = this;
var tagName = this.tagName;
var objid = $J(this).attr("objid");
//var _workbench=$("#workbench",document.body);
//var parName=_workbench.find("[objid='"+objid+"']").parent(".selected");
//alert(parName);
/*console.info(obj);
console.info(obj.closest("dd"));
var dd = obj.closest("dd"); */
//console.info(obj.closest("dd").parent().closest("div").find("a"));
//alert(_workbench.find("[objid='"+objid+"']").closest("li"));
/*if(partagName.indexOf("li")>=0||){
}*/
if(objid!=undefined){
/*var tagType = "span";
if(tagName.toLowerCase() == "a"){
tagType = "alink";
}else if(tagName.toLowerCase() == "table" || tagName.toLowerCase() == "ul" || tagName.toLowerCase() == "dl" ){
tagType = "list";
}else if(tagName.toLowerCase() == "div"){
tagType = "content";
}else if(tagName.toLowerCase() == "img"){
tagType = "pic&w="+this.width+"&h="+this.height;
}*/
var tagType=tagName.toLowerCase();
var objid = $J(this).attr("objid");
window.parent.showDialog('p_setproperty','选择标签',"/myconsole/dynamic/selectLabel?objID="+objid+"&labelType="+tagType,900,565);
//openFile1("setparam/p_setproperty.jsp?objid="+objid+"&type="+tagType,"615","1002");
}
event.stopPropagation();
});
//-----------------------------------------------------------------------------
/*添加菜单*/
function setImg(obj){
var objid = $J(obj).attr("objid");
window.parent.showDialog('p_setproperty','选择标签',"setparam/p_setproperty.jsp?objid="+objid+"&type=pic&w="+obj.width+"&h="+obj.height,902,565);
//openFile1("setparam/p_setproperty.jsp?objid="+objid+"&type=pic&w="+obj.width+"&h="+obj.height,"615","1002");
}
function editHTML(obj){
var objid = $J(obj).attr("objid");
openFile1("p_fileedit_part.jsp?objid="+objid,"680","980");
}
function clearHTML(obj){
var objid = $J(obj).attr("objid");
window.open("setparam/p_clearparam.jsp?objid="+objid);
if(obj.tagName.toLowerCase()=="img"){
var aTag = $J(obj).parent();
if($J(aTag).attr("tagName").toLowerCase()=="a"&&$J(aTag).attr("tag")){
if(confirm("是否需要清除外层链接动态化标签？")){
window.open("setparam/p_clearparam.jsp?objid="+$J(aTag).attr("objid"));
}
}
}
}
//-----------------------------------------------------------------------------
});