超簡單實現 .NET開發類似Web Parts的功能(2)_.Net教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:數據訪問層的第一種實現:Access SQL
      經過上面篇文章的介紹,整個系統的框架算是基本搭建完了,下面,我們要具體實現各個層次。關于數據訪問層的實現,我準備討論三種實現方式,這一篇文章討論第一種:Access 動態生成SQL。 顧名

      //核心代碼:拖拽開始回掉函數

      //關閉定時器,通過之前記錄的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)
      }


      // 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
      }

      分享:依賴注入機制及IoC的設計與實現
      我們設計的分層架構,層與層之間應該是松散耦合的。因為是單向單一調用,所以,這里的“松散耦合”實際是指上層類不能具體依賴于下層類,而應該依賴于下層提供的一個接口。這樣,上層

      來源:模板無憂//所屬分類:.Net教程/更新時間:2008-08-22
      相關.Net教程