jQuery Tools——不可錯過的jQuery UI庫（四）

作者: IIduce 來源: css9 發布時間: 2009-12-23 21:31 閱讀: 13095 次推薦: 2 原文鏈接 [收藏]

　　接上篇，繼續jQuery Tools的講解。本篇講解jQuery Tools中十分有用的一個組件——遮罩效果（overlay）。遮罩效果的實現包含兩個部分：觸發遮罩效果的元素（觸發器），及事件觸發后，頁面上方彈出的遮罩層元素。

　　下面看一個最簡單的例子（點擊關閉按鈕或觸發按鈕或esc鍵，關閉overlay）：

　　HTML Code:

<!-- 定義一個按鈕作為觸發器. 這里通過rel屬性，指定遮罩層元素的id --> 
<button type="button" rel="#overlay">Open overlay</button>
 
<!-- 遮罩元素，你可以通過樣式表定義樣式 --> 
<!-- 遮罩元素可以使任何html元素，一般我們用div，注意id的設定 --> 
<div class="overlay" id="overlay"> 
    <!--這里是遮罩層里面要放的東西 --> 
    <h2 style="margin:10px 0">Here is my overlay</h2>  
    <p style="float: left; margin:0px 20px 0 0;"> 
        <img src="http://static.flowplayer.org/img/title/eye192.png" /> 
    </p>  
    <p> 
         Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
         per inceptos himenaeos. Donec lorem ligula, elementum vitae, 
         imperdiet a, posuere nec, ante. Quisque mattis massa id metus. 
    </p> 
</div>

　　Javascript Code：

$(function() { 
   //為頁面中所有擁有rel屬性的button元素綁定overlay效果
    $("button[rel]").overlay();    
});

　　CSS是可以由你自由定義的，上面示例的效果用的是官方提供的，如下供參考：

/* overlay元素*/ 
div.overlay { 
 
    /* overlay背景圖 */ 
    background-image:url(http://flowplayer.org/tools/img/overlay/white.png); 
 
    /* overlay的最終尺寸，可以由此改變overlay大小  */ 
    width:600px; 
    height:470px;         
 
    /* overlay默認隱藏 */ 
    display:none; 
 
    /* 設定內嵌元素padding，獲得好的視覺效果  */ 
    padding:55px; 
} 
 
/* 關閉按鈕樣式， 放置在右上角 */ 
div.overlay div.close { 
    background-image:url(http://flowplayer.org/tools/img/overlay/close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

　　上面的示例均使用了默認配置，實際上overlay組件有許多參數可配置，所有參數可以參考這里，在下面這個例子中，配置了一些參數：

Javascript Code：

$(function() { 
    $("button.overlaybutton").overlay({ 
        // 設置參數
        expose: {    //啟用expose效果
            color: '#BAD0DB',       //expose顏色
            opacity: 0.7,            //expose透明度
            closeSpeed: 1000     //expose關閉速度
        },
        finish: {top: 'center'}    //設置消失方向
    }); 
});