|
|
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.
<%}%>
JavaScript技術：用JavaScript實現仿Windows關機效果，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
