CSS+DIV-CSS與AJAX

15-1.html

< html >
< head >
< title >Ajax入門 </title>
< style type ="text/css" >
<!--
body{
  font-size:13px;
  background-color:#e7f3ff;
}
form{
  padding:0px; margin:0px;
}
input{
  border-bottom:1px solid #007eff;  /* 下劃線 */
  font-family:Arial, Helvetica, sans-serif;
  color:#007eff;
  background:transparent;
  border-top:none;
  border-left:none;
  border-right:none;
}
p{
  margin:0px;
  padding:2px 2px 2px 10px;
  background:url(icon.gif) no-repeat 0px 10px;  /* 加入小icon圖標 */
}
-->
</style>
< script language ="javascript" >
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject){
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
  }
}
//建立XMLHttpRequest對象
createXMLHttpRequest();
function callServer(){
  //獲取表單中的數據
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  //若是沒有填寫則返回
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  //連接服務器，自動得到代號。本例沒有連接服務器，只是示例
  var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  //打開連接
  xmlHttp.open("GET", url, true);
  //告訴服務器在運行完成後（可能要用五分鐘或者五個小時）作什麼，這裏觸發updatePage函數
  xmlHttp.onreadystatechange = updatePage;
  //發送請求
  xmlHttp.send(null);
}
//處理服務器響應
function updatePage(){
  if (xmlHttp.readyState == 4) {
  var response = xmlHttp.responseText;
  document.getElementById("zipCode").value = response;
  }
}
</script>
     </head>
< body >
< form >
   < p >城市: < input type ="text" name ="city" id ="city" size ="25" onChange ="callServer();" > </p>
   < p >國家: < input type ="text" name ="state" id ="state" size ="25" onChange ="callServer();" > </p>
   < p >代號: < input type ="text" name ="zipCode" id ="city" size ="5" > </p>
</form>
</body>
</html>

15-2.html

