81,091
社区成员
发帖
与我相关
我的任务
分享可定制页面实现
页面中显示几块数据集，或功能集，用户可以定制每块集合，或者拖拽数据集在页面上展现的位置，后台如何设计，页面怎么实现，望高手不吝赐教！
...全文
请发表友善的回复…
发表回复
fellowcheng 2010-09-28
- 打赏
- 举报
定制功能可以用1楼说的模板页动态呈现；
拖曳布局需要ajax，给你点仿google个性化拖动的js代码
拖曳布局需要ajax，给你点仿google个性化拖动的js代码
//根据类型获取Elements
function getElementsByClassName(className,tagName)
{
var el = [],
_el = document.getElementsByTagName(tagName);
for (var i=0; i<_el.length; i++ )
{
if (_el[i].className == className)
{
el[el.length] = _el[i];
}
};
return el;
}
//获得元素位置索引
function getElementLocation(ele)
{
var loc = 1;
if(ele)
{
for(var i=0; i<ele.parentNode.children.length; i++ )
{
if (ele.parentNode.children[i].id == ele.id )
{
loc = i;
break;
}
}
}
return loc;
}
var edit = false;
//存放容器
var parentTable = null;
//位置顺序
var EleOrder = 0;
var hydiv=null;
var tdiv=null;
var ao = null;
//取得坐标
function getInfo(o)
{
var to=new Object();
if(o)
{
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
if(o.offsetParent.tagName && o.offsetParent.tagName=='HTML')
o=o.parentElement;
else
o=o.offsetParent;
}
to.right=to.left+twidth;
if(o.style.marginTop)
to.bottom=parseInt(to.top)+parseInt(theight)+parseInt(o.style.marginTop);
else
to.bottom=parseInt(to.top)+theight;
}
return to;
}
//缓慢滑入、滑出效果，用于恢复位置
function ff(aa,ab)
{
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab<1){
clearInterval(mm);
tdiv.style.display="none";
// obj.removeNode(true);
tdiv.parentNode.removeChild(tdiv)
tdiv = null;
ao=null;
return
}
ab--;
ac-=ae;
ad-=af;
if(tdiv)
{
tdiv.style.left=parseInt(ac)+'px';
tdiv.style.top=parseInt(ad)+'px'
}
}
,aa/ab)
}
function Drag(event)
{
this.dragStart = dragStart;
this.onDrag = draging;
this.dragEnd= dragEnd;
}
function dragStart(event)
{
ao = event.srcElement;
if((ao.tagName=='TD')||(ao.tagName=='TR'))
ao=ao.offsetParent;
else
return;
ao.rows[0].className='dragTR';
ao.rows[0].style.display='';
var tmp = getInfo(ao);
//虚线框
if(hydiv)
{
hydiv.style.display="none";
if(hydiv.parentNode)
hydiv.parentNode.removeChild(hydiv)
}
hydiv=document.createElement("div");
// hydiv.style.borderTop='1px dotted';
hydiv.style.border='2px dashed #3366cc';
hydiv.style.backgroundColor="White";
hydiv.style.display="block";
hydiv.style.position="absolute";
if (ao.clientWidth)
{
hydiv.style.width = ao.clientWidth + "px";
hydiv.style.height = ao.clientHeight + "px";
}
hydiv.style.left=tmp.left;
hydiv.style.top=tmp.top;
hydiv.innerText = " ";
document.body.appendChild(hydiv);
if(tdiv)
{
tdiv.style.display="none";
window.status = tdiv.outerHTML;
if(tdiv.parentNode)
tdiv.parentNode.removeChild(tdiv)
}
tdiv=document.createElement('div');
tdiv.innerHTML=ao.outerHTML;
// tdiv.innerHTML = "<table class='dragTable' width='150' border='1' cellspacing='0'> <tr class='dragTR'><td align='right'><input type='submit' value='关闭' /> <input value='折叠' type='button' /> <input value='修改' type='button' /></td></tr><tr><td>拖动模块</td></tr></table>";
tdiv.style.display='block';
tdiv.style.position='absolute';
tdiv.style.cursor='move';
window.status = tmp.top + "," + top.left;
tdiv.style.width=ao.offsetWidth;
tdiv.style.height=ao.offsetHeight;
if(tmp.top)
tdiv.style.top=tmp.top;
if(tmp.left)
tdiv.style.left=tmp.left;
document.body.appendChild(tdiv);
this.lastX=event.clientX;
this.lastY=event.clientY;
this.lastLeft=tmp.left;
this.lastTop=tmp.top;
this.draged = true;
}
function draging(event)
{
//重要:判断MOUSE的位置
if(ao == null || !this.draged)
return;
var tX=event.clientX;
var tY=event.clientY;
//加上MarginTop的值
var bodyMarginTop = parseInt(document.body.style.marginTop);
if(bodyMarginTop > 0)
tY += bodyMarginTop;
if(tdiv)
{
tdiv.style.left=parseInt(this.lastLeft)+tX-this.lastX;
tdiv.style.top=parseInt(this.lastTop)+tY-this.lastY;
tdiv.style.filter='alpha(opacity=50)';
}
for(var r=0;r<parentTable.rows.length;r++){
for(var i=0;i<parentTable.rows[r].cells.length;i++){
var parentCell=getInfo(parentTable.rows[r].cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
var subTables=parentTable.rows[r].cells[i].getElementsByTagName('table');
if(subTables.length==0){
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.rows[r].cells[i].appendChild(ao);
}
break;
}
for(var j=0;j<subTables.length;j++){
var subTable=getInfo(subTables[j]);
if(subTables[j].clientWidth>0)
{
//插入虚线框
hydiv.style.left=subTable.left;
hydiv.style.top=subTable.top;
hydiv.style.width=subTables[j].clientWidth;
}
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
parentTable.rows[r].cells[i].insertBefore(ao,subTables[j]);
break;
}else{
parentTable.rows[r].cells[i].appendChild(ao);
}
}
}
}
}
}
function dragEnd(event)
{
if(this.draged)
{
this.draged = false;
ao.zoneIndex = EleOrder;
ao.zone = ao.parentNode.id.replace("td","");
mm=ff(150,15);
}
if(hydiv)
{
hydiv.style.display="none";
if(hydiv.parentNode)
hydiv.parentNode.removeChild(hydiv)
}
if(parentTable)
{
for(var m = 0;m<parentTable.length;m++)
{
CheckBlankTD(parentTable[m]);
}
}
var ctlid;
if(ao)
{
EleOrder = getElementLocation(ao);
if(ao.parentNode)
ctlid = ao.id + ',' + ao.parentNode.id + ',' + EleOrder;
if(ao.zoneIndex != EleOrder || "td" + ao.zone != ao.parentNode.id)
{
ChangeServerLayout(ctlid);
}
}
}
//给没有内容的td设置高度
function CheckBlankTD(tbl)
{
for(var i=0;i<tbl.cells.length;i++)
{
var tdBlank = tbl.cells[i];
if(tdBlank)
{
if(tdBlank.style.height<50)
tdBlank.style.height=50;
}
}
}
luxianfang2010 2010-09-28
- 打赏
- 举报
EXT
kerioz 2010-09-28
- 打赏
- 举报
我只知道ASP里面可以设置模板页 在自己其他编写的页面套用模板即可 JSP定制 没玩过
