首頁 > 開發者 > JavaScript
Windows關機效果分析
使用Windows系統的使用者在關機的時候，出現的介面只允許使用者選擇關機、登出或取消動作，而案頭上的程式都不能使用，並且螢幕呈現灰色狀態。
本例將仿照這種高亮顯示的效果在網頁上實現.
在網頁上運用這種關機效果有什麼好處呢？首先，由於單擊某一連結後，將使用者此時停用操作隱藏在後台，將可用的操作放在螢幕最上層，並高亮顯示，可以避免使用者的誤操作。其次，將資訊高亮顯示，也可以提醒使用者應該注意的事項。
網頁中實現關機效果分析
在網頁中實現這種效果的原理很簡單。建立兩個圖層，一個為遮蓋層，覆蓋整個頁面，並且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設定圖層的z-index屬性來設定。當取消關機效果後，只需將這兩個圖層元素在頁面中刪除即可。
以下代碼實現顯示關機效果。
<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; /*設定該層在網頁的最上端,設定足夠大*/
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
}
#overlay {/*該層為覆蓋層*/
DISPLAY: block;
Z-INDEX: 9998; /*設定高亮層的下方*/
FILTER: alpha(opacity=80); /*設定成透明*/
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>標記，則該標記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。
在使用IE瀏覽器時，要先將網頁中的<select>元素隱藏起來。如以下代碼可以用於隱藏頁面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
代碼實現
用戶端代碼
用戶端的頁面上有兩個連結，使用者單擊連結後，向伺服器端發送請求，並將返回資訊顯示到高亮層上。用戶端的網頁檔案代碼如下所示：
<html>
<head>
<title>AJAX LightBox</title>
<!-- 本例使用的css樣式表檔案-->
<LINK href="lightbox.css" type=text/css rel=stylesheet>
<!--prototype類檔案-->
<script type="text/javascript" src="js/prototype.js" ></script>
<!--本例使用的javascript代碼-->
<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>
另外，還需要設定該頁面所使用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%
}
用戶端指令碼
由於瀏覽器對圖層的支援不同，所以首先要確定用戶端瀏覽器的類型。以下代碼可用於判斷用戶端的瀏覽器和作業系統。
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;
}
下面看一下網頁載入時需要添加的方法。有關網頁載入和初始化方法代碼如下：
//網頁載入調用initialize和getBrowserInfo方法
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
//未載入時清空緩衝
Event.observe(window, 'unload', Event.unloadCache, false);
//初始化方法
function initialize(){
//調用該方法為該頁添加覆蓋層和高亮顯示層
addLightboxMarkup();
//為每個可高亮顯示的元素建立lightbox對象
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// 使用Dom方法建立覆蓋層和高亮層
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類
初始化資料時，為每個可高亮顯示的連結建立了lightbox對象。該類的代碼具體實現如下：
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
//構造方法,ctrl為建立該對象的元素
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;};
},
//當單擊連結時
activate: function(){
if (browser == 'Internet Explorer'){//判斷為IE瀏覽器
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');//隱藏所有的<select>標記
}
//調用該類中的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;
//如果不是隱藏狀態,則調用該類中的loadInfo方法
if(display != 'none') this.loadInfo();
},
//該方法發送Ajax請求
loadInfo: function() {
//當請求完成後調用本類中processInfo方法
var myAjax = new Ajax.Request(
this.content,
{method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
);
},
// 將返回的文本資訊顯示到高亮層上
processInfo: function(response){
//獲得返回的文本資料
var result = response.responseText;
//顯示到高亮層
info = "<div id='lbContent'>" + result + "</div>";
//在info元素前插入一個元素
new Insertion.Before($('lbLoadMessage'), info)
//改變該元素的class name的值
$('lightbox').className = "done";
//調用本類中actions方法
this.actions();
var ctrl=$('lightbox');
//為高亮層添加事件處理方法reset
Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
//恢複初始狀態
reset:function(){
//隱藏覆蓋層
$('overlay').style.display="none";
//清空返回資料
$('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;};
}
}
}
提示：由於該對象比較複雜，讀者可以仔細參閱代碼的注釋部分。
伺服器端代碼
伺服器端首先獲得查詢中的“id”值，如果該值為null或為空白，則設定為預設值。然後判斷該值，並且返回相應的一段字串資訊。處理請求的getInfojsp頁面代碼如下：
<%@ page language="java" import="java.util.*"%>
<%
//獲得請求中id的值
String imgID = request.getParameter("id");
if (imgID==null||imgID.equals(""))//如果為null或為空白
imgID="one";//設定為預設值
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.
<%}%>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
