超簡單實現 .NET開發類似Web Parts的功能_.Net教程
推薦:數據訪問層的第一種實現:Access SQL經過上面篇文章的介紹,整個系統的框架算是基本搭建完了,下面,我們要具體實現各個層次。關于數據訪問層的實現,我準備討論三種實現方式,這一篇文章討論第一種:Access 動態生成SQL。 顧名
微軟推出SharePoint2003 ,SharePoint2007以來,一個新的技術Web Parts也隨著推出來了。剛一接觸到這個東西,作為了一個開發人員,感到十分的好奇,這雖然算不上一次技術上的革命,但對用戶的體驗來講,卻是一個實實在在的好東東,能給使用的用戶帶來使用軟件的幸福感,自在感。一句話,真是太棒了!
看了很多軟件已經實現了這個功能,像google這種大公司也早就實現了這種功能,還有許多其它公司也實現了類似的功能。最近我們在做E8.HelpDesk For ITSM產品,這樣的好東西怎么能放過了。。。
Web Parts的實現有多種方式,由于對.Net 2.0的Web Parts不是很熟,我們用最方便快捷的javascrpt腳本來實現,實現的原理是用Iframe,用戶可以自定義自己的桌面,每個Iframe里可以放入一個網頁地址,具體要放什么網頁,我們可以做一個管理界面,加一個自定義桌面表,可以根據自己的需要,不斷的延伸這個功能,做到非常的靈活,強大,這里面有用的XmlHttp技術,讓用戶自定義自已的桌面時,休驗到快速的效果,最后的效果,類似于google的定義功能。現在把實現的腳本代碼貼出來,與大家共享,共同進步。
// Input 0
/**
* get element
* document.getElementById的封裝
* 如果瀏覽器不支持getElementById方法則返回null
*/
function _getElementById(a)
{
return document.getElementById?document.getElementById(a):null
}
/**
* get elements tag name
* document.getElementsByTagName的封裝
* 根據tagName返回數組,*返回所有tag。
* 如果瀏覽器不支持getElementsByTagName方法,則返回空數組
*/
function _getElementsByTagName(a)
{
return document.getElementsByTagName?document.getElementsByTagName(a):new Array()
}
//標志瀏覽器是否為Safari
var isSafari=navigator.userAgent.indexOf("Safari")>=0;
/**
* 一個標準的colArrayAX替換頁面內容典范
* 變量a為地址,aa為回掉處理函數
*/
function _sendXMLRequest(theURL,aa)
{
var xmlHttpObj=getXMLHttpObj();
if(!xmlHttpObj||isSafari&&!aa)
{//特殊瀏覽器特殊照顧
(new Image()).src=theURL;
}
else
{//正常的瀏覽器,用XMLHTTP顯示內容
xmlHttpObj.open("GET",theURL,true);
xmlHttpObj.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded ");
xmlHttpObj.send(null);
}
}
/**
* 拿到一個可用的XMLHttpRequest對象
*/
function getXMLHttpObj()
{
var a=null;
if(window.ActiveXObject)
{
a=new ActiveXObject("Msxml2.XMLHTTP");
if(!a)
{
a=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if(window.XMLHttpRequest)
{
a=new XMLHttpRequest();
}
return a;
}
function _del(a)
{
msg="確認不在桌面上顯示該模塊么?\n\n您可以通過自定義桌面恢復顯示!";
if(window.confirm(msg))
{
var module=_getElementById("module_" a);
if(module)
module.style.display="none";
aI();
}
return false
}
/**
* 查找CSS,將class名字為a的aa自段定義值為ab
* 例如setCSSAttrib("medit","display", "none");
* 則代表將.media的display定義為none
*
*/
function setCSSAttrib(clasName,attrName,attrValue)
{
if(document.styleSheets)
{//瀏覽器有styleSheets,查找CSS列表并修改
clasName="." clasName;
for(var i=0;i<document.styleSheets.length;i )
{
var classI=document.styleSheets[i];
var rulesI=classI.rules;
if(!rulesI)
{
rulesI=classI.cssRules;
if(!rulesI){return}
}
for(var j=0;j<rulesI.length;j )
{
if(rulesI[j].selectorText.toLowerCase()==clasName.toLowerCase())
{
rulesI[j].style[attrName]=attrValue
}
}
}
}
else
{//瀏覽器不支持styleSheets,一個元素一個元素地找并修改-_-b
var elementI=_getElementsByTagName("*");
for(var i=0;i<elementI.length;i )
{
if(elementI[i].className==clasName)
{
elementI[i].style[attrName]=attrValue
}
}
}
}
var aC="";
var _pnlo;
var _mod;
var ay=false;
function _upc()
{
// setCSSAttrib("medit","display",_pnlo||_uli?"":"none");
// setCSSAttrib("panelo","display",_pnlo?"":"none");
// setCSSAttrib("panelc","display",_pnlo?"none":"");
// setCSSAttrib("mod","display",_mod?"":"none");
// setCSSAttrib("unmod","display",_mod?"none":"");
//如果_pl為true,并且_uli和_pnlo有一個為true,則設置mttl CSS的鼠標形狀為移動
//如果ay又為false,則把id為c_1、c_2和c_3的這三個元素構成一個數組,傳給initHead()函數
//initHead()函數負責對c_1、c_2、c_3這三個元素下的所有id以_h結尾的子元素設置拖拽事件代碼
//然后把ay設置為true確保initHead()函數只調用一次。之后對mttl CSS設置鼠標形狀為move
// if(_pl&&(_uli||_pnlo))
{
if(!ay)
{
initHead([_getElementById("col_l"),_getElementById("col_r")]);
ay=true
}
setCSSAttrib("TableHeader","cursor","move")
}
}
var aq=0;
var colArray=[];
var ap=0;
var am=null;
/**
* 如果am為null,將am創建為<div>標簽,暫時先不顯示,鼠標形狀為move,
* 背景為白色,底部padding為0px,直接創建在<body>下。最后返回am
*/
function createDiv()
{
if(!am)
{
am=document.createElement("DIV");
am.style.display="none";
am.style.position="absolute";
am.style.cursor="move";
am.style.backgroundColor="#ffffff";
am.style.paddingBottom="0px";
document.body.appendChild(am)
}
return am
}
/**
* 核心代碼
* 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";}
}
分享:依賴注入機制及IoC的設計與實現我們設計的分層架構,層與層之間應該是松散耦合的。因為是單向單一調用,所以,這里的“松散耦合”實際是指上層類不能具體依賴于下層類,而應該依賴于下層提供的一個接口。這樣,上層
- asp.net如何得到GRIDVIEW中某行某列值的方法
- .net SMTP發送Email實例(可帶附件)
- js實現廣告漂浮效果的小例子
- asp.net Repeater 數據綁定的具體實現
- Asp.Net 無刷新文件上傳并顯示進度條的實現方法及思路
- Asp.net獲取客戶端IP常見代碼存在的偽造IP問題探討
- VS2010 水晶報表的使用方法
- ASP.NET中操作SQL數據庫(連接字符串的配置及獲取)
- asp.net頁面傳值測試實例代碼
- DataGridView - DataGridViewCheckBoxCell的使用介紹
- asp.net中javascript的引用(直接引入和間接引入)
- 三層+存儲過程實現分頁示例代碼
- 相關鏈接:
- 教程說明:
.Net教程-超簡單實現 .NET開發類似Web Parts的功能。