萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 用javascript面向對象的方式制作彈出層

用javascript面向對象的方式制作彈出層

   由於本人以前是.net程序員,所以即使現在在做前端,也習慣於用面向對象的方式編寫js腳本,我想如果你以前也是或者現在還是名第三代程序員的話,應該對此並不陌生。

  說到js的面向對象,就不得不提到prototype這個js內置屬性了(注意:這裡的prototype可不是prototype.js),它的作用就是可以動態的向一個對象(object)添加某種屬性。我現在要做的就是盡可能的讓代碼達到公用,像繼承啦之類的。好了,這些就不多說了,對prototype不了解的可以搜索下相關內容。

  今天要做的是點擊一個html元素讓其彈出一個友好的對話框來,首先要明確兩點,一點是我可能會大量的用到這種方式,甚至不希望出現系統的alert或confirm,第二點就是彈出的內容盡量的可以多種化,甚至可以自定義。明確這兩點後,我們就可以寫js代碼了,都是些很初級的東西,如果你要鄙視的話就盡情的鄙視我吧!^.^

  首先定義一個簡單的對象:

  function objDIV() {

  this.bgdiv ;

  this.infodiv ;

  }

  首先,我們希望彈出一個遮罩層,我給它命名openBackDiv();

  function openBackDiv(txbdiv) {

  txbdiv.bgdiv = document.createElement("div");

  txbdiv.bgdiv.setAttribute("id", "overDiv");

  txbdiv.bgdiv.innerHTML = "";

  }

  再者,把它添加到剛剛定義的對象的prototype裡去(openBG()):

  objDIV.prototype.openBG = function() {

  openBackDiv(this);

  document.body.appendChild(this.bgdiv);

  this.bgdiv.style.display = "block";

  this.bgdiv.style.width = document.documentElement.clientWidth + "px";

  this.bgdiv.style.height = document.documentElement.scrollHeight + "px";

  }

  再就是添加彈出信息層的方法,和上面一樣做就行了。所以才說這個是很基礎的東西,好像確實沒啥好說的,直接上代碼吧!

  這是一個正在加載的彈出層,有點粗糙. function openLoadDiv(txbdiv) {

  txbdiv.infodiv = document.createElement("div");

  txbdiv.infodiv.setAttribute("id", "div_info");

  txbdiv.infodiv.innerHTML = "

請稍等,正在處理中...

 

";

 

  document.body.appendChild(txbdiv.infodiv);

  txbdiv.infodiv.style.width = "550px";

  txbdiv.infodiv.style.height = "270px";

  txbdiv.infodiv.style.fontSize = "14px";

  txbdiv.infodiv.style.position = "absolute";

  txbdiv.infodiv.style.background = "#fff";

  txbdiv.infodiv.style.zIndex = "9999";

  centerobject();//居中的方法

  }

  objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this); }

  做完這些後一個簡單的彈出加載層就完成了.是不是有點成就感了,那麼接著完成其他的工作吧!既然都彈出了,總得在某個時刻把它們移掉吧,下面就是移除這些層的方法。

  objDIV.prototype.removeBG = function() {

  if (this.bgdiv || document.getElementById("overDiv")) {

  if (this.bgdiv) {

  document.body.removeChild(this.bgdiv);

  } else {

  document.body.removeChild(document.getElementById("overDiv"));

  }

  }

  }

  objDIV.prototype.removeInfo = function() {

  this.removeBG();

  if (this.infodiv) {

  document.body.removeChild(this.infodiv);

  } else {

  document.body.removeChild(document.getElementById("div_info"));

  }

  }

  如果想彈出不同層信息的話,就可以添加不同的prototype屬性。

copyright © 萬盛學電腦網 all rights reserved