用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果

更新時(shí)間：2007年03月10日 00:00:00 作者：

基本原理分析

Windows關(guān)機(jī)效果分析
使用Windows系統(tǒng)的用戶在關(guān)機(jī)的時(shí)候，出現(xiàn)的界面只允許用戶選擇關(guān)機(jī)、注銷或取消動(dòng)作，而桌面上的程序都不能使用，并且屏幕呈現(xiàn)灰色狀態(tài)。

本例將仿照這種高亮顯示的效果在網(wǎng)頁(yè)上實(shí)現(xiàn).

在網(wǎng)頁(yè)上運(yùn)用這種關(guān)機(jī)效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時(shí)不可用的操作隱藏在后臺(tái)，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應(yīng)該注意的事項(xiàng)。
網(wǎng)頁(yè)中實(shí)現(xiàn)關(guān)機(jī)效果分析
在網(wǎng)頁(yè)中實(shí)現(xiàn)這種效果的原理很簡(jiǎn)單。創(chuàng)建兩個(gè)圖層，一個(gè)為遮蓋層，覆蓋整個(gè)頁(yè)面，并且顯示為灰色；另一個(gè)圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過(guò)設(shè)置圖層的z-index屬性來(lái)設(shè)置。當(dāng)取消關(guān)機(jī)效果后，只需將這兩個(gè)圖層元素在頁(yè)面中刪除即可。
以下代碼實(shí)現(xiàn)顯示關(guān)機(jī)效果。
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#lightbox {/*該層為高亮顯示層*/
       BORDER-RIGHT: #fff 1px solid;
       BORDER-TOP: #fff 1px solid;
       DISPLAY: block;
       Z-INDEX: 9999; /*設(shè)置該層在網(wǎng)頁(yè)的最上端,設(shè)置足夠大*/
       BACKGROUND: #fdfce9; /*設(shè)置背景色*/
       LEFT: 50%;
       MARGIN: -220px 0px 0px -250px;
       BORDER-LEFT: #fff 1px solid;
       WIDTH: 500px;
       BORDER-BOTTOM: #fff 1px solid;
       POSITION: absolute;
       TOP: 50%;
       HEIGHT: 400px;
       TEXT-ALIGN: left
}
#overlay {/*該層為覆蓋層*/
      DISPLAY: block;
      Z-INDEX: 9998; /*設(shè)置高亮層的下方*/
      FILTER: alpha(opacity=80); /*設(shè)置成透明*/
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #000;
      moz-opacity: 0.8;
      opacity: .80
}
</style>
</head>
<body>

<div id="overlay"></div>

<div id="lightbox"></div>
</body>
</html>
需要注意的是，在IE瀏覽器中如果有<select>標(biāo)記，則該標(biāo)記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。

在使用IE瀏覽器時(shí)，要先將網(wǎng)頁(yè)中的<select>元素隱藏起來(lái)。如以下代碼可以用于隱藏頁(yè)面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
       selects[i].style.visibility = visibility;
}

代碼實(shí)現(xiàn)

客戶端代碼
客戶端的頁(yè)面上有兩個(gè)鏈接，用戶單擊鏈接后，向服務(wù)器端發(fā)送請(qǐng)求，并將返回信息顯示到高亮層上?？蛻舳说木W(wǎng)頁(yè)文件代碼如下所示：
<html>
<head>
<title>AJAX LightBox</title>

<LINK href="lightbox.css" type=text/css rel=stylesheet>

<script type="text/javascript" src="js/prototype.js" ></script>

<script type="text/javascript" src="lightbox.js" ></script>
</head>
<body>
<DIV id=container>
<UL>
  <LI><A class=lbOn href="getInfo.jsp?id=one">One</A>
  </LI>
  <LI><A class=lbOn href="getInfo.jsp?id=two">Two</A>
  </LI>
</UL>
</div>
</body>
</html>

另外，還需要設(shè)置該頁(yè)面所使用CSS樣式。lightbox.css樣式表文件代碼如下所示：
#lightbox {
      BORDER-RIGHT: #fff 1px solid;
      BORDER-TOP: #fff 1px solid;
       DISPLAY: none;
       Z-INDEX: 9999;
       BACKGROUND: #fdfce9;
       LEFT: 50%;
       MARGIN: -220px 0px 0px -250px;
       BORDER-LEFT: #fff 1px solid;
       WIDTH: 500px;
       BORDER-BOTTOM: #fff 1px solid;
       POSITION: absolute;
       TOP: 50%;
       HEIGHT: 400px;
       TEXT-ALIGN: left
}
UNKNOWN {
     POSITION: fixed
}
#overlay {
      DISPLAY: none;
      Z-INDEX: 5000; FILTER: alpha(opacity=80);
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
UNKNOWN {
    POSITION: fixed
}
.done#lightbox #lbLoadMessage {
      DISPLAY: none
}
.done#lightbox #lbContent {
      DISPLAY: block
}
.loading#lightbox #lbContent {
      DISPLAY: none
}
.loading#lightbox #lbLoadMessage {
       DISPLAY: block
}
.done#lightbox IMG {
      WIDTH: 100%; HEIGHT: 100%
}
客戶端腳本
由于瀏覽器對(duì)圖層的支持不同，所以首先要確定客戶端瀏覽器的類型。以下代碼可用于判斷客戶端的瀏覽器和操作系統(tǒng)。
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

function getBrowserInfo() {
       if (checkIt('konqueror')) {
            browser = "Konqueror";
            OS = "Linux";
       }
       else if (checkIt('safari')) browser = "Safari"
       else if (checkIt('omniWeb')) browser = "OmniWeb"
       else if (checkIt('opera')) browser = "Opera"
       else if (checkIt('Webtv')) browser = "WebTV";
       else if (checkIt('icab')) browser = "iCab"
       else if (checkIt('msie')) browser = "Internet Explorer"
       else if (!checkIt('compatible')) {
             browser = "Netscape Navigator"
            version = detect.charAt(8);
       }
       else browser = "An unknown browser";

       if (!version) version = detect.charAt(place + thestring.length);

       if(!OS) {
            if (checkIt('linux')) OS = "Linux";
            else if (checkIt('x11')) OS = "Unix";
            else if (checkIt('mac')) OS = "Mac"
            else if (checkIt('win')) OS = "Windows"
            else OS = "an unknown operating system";
       }
}

function checkIt(string) {
        place = detect.indexOf(string) + 1;
        thestring = string;
        return place;
}
下面看一下網(wǎng)頁(yè)加載時(shí)需要添加的方法。有關(guān)網(wǎng)頁(yè)加載和初始化方法代碼如下：
//網(wǎng)頁(yè)加載調(diào)用initialize和getBrowserInfo方法
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
//未加載時(shí)清空緩存
Event.observe(window, 'unload', Event.unloadCache, false);
//初始化方法
function initialize(){
        //調(diào)用該方法為該頁(yè)添加覆蓋層和高亮顯示層
        addLightboxMarkup();
        //為每個(gè)可高亮顯示的元素創(chuàng)建lightbox對(duì)象
        lbox = document.getElementsByClassName('lbOn');
        for(i = 0; i < lbox.length; i++) {
                    valid = new lightbox(lbox[i]);
        }
}

// 使用Dom方法創(chuàng)建覆蓋層和高亮層
function addLightboxMarkup() {
        bod = document.getElementsByTagName('body')[0];
        overlay = document.createElement('div');
        overlay.id = 'overlay';
        lb = document.createElement('div');
        lb.id = 'lightbox';
        lb.className = 'loading';
        lb.innerHTML = '<div id="lbLoadMessage">' +
                                           '<p>Loading</p>' +
                                           '</div>';
        bod.appendChild(overlay);
        bod.appendChild(lb);
}
封裝lightbox類
初始化數(shù)據(jù)時(shí)，為每個(gè)可高亮顯示的鏈接創(chuàng)建了lightbox對(duì)象。該類的代碼具體實(shí)現(xiàn)如下：
var lightbox = Class.create();