< html >
< head >
< title >可以自由拖動佈局區域的網頁 </title>
< style type ="text/css" >
<!--
body{
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  margin:0px; padding:0px;
  /*background-color:#ffffd5;*/
  background-color:#e6ffda;
}
.dragTable{
  font-size:12px;
  /*border:1px solid #003a82;*/
  border:1px solid #206100;
  margin-bottom:5px;
  width:100%;
  /*background-color:#cfe5ff;*/
  background-color:#c9ffaf;
}
td{
  padding:3px 2px 3px 2px;
  vertical-align:top;
}
.dragTR{
  cursor:move;
  /*color:#FFFFFF;
  background-color:#0073ff;*/
  color:#ffff00;
  background-color:#3cb500;
  height:20px;
  font-weight:bold;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
}
#parentTable{
  border-collapse:collapse;
}
-->
</style>
< script language ="javascript" defer ="defer" >
var Drag={
  dragged:false,
  ao:null,
  tdiv:null,
  dragStart:function(){
    Drag.ao=event.srcElement;
    if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
      Drag.ao=Drag.ao.offsetParent;
      Drag.ao.style.zIndex=100;
     }else
        return;
    Drag.dragged=true;
    Drag.tdiv=document.createElement("div");
    Drag.tdiv.innerHTML=Drag.ao.outerHTML;
    Drag.ao.style.border="1px dashed red";
    Drag.tdiv.style.display="block";
    Drag.tdiv.style.position="absolute";
    Drag.tdiv.style.filter="alpha(opacity=70)";
    Drag.tdiv.style.cursor="move";
    Drag.tdiv.style.border="1px solid #000000";
    Drag.tdiv.style.width=Drag.ao.offsetWidth;
    Drag.tdiv.style.height=Drag.ao.offsetHeight;
    Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
    Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
    document.body.appendChild(Drag.tdiv);
    Drag.lastX=event.clientX;
    Drag.lastY=event.clientY;
    Drag.lastLeft=Drag.tdiv.style.left;
    Drag.lastTop=Drag.tdiv.style.top;
  },
  draging:function(){//判斷MOUSE的位置
    if(!Drag.dragged||Drag.ao==null)return;
    var tX=event.clientX;
    var tY=event.clientY;
    Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
    Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
    for(var i=0;i<parentTable.cells.length;i++){
      var parentCell=Drag.getInfo(parentTable.cells[i]);
      if(tX>=parentCell.left&&tX < =parentCell.right&&tY >=parentCell.top&&tY<=parentCell.bottom){
        var subTables=parentTable.cells[i].getElementsByTagName("table");
        if(subTables.length==0){
          if(tX>=parentCell.left&&tX < =parentCell.right&&tY >=parentCell.top&&tY<=parentCell.bottom){
            parentTable.cells[i].appendChild(Drag.ao);
          }
          break;
        }
        for(var j=0;j<subTables.length;j++){
          var subTable=Drag.getInfo(subTables[j]);
          if(tX>=subTable.left&&tX < =subTable.right&&tY >=subTable.top&&tY<=subTable.bottom){
            parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
            break;
          }else{
            parentTable.cells[i].appendChild(Drag.ao);
          }
        }
      }
    }
  },
  dragEnd:function(){
    if(!Drag.dragged)
      return;
    Drag.dragged=false;
    Drag.mm=Drag.repos(150,15);
    Drag.ao.style.borderWidth="0px";
    //Drag.ao.style.border="1px solid #003a82";
    Drag.ao.style.border="1px solid #206100";
    Drag.tdiv.style.borderWidth="0px";
    Drag.ao.style.zIndex=1;
  },
  getInfo:function(o){//取得座標
    var to=new Object();
    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;
      o=o.offsetParent;
    }
    to.right=to.left+twidth;
    to.bottom=to.top+theight;
    return to;
  },
  repos:function(aa,ab){
    var f=Drag.tdiv.filters.alpha.opacity;
    var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
    var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
    var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
    var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
    var kf=f/ab;
    return setInterval(function(){
      if(ab<1){
        clearInterval(Drag.mm);
        Drag.tdiv.removeNode(true);
        Drag.ao=null;
        return;
      }
      ab--;
      tl-=kl;
      tt-=kt;
      f-=kf;
      Drag.tdiv.style.left=parseInt(tl)+"px";
      Drag.tdiv.style.top=parseInt(tt)+"px";
      Drag.tdiv.filters.alpha.opacity=f;
    }
    ,aa/ab)
  },
  inint:function(){
    for(var i=0;i<parentTable.cells.length;i++){
      var subTables=parentTable.cells[i].getElementsByTagName("table");
      for(var j=0;j<subTables.length;j++){
        if(subTables[j].className!="dragTable")
          break;
        subTables[j].rows[0].className="dragTR";
        subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
      }
    }
    document.onmousemove=Drag.draging;
    document.onmouseup=Drag.dragEnd;
  }
}
Drag.inint();
</script>
     </head>
< body >
< table cellspacing ="4" width ="100%" id ="parentTable" >
< tr >
   < td width ="25%" valgin ="top" >
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >CSS </td> </tr>
       < tr > < td >CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並容許將樣式信息與網頁內容分離的一種標記性語言。CSS是1996年由W3C審覈經過，而且推薦使用的。 </td> < tr >
     </table>
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >AJAX </td> </tr>
       < tr > < td >Ajax（Asynchronous JavaScript and XML，異步JavaScript和XML）是目前很新的一項網絡應用技術。 </td> < tr >
     </table>
   </td>
   < td width ="25%" >
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >Javascript </td> </tr>
       < tr > < td >Javascript是一種基於對象的腳本語言，使用它能夠開發Internet客戶端的應用程序。Javascript在HTML頁面中以語句的方式出現，而且執行相應的操做。 </td> < tr >
     </table>
   </td>
   < td width ="25%" >
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >XML </td> </tr>
       < tr > < td >XML是eXtensible Markup Language的縮寫，便可擴展標記語言。它是一種能夠用來建立自定義標記的語言，由萬維網協會（W3C）建立，用來克服HTML的侷限。 </td> < tr >
     </table>
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >網頁變幻 </td> </tr>
       < tr > < td >保持頁面的HTML不變，經過分別調用三個外部CSS文件，實現三個徹底不一樣的頁面效果，藍色經典、清明上河圖、交河古城。 </td> < tr >
     </table>
   </td>
</tr>
</table>
</body>
</html>

來源：《精通CSS+DIV網頁樣式與佈局 》