超簡單實現(xiàn) .NET開發(fā)類似Web Parts的功能(3)_.Net教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：數(shù)據(jù)訪問層的第一種實現(xiàn):Access SQL
經(jīng)過上面篇文章的介紹，整個系統(tǒng)的框架算是基本搭建完了，下面，我們要具體實現(xiàn)各個層次。關(guān)于數(shù)據(jù)訪問層的實現(xiàn)，我準備討論三種實現(xiàn)方式，這一篇文章討論第一種：Access 動態(tài)生成SQL。顧名

/**
* 核心代碼
* al是這樣一個對象，它有一個屬性obj，默認為null，和init/start/drag/end/fixE五個方法
* init() ---- 設(shè)置初始方法
* 設(shè)置元素a的onmousedown事件響應(yīng)為al.start方法，并設(shè)置am（那個直接隸屬于
* <body>的隱藏<div>）的左邊在頁面左上角（如果沒有設(shè)置過的話），設(shè)置上a的空拖拽
* 事件
* start() --- 拖拽開始事件

* 設(shè)置全局變量aa和al.obj為事件源（同一時刻只能有一個box在drag狀態(tài)）。得到隱藏div
* 元素的坐標和當前事件的鼠標坐標，回掉aa變量在initHead()函數(shù)中注冊的onDragStart()函數(shù)（將
* 隱藏div內(nèi)容填好，移動到鼠標位置）。將當前鼠標坐標記錄在aa變量中。設(shè)置鼠標移動

* 事件響應(yīng)和鼠標抬起事件響應(yīng)。

* drag() ---- 拖拽中事件

* 設(shè)置全局變量aa為事件源。得到當前鼠標坐標和移動中的div的位置，與上次鼠標坐標相比

* 計算出偏移量，修改移動中的div的坐標。記錄鼠標當前位置，回掉aa的onDrag()函數(shù)。設(shè)置

* al.obj為null，等待下個box的移動。

* end() ----- 拖拽結(jié)束事件
* 設(shè)置onmousemove和onmouseup不響應(yīng)事件，回掉aa的onDragEnd()函數(shù)。

* fixE()
* 確保瀏覽器兼容性，保證變量a為event事件，并修正事件的layerX/Y（似乎沒有用處）
*/
var al = {"obj":null,
"init":function(a){
a.onmousedown=al.start;
if ( isNaN(parseInt(createDiv().style.left)) ) {
createDiv().style.left="0px";
}
if ( isNaN(parseInt(createDiv().style.top)) ) {
createDiv().style.top="0px";
}
a.onDragStart=new Function();
a.onDragEnd=new Function();
a.onDrag=new Function()
},
"start":function(a){
var aa=al.obj=this;
a=al.fixE(a);
var ab=parseInt(createDiv().style.top);
var ac=parseInt(createDiv().style.left);
aa.onDragStart(ac,ab,a.clientX,a.clientY);
aa.lastMouseX=a.clientX;
aa.lastMouseY=a.clientY;
document.onmousemove=al.drag;
document.onmouseup=al.end;
return false
},
"drag":function(a){
a=al.fixE(a);
var aa=al.obj;
var ab=a.clientY;
var ac=a.clientX;
var ad=parseInt(createDiv().style.top);
var ae=parseInt(createDiv().style.left);
var af,ag;
af=ae ac-aa.lastMouseX;
ag=ad ab-aa.lastMouseY;
createDiv().style.left=af "px";
createDiv().style.top=ag "px";
aa.lastMouseX=ac;
aa.lastMouseY=ab;
aa.onDrag(af,ag,a.clientX,a.clientY);
return false
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
al.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top));
al.obj=null
},
"fixE":function(a){
if (typeof a=="undefined") {
a=window.event;
}
if (typeof a.layerX=="undefined") {
a.layerX=a.offsetX;
}
if (typeof a.layerY=="undefined") {
a.layerY=a.offsetY;
}
return a
}
};