lightbox.prototype = {
       yPos : 0,
       xPos : 0,
      //構(gòu)造方法,ctrl為創(chuàng)建該對(duì)象的元素
       initialize: function(ctrl) {
              //將該元素的鏈接賦值給this.content
              this.content = ctrl.href;
              //為該元素添加onclick事件activate方法
              Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
              ctrl.onclick = function(){return false;};
       },

       //當(dāng)單擊鏈接時(shí)
       activate: function(){
              if (browser == 'Internet Explorer'){//判斷為IE瀏覽器
                     this.getScroll();
                     this.prepareIE('100%', 'hidden');
                     this.setScroll(0,0);
                     this.hideSelects('hidden');//隱藏所有的<select>標(biāo)記
              }
              //調(diào)用該類中的displayLightbox方法
              this.displayLightbox("block");
      },

      prepareIE: function(height, overflow){
            bod = document.getElementsByTagName('body')[0];
            bod.style.height = height;
            bod.style.overflow = overflow;

            htm = document.getElementsByTagName('html')[0];
            htm.style.height = height;
            htm.style.overflow = overflow;
      },

      hideSelects: function(visibility){
           selects = document.getElementsByTagName('select');
           for(i = 0; i < selects.length; i++) {
                   selects[i].style.visibility = visibility;
            }
      },

      getScroll: function(){
            if (self.pageYOffset) {
                    this.yPos = self.pageYOffset;
            } else if (document.documentElement && document.documentElement.scrollTop){
                    this.yPos = document.documentElement.scrollTop;
            } else if (document.body) {
                    this.yPos = document.body.scrollTop;
            }
      },

      setScroll: function(x, y){
            window.scrollTo(x, y);
      },

      displayLightbox: function(display){
            //將覆蓋層顯示
            $('overlay').style.display = display;
            //將高亮層顯示
            $('lightbox').style.display = display;
            //如果不是隱藏狀態(tài),則調(diào)用該類中的loadInfo方法
            if(display != 'none') this.loadInfo();
      },

      //該方法發(fā)送Ajax請(qǐng)求
      loadInfo: function() {
            //當(dāng)請(qǐng)求完成后調(diào)用本類中processInfo方法
            var myAjax = new Ajax.Request(
          this.content,
          {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
           );

      },
      // 將返回的文本信息顯示到高亮層上
      processInfo: function(response){
           //獲得返回的文本數(shù)據(jù)
           var result = response.responseText;
           //顯示到高亮層
           info = "<div id='lbContent'>" + result + "</div>";
           //在info元素前插入一個(gè)元素
           new Insertion.Before($('lbLoadMessage'), info)
           //改變?cè)撛氐腸lass name的值
           $('lightbox').className = "done";
           //調(diào)用本類中actions方法
           this.actions();
           var ctrl=$('lightbox');
           //為高亮層添加事件處理方法reset
          Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
           ctrl.onclick = function(){return false;};
      },
      //恢復(fù)初始狀態(tài)
      reset:function(){
            //隱藏覆蓋層
           $('overlay').style.display="none";
           //清空返回?cái)?shù)據(jù)
            $('lbContent').innerHTML="";
            //隱藏高亮層
           $('lightbox').style.display="none";
     },
     // Search through new links within the lightbox, and attach click event
     actions: function(){
           lbActions = document.getElementsByClassName('lbAction');
           for(i = 0; i < lbActions.length; i++) {
                   Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
                   lbActions[i].onclick = function(){return false;};
           }

     }
}

提示：由于該對(duì)象比較復(fù)雜，讀者可以仔細(xì)參閱代碼的注釋部分。

服務(wù)器端代碼

服務(wù)器端首先獲得查詢中的“id”值，如果該值為null或?yàn)榭眨瑒t設(shè)置為默認(rèn)值。然后判斷該值，并且返回相應(yīng)的一段字符串信息。處理請(qǐng)求的getInfojsp頁(yè)面代碼如下：
<%@ page language="java" import="java.util.*"%>
<%
//獲得請(qǐng)求中id的值
  String imgID = request.getParameter("id");
  if (imgID==null||imgID.equals(""))//如果為null或?yàn)榭?
      imgID="one";//設(shè)定為默認(rèn)值
  if ( imgID.equals("one"))//如果為one
  {
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
  605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
  km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph).
  With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
  offered with a six-speed manual transmission, in contrast to its rival the
  Ferrari Enzo that is only offered with sequential manual transmission. Also
  the Carrera GT is significantly less expensive than the Ferrari Enzo. The
  Ferrari Enzo is priced around $660,000 to the Carrera GT's $440,000. The
  Carrera GT is known for its high quality and reliability which makes it one of
  the best supercars ever.
<%}else{//否則
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
  The name, which means "red head", comes from the red painted cylinder heads on
  the flat-12 engine. The engine was technically a 180?V engine since it shared
  flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
  kW), and the car won many comparison tests and admirers - it was featured on
  the cover of Road & Track magazine nine times in just five years. Almost
  10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
  most common Ferrari models despite its high price and exotic design.
<%}%>