放个07年在搜狐CMS当初写的可视化编辑页面JS代码.
07年写的,太久了,应该有更好的了吧, 怀念一下. 这么多年没写JS了,都不太记得了.
主要是实现的页面内容的碎片可视化编辑.
比如在内容碎片，选择某个链接，弹出一个层，直接修改链接的名称和地址
比如动态碎片，弹出一个层，直接修改该碎片引用的某频道列表。
需要的同学们来摘下哈. 当然，直接运行是运行不起来地。
哼哼哼,当年呐,实现这功能多NB~
var CMSTemplate = Class.create();
CMSTemplate.prototype = {
initialize: function() {
this.coverDiv = $("sohu_frag_block");
this.coverDivIframe = $("sohu_frag_block_iframe");
this.currentCoveredId = -1;
this.fragBuffer = new Array();
this.FRAG_TAGNAME = "span";
this.FRAG_ID = "cms4_template_frag";
this.tempFragObserveObjectArray = new Array();
this.fragEditorArray = new Array();
this.coverDiv.onclick = this.clickCover.bind(this);
this.coverDiv.onmouseout = this.hideCover.bind(this);
},
processFrag: function() {
var frags = document.getElementsByName(this.FRAG_ID);
if (frags.length == 0) {
alert("没有找到碎片");
return;
};
this.killBaseTarget();
for (var i = 0; i < frags.length; i++) {
var frag = frags[i];
this.tempFragObserveObjectArray[i] = this.showCover.bind(this);
$(frag).observe("mouseover", this.tempFragObserveObjectArray[i]);
frag.idx = i;
this.fragBuffer.push(frag);
}
},
killBaseTarget: function() {
var bases = $A(document.getElementsByTagName("base"));
bases.each(function(b) {
if (b.getAttribute("target") != null && b.getAttribute("target") != "") {
b.removeAttribute("target");
}
});
},
showCover: function(_event) {
var element = this.findElementById(_event, this.FRAG_TAGNAME);
while (element != null && element.tagName != "element.tagName" && this.FRAG_ID != element.id) {
element = element.parentElement;
};
this.currentCoveredId = element.idx;
this.adjustCoverPosition(element);
this.changeCoverContent(element);
Element.show(this.coverDivIframe);
Element.show(this.coverDiv);
},
adjustCoverPosition: function(_targetElement) {
var ibody = document.documentElement;
if (ibody.scrollTop == 0) {
ibody = document.body;
};
var obj = _targetElement.getBoundingClientRect();
this.coverDiv.style.left = obj.left + ibody.scrollLeft - 2 + "px";
this.coverDiv.style.top = obj.top + ibody.scrollTop - 4 + "px";
this.coverDiv.style.width = obj.right - obj.left + 2 + "px";
this.coverDiv.style.height = obj.bottom - obj.top + 2 + "px";
this.coverDivIframe.style.left = this.coverDiv.style.left;
this.coverDivIframe.style.top = this.coverDiv.style.top;
this.coverDivIframe.style.width = this.coverDiv.style.width;
this.coverDivIframe.style.height = this.coverDiv.style.height;
},
changeCoverContent: function(_element) {
var frag_type = _element.getAttribute("frag_type");
var coverContent = "";
var converBackgroupColor = "#ffffcc";
switch (frag_type) {
case "1":
coverContent = "【碎片类型】静态碎片<br>【碎片名称】" + _element.getAttribute("frag_name") + '<br>【碎片描述】' + _element.getAttribute("frag_desc") + '<br>【引用类型】' + _element.getAttribute("frag_quotetype") + (_element.getAttribute("frag_quotefrag") == null ? "": '<br>【引用碎片】' + _element.getAttribute("frag_quotefrag")) + '<br>【碎片权限】' + this.getSplitedPermision(_element);
break;
default:
coverContent = "碎片类型不正确， fragtype:" + frag_type;
break;
};
this.coverDiv.innerHTML = coverContent;
this.coverDiv.style.backgroundColor = converBackgroupColor;
},
_genStaticFragContent: function(_element) {
return;
},
getSplitedPermision: function(_e) {
return _e.getAttribute("frag_permission").replace(/\|/g, '<br>');
},
补充：web前端 , JavaScript ,