var aw=false;
/**
* 本函數(shù)作用是設(shè)置所有標題可拖動，給元素加入拖拽事件響應(yīng)代碼。

* 本函數(shù)只執(zhí)行一次，aw為true時函數(shù)直接返回。

* 對第一列c_1、第二列c_2、第三列c_3做初始設(shè)置。每一列下均有若干id為m_x的<div>標簽
* 每一個<div>標簽內(nèi)容均為一個<table>，該table中有一個<td>命名為m_x_h，這就是可可拖拽的

* 標題。得到這個<td>元素，加入拖拽事件代碼，就是本函數(shù)的作用。

*/
function initHead(a)
{
if(aw)return;
aw=true;
//設(shè)置全局變量colArray為當前要處理的列數(shù)組，也即三個id為c_1、c_2和c_3的<td>元素
colArray=a;
//數(shù)組colArray中的每個元素都要執(zhí)行。其實數(shù)組colArray只有三個元素，c_1、c_2和c_3，也即第一/二/三列
for(var i=0;i<colArray.length;i )
{//對所有c_x的子結(jié)點遍歷，其實也就是命名為m_x的div標簽。最后一個div標簽有其它用處，
//故此處length-1
for(var j=0;j<colArray[i].childNodes.length-1;j )
{
var module_i=colArray[i].childNodes[j];
var head_i=_getElementById(module_i.id "_head");
if(!head_i)
continue;

//此刻，已經(jīng)得到了id為m_x_h的<td>元素，即box的標題td
//將整個大<div>記錄在ad對象的module屬性中，這個module屬性是？？？？
head_i.module=module_i;
//用al對象的init方法初始化可拖拽標題td。

al.init(head_i);

//得到m_x_h的<a>元素，即id為m_x_url的<a>
var url_i=_getElementById(module_i.id "_url");
if(url_i)
{//設(shè)置<a>的h屬性為ad（即上層標題的<td>元素）,這個h屬性是？？？？
url_i.h=head_i;
//當超級鏈接被點中，設(shè)置上層標題<td>的href和target屬性

//為當前超級鏈接的href和target屬性。這樣用戶也可以拖超級鏈接

url_i.onmousedown=function() {
this.h.href=this.href;
this.h.target=this.target;
}
}

//核心代碼：拖拽開始回掉函數(shù)

//關(guān)閉定時器，通過之前記錄的module屬性得到整個大<div>元素，調(diào)用aA()
//函數(shù)計算所有box的偏移值。記錄

head_i.onDragStart=function(af,ag) {
//關(guān)閉定時器

clearInterval(ap);
//通過之前記錄的module屬性得到整個大box的<div>元素
var module_i=this.module;
//計算頁面上所有其它box的偏移值

aA(module_i);
//將下一個box的<div>元素記錄下來
module_i.origNextSibling=module_i.nextSibling;
//得到移動的<div>，指定到鼠標位置，從隱藏狀態(tài)顯示出來

//使用alpha filter將透明度設(shè)置為80,填充好內(nèi)容和CSS

//createDiv()生成一個DIV
var module_i_copy=createDiv();
module_i_copy.style.left=getOffset(module_i,true);
module_i_copy.style.top=getOffset(module_i,false);
module_i_copy.style.height=module_i.offsetHeight;
module_i_copy.style.width=module_i.offsetWidth;
module_i_copy.style.display="block";
module_i_copy.style.opacity=0.8;
module_i_copy.style.filter="alpha(opacity=80)";
module_i_copy.innerHTML=module_i.innerHTML;
module_i_copy.className=module_i.className;
//設(shè)置dragged為false
this.dragged=false
};

//核心代碼：拖拽中回掉函數(shù)
//全部由aG函數(shù)實現(xiàn)拖拽過程中的移動和“補位”

head_i.onDrag=function(af,ag) {
setModulePos(this.module,af,ag);
//設(shè)置dragged為true
this.dragged=true
};

//核心代碼：拖拽結(jié)束函數(shù)

head_i.onDragEnd=function(af,ag) {
if (this.dragged) {
//被拖拽叻，設(shè)置動態(tài)回位效果，把box安定下來
ap=aD(this.module,150,15)
} else {
//box僅僅被鼠標點叻一下超級鏈接，需要提供正常

//的超級鏈接被點擊效果
ax();
if (this.href) {
if (this.target){
window.open(this.href,this.target)
} else {
document.location=this.href
}
}
}
this.target=null;
this.href=null;
//拖拽工作最后一步，取回box內(nèi)的內(nèi)容
if (this.module.nextSibling!=this.module.origNextSibling) {
aI()
}
}
}//second for end
}//first for end
}
/**
* 隱藏浮動的拖拽移動中<div>元素
*/
function ax()
{
createDiv().style.display="none"
}
/** 設(shè)置拖拽結(jié)束后的box動態(tài)回位效果

*/
function aD(a,aa,ab)
{
var ac=parseInt(createDiv().style.left);
var ad=parseInt(createDiv().style.top);
var ae=(ac-getOffset(a,true))/ab;
var af=(ad-getOffset(a,false))/ab;
return setInterval(function(){if(ab<1){clearInterval(ap);ax();return}ab--;ac-=ae;ad-=af;createDiv().style.left=parseInt(ac) "px";createDiv().style.top=parseInt(ad) "px"},aa/ab)
}
/**
* 全局變量colArray為列c_1、c_2和c_3數(shù)組（也即三個<td>元素）

* 計算所有可移動的大box（即<div>）距離頁面左邊的偏移量和
* 距離頁面上方的偏移量。對于當前拖拽的box，在其所在列中，
* 所有在它下面的<div>的pagePosTop值需要減去當前拖拽box的高度

*/
function aA(a)
{
for(var aa=0;aa<colArray.length;aa )
{
var ab=0;
for(var ac=0;ac<colArray[aa].childNodes.length;ac )
{
var ad=colArray[aa].childNodes[ac];
if(ad==a)
ab=ad.offsetHeight;
ad.pagePosLeft=getOffset(ad,true);
ad.pagePosTop=getOffset(ad,false)-ab
}
}
}
/**
* 得到某一元素距離頁面左邊或上邊的偏移量

*/
function getOffset(obj,isLeftOffset)
{
var offsetValue=0;
while(obj!=null)
{
offsetValue =obj["offset" (isLeftOffset?"Left":"Top")];
obj=obj.offsetParent
}
return offsetValue
}
/**
* 核心代碼，拖拽中處理函數(shù)。變量a為box（即<div>元素），aa和ab為偏移量
*/
function setModulePos(obj,posLeft,posTop)
{
var module=null;
var ad=100000000;

//對每一列遍歷

for(var i=0;i<colArray.length;i )
{//對每一個<div>box遍歷
for(var j=0;j<colArray[i].childNodes.length;j )
{
var module_i=colArray[i].childNodes[j];
//對于正在移動中的box自身，不作處理

if(module_i==obj)
continue;
//計算某些偏移量

var ai=Math.sqrt(Math.pow(posLeft-module_i.pagePosLeft,2) Math.pow(posTop-module_i.pagePosTop,2));
if(isNaN(ai))
continue;
if(ai<ad)
{
ad=ai;module=module_i
}
}
}

//再適當?shù)奈恢蒙咸砑赢斍耙苿又械腷ox
if(module!=null&&obj.nextSibling!=module)
{
module.parentNode.insertBefore(obj,module);
//TODO: 這行代碼好像不起什么作用

DisplayModule(obj)
}
}
/**
* 在頁面上顯示變量a的父節(jié)點
* TODO: 第一行代碼有什么用？

*/
function DisplayModule(obj)
{
obj.parentNode.style.display="none";
obj.parentNode.style.display=""
}
/**
* 構(gòu)造要取回內(nèi)容的URL
*/
function aI()
{
var a="";
for(var i=0;i<colArray.length;i )
{
a =a!=""?":":"";
for(var j=0;j<colArray[i].childNodes.length-1;j )
{
var module=colArray[i].childNodes[j];
if(module.id=="" || module.style.display=="none")
continue;
a =module.id.substring(7) ",";
}
}
_sendXMLRequest("mydestop/frmXmlHttp.aspx?MYTABLE=" escape(a),null)
}