超简单实现 .NET开发类似Web Parts的功能(3)_.Net教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:数据访问层的第一种实现:Access SQL
经过上面篇文章的介绍,整个系统的框架算是基本搭建完了,下面,我们要具体实现各个层次。关于数据访问层的实现,我准备讨论三种实现方式,这一篇文章讨论第一种:Access 动态生成SQL。 顾名

/**
* 核心代码
* al是这样一个对象,它有一个属性obj,默认为null,和init/start/drag/end/fixE五个方法
* init() ---- 设置初始方法
* 设置元素a的onmousedown事件响应为al.start方法,并设置am(那个直接隶属于
* <body>的隐藏<div>)的左边在页面左上角(如果没有设置过的话),设置上a的空拖拽
* 事件
* start() --- 拖拽开始事件

* 设置全局变量aa和al.obj为事件源(同一时刻只能有一个box在drag状态)。得到隐藏div
* 元素的坐标和当前事件的鼠标坐标,回掉aa变量在initHead()函数中注册的onDragStart()函数(将
* 隐藏div内容填好,移动到鼠标位置)。将当前鼠标坐标记录在aa变量中。设置鼠标移动

* 事件响应和鼠标抬起事件响应。

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

* 设置全局变量aa为事件源。得到当前鼠标坐标和移动中的div的位置,与上次鼠标坐标相比

* 计算出偏移量,修改移动中的div的坐标。记录鼠标当前位置,回掉aa的onDrag()函数。设置

* al.obj为null,等待下个box的移动。

* end() ----- 拖拽结束事件
* 设置onmousemove和onmouseup不响应事件,回掉aa的onDragEnd()函数。

* 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;
/**
* 本函数作用是设置所有标题可拖动,给元素加入拖拽事件响应代码。

* 本函数只执行一次,aw为true时函数直接返回。

* 对第一列c_1、第二列c_2、第三列c_3做初始设置。每一列下均有若干id为m_x的<div>标签
* 每一个<div>标签内容均为一个<table>,该table中有一个<td>命名为m_x_h,这就是可可拖拽的

* 标题。得到这个<td>元素,加入拖拽事件代码,就是本函数的作用。

*/
function initHead(a)
{
if(aw)return;
aw=true;
//设置全局变量colArray为当前要处理的列数组,也即三个id为c_1、c_2和c_3的<td>元素
colArray=a;
//数组colArray中的每个元素都要执行。其实数组colArray只有三个元素,c_1、c_2和c_3,也即第一/二/三列
for(var i=0;i<colArray.length;i )
{//对所有c_x的子结点遍历,其实也就是命名为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;

//此刻,已经得到了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)
{//设置<a>的h属性为ad(即上层标题的<td>元素),这个h属性是????
url_i.h=head_i;
//当超级链接被点中,设置上层标题<td>的href和target属性

//为当前超级链接的href和target属性。这样用户也可以拖超级链接

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

var more_i=_getElementById(module_i.id "_more");
if(more_i)
{
more_i.module=module_i;
more_i.onmouseover=function() {var op_i=_getElementById(this.module.id "_op");if(op_i) op_i.style.display="";}
more_i.onmouseout =function() {var op_i=_getElementById(this.module.id "_op");if(op_i) op_i.style.display="none";}
}

//核心代码:拖拽开始回掉函数

//关闭定时器,通过之前记录的module属性得到整个大<div>元素,调用aA()
//函数计算所有box的偏移值。记录

head_i.onDragStart=function(af,ag) {
//关闭定时器

clearInterval(ap);
//通过之前记录的module属性得到整个大box的<div>元素
var module_i=this.module;
//计算页面上所有其它box的偏移值

aA(module_i);
//将下一个box的<div>元素记录下来
module_i.origNextSibling=module_i.nextSibling;
//得到移动的<div>,指定到鼠标位置,从隐藏状态显示出来

//使用alpha filter将透明度设置为80,填充好内容和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;
//设置dragged为false
this.dragged=false
};

//核心代码:拖拽中回掉函数
//全部由aG函数实现拖拽过程中的移动和“补位”

head_i.onDrag=function(af,ag) {
setModulePos(this.module,af,ag);
//设置dragged为true
this.dragged=true
};

//核心代码:拖拽结束函数

head_i.onDragEnd=function(af,ag) {
if (this.dragged) {
//被拖拽叻,设置动态回位效果,把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内的内容
if (this.module.nextSibling!=this.module.origNextSibling) {
aI()
}
}
}//second for end
}//first for end
}
/**
* 隐藏浮动的拖拽移动中<div>元素
*/
function ax()
{
createDiv().style.display="none"
}
/** 设置拖拽结束后的box动态回位效果

*/
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数组(也即三个<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
}
/**
* 核心代码,拖拽中处理函数。变量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
}
}
}

//再适当的位置上添加当前移动中的box
if(module!=null&&obj.nextSibling!=module)
{
module.parentNode.insertBefore(obj,module);
//TODO: 这行代码好像不起什么作用

DisplayModule(obj)
}
}
/**
* 在页面上显示变量a的父节点
* TODO: 第一行代码有什么用?

*/
function DisplayModule(obj)
{
obj.parentNode.style.display="none";
obj.parentNode.style.display=""
}
/**
* 构造要取回内容的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)
}

分享:依赖注入机制及IoC的设计与实现
我们设计的分层架构,层与层之间应该是松散耦合的。因为是单向单一调用,所以,这里的“松散耦合”实际是指上层类不能具体依赖于下层类,而应该依赖于下层提供的一个接口。这样,上层

共3页上一页123下一页
来源:模板无忧//所属分类:.Net教程/更新时间:2008-08-22
相关.Net教程