瘋狂的Lightbox

原文：http://particletree.com/features/lightbox-gone-wild/
?

1.Lightbox簡介：

LightBox是一個很棒的模組窗口Javascript包，用它展示信息，要比新開個窗口，或者強制彈出一個頁面都來的要好.
?
SpringSide2中在書店前臺用戶登錄里引入了LightBox。?

2.LightBox使用

2.1 所需文件

springside將lightbox文件都放在了widgets/lightbox目錄里?，要注意的是，必須要有激發LightBox效果的語句，才好引用lightbox.js，否則會js出錯。

<script src="${ctx}/scripts/prototype.js"? type="text/javascript"></script>
<script src="${ctx}/widgets/lightbox/lightbox.js" type="text/javascript"></script>
<link href="${ctx}/widgets/lightbox/lightbox.css" type="text/css" rel="stylesheet">

2.2 激發LightBox效果

僅僅通過 class="lbOn"即可完成這個效果，會用lightbox打開login.jsp

<a href="login.jsp"? class="lbOn">SignUp</a>

2.3 退出LightBox效果

也是僅僅使用class="lbAction" rel="deactivate"

<a href="#" class="lbAction" rel="deactivate">Cancel<a>

2.4 在LightBox內部連接至另外一個頁面：

直接使用a href連接過去即可，class仍然使用 class="lbAction" ,rel="insert";

<a href="confirm.html" class="lbAction" rel="insert">Go to Another Lightbox</a>

2.5 遮蓋效果配置

??? 修改lightbox.css

#overlay {
?display: none;
?position: absolute;
?top: 0;
?left: 0;
?width: 100%;
?height: 100%;
?z-index: 5000;
?background-color: #000;
?-moz-opacity: 0.5;
?opacity: .50;
?filter: alpha( opacity = 50 );
}

3. LightBox工作原理：

?當用戶點擊了class="lbOn"樣式的a href連接，一個透明層會覆蓋頁面頂層，并且在第一次載入的調入下面這些：
?

<div id="overlay"></div>
<div id="lightbox">
??? <div id="lbLoadMessage">
??????? <p>Loading</p>
??? </div>
</div>

? 如果想改變載入事的消息，只需要修改 <div id="lightbox">中的<div id="lbLoadMessage">的信息，如改為 "載入中"。

??載入的代碼如下：

?function initialize(){
???? lbox = document.getElementsByClassName('lbOn');
???? for(i = 0; i < lbox.length; i++) {
???????? valid = new lightbox(lbox[i]);
???? }
}

CSS覆蓋效果代碼:

#lightbox{
??? display:none;
??? position: absolute;
??? top:50%;
??? left:50%;
??? z-index:9999;
??? width:500px;
??? height:400px;
??? margin:-220px 0 0 -250px;
??? }
#lightbox[id]{ /* IE6 and below Can't See This */
??? position:fixed;
??? }

#overlay{
??? display:none;
??? position:absolute;
??? top:0;
??? left:0;
??? width:100%;
??? height:100%;
??? z-index:5000;??
??? background-color:#000;
??? -moz-opacity: 0.8;
??? opacity:.80;
??? filter: alpha(opacity=80);
??? }
#overlay[id]{ /* IE6 and below Can't See This */
??? position:fixed;
??? }

覆蓋IE的html動過下面這段：

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;
}

??

getScroll() & setScroll()getScroll:function (){
    var yScroll;

    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } elseif (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
    } elseif (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
    }
        this.yPos = yScroll;
}
setScroll:function(x, y){
    window.scrollTo(x, y);
}

在IE中,select表單位于頁面的頂層，<DIV/>會覆蓋不掉，同樣的FireFox中的Flash8夜是如此，我們都過以下代碼吧它們遮蓋掉。

hideSelects()

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

4. Lightbox Class介紹

初始化時：
initialize

initialize: function(ctrl) {
      this.content = ctrl.href;
      Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
     ctrl.onclick = function(){returnfalse;};
}

激活時：

activate(): 

activate: function(){
    if (browser == 'Internet Explorer'){
        this.getScroll();
        this.prepareIE('100%', 'hidden');
        this.setScroll(0,0);
        this.hideSelects('hidden');
    }
    this.displayLightbox("block");
},

displayLightbox(): 

displayLightbox: function(display){
    $('overlay').style.display = display;
    $('lightbox').style.display = display;
   if(display \!= 'none') this.loadInfo();
},

loadInfo(): 

loadInfo: function() {
    var myAjax = new Ajax.Request(
    this.content,

    {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
    );
},

processInfo(): 

processInfo: function(response){
    info = "<div id='lbContent'>" + response.responseText + "</div>";
    new Insertion.Before($('lbLoadMessage'), info)
    $('lightbox').className = "done";
    this.actions();
},

actions(): 

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>

actions預先先吧 class="lbAction"給讀取到了。這樣點擊的時候，就知道改做什么動作了。主要包括 rel="deactiveate" 和 rel="insert";

actions:function(){
lbActions = document.getElementsByClassName('lbAction');

for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this\[lbActions[i].rel\].bindAsEventListener(this), false);
lbActions[i].onclick = function()
{returnfalse;}

;
}
},

deactivate() 退出Ligthbox

如果退出LightBox 就使用rel = deactivate 代碼如下：

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
deactivate:function (){
Element.remove($('lbContent'));

if (browser == "Internet Explorer")
{ this.setScroll(0,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }

this.displayBlock("none");
}

insert() 在LightBox內部跳轉

在lightbox內部，連接至另外一個頁面，就通過insert方法

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));

var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},