 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Tools standalone demo</title> 
<!-- include the Tools --> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<!-- standalone page styling (can be removed) --> 
<link rel="stylesheet" type="text/css" 
href="./overlay-basic.css"/> 
<style> 
/* some styling for triggers */ 
#triggers { 
text-align:center; 
} 
#triggers img { 
cursor:pointer; 
margin:0 5px; 
background-color:#fff; 
border:1px solid #ccc; 
padding:2px; 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
} 
/* styling for elements inside overlay */ 
.details { 
position:absolute; 
top:15px; 
right:15px; 
font-size:11px; 
color:#fff; 
width:150px; 
} 
.details h3 { 
color:#aba; 
font-size:15px; 
} 
</style> 
</head> 
<body><!-- trigger elements --> 
<div id="triggers"> 
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/> 
<img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" rel="#mies2"/> 
</div> 
<!-- overlays --> 
<div class="simple_overlay" id="mies1"> 
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" /> 
<div class="details"> 
<h3>The Barcelona Pavilion</h3> 
<h4>Barcelona, Spain</h4> 
<p> 
The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, 
was the German Pavilion for the 1929 International Exposition in 
Barcelona, Spain. It was an important building in the history of 
modern architecture. 
</p> 
<p> 
Several critics, historians and modernists have declared it "the 
most beautiful building of the century" 
</p> 
</div> 
</div> 
<div class="simple_overlay" id="mies2"> 
<img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548.jpg" /> 
<div class="details"> 
<h3>The Barcelona Pavilion</h3> 
<h4>Barcelona, Spain</h4> 
<p> 
Another unique feature of this building is the <em>exotic 
materials Mies chose to use</em>. 
</p> 
<p> 
Plates of high-grade stone materials like veneers of Tinos verde 
antico marble and golden onyx as well as tinted glass of grey, 
green, white, in addition to translucent glass, perform 
exclusively as spatial dividers. 
</p> 
</div> 
</div> 
<script> 
$(document).ready(function() { 
$("img[rel]").overlay({ 
closeOnClick:false, 
mask: 'darkred' 
}); 
}); 
</script> 
</body> 
</html> 

CSS

復制代碼代碼如下:

 
/* the overlayed element */ 
.simple_overlay { 
/* must be initially hidden */ 
display:none; 
/* place overlay on top of other elements */ 
z-index:10000; 
/* styling */ 
background-color:#333; 
width:675px; 
min-height:200px; 
border:1px solid #666; 
/* CSS3 styling for latest browsers */ 
-moz-box-shadow:0 0 90px 5px #000; 
-webkit-box-shadow: 0 0 90px #000; 
} 
/* close button positioned on upper right corner */ 
.simple_overlay .close { 
background-image:url(./close.png); 
position:absolute; 
right:-15px; 
top:-15px; 
cursor:pointer; 
height:35px; 
width:35px; 
} 

關閉的css的命名： xxx .close
性
以下列出的是所有可用的屬性選項:

屬性	默認值	描述
close		一個jQuery選擇器內(nèi)結束元素疊加。這些可以是任何元素,例如鏈接、按鈕或圖像。如果這不是提供的、親密的元素自動生成的。閱讀更多關于此在定義關閉行動。
closeOnClick	`true`	默認情況下,重疊是當鼠標關閉或者點擊區(qū)域外。適合模態(tài) 對話框。
closeOnEsc	`true`	默認情況下,覆蓋網(wǎng)絡時關閉鍵盤ESC鍵
effect	`'default'`	效果時要使用打開包裹, 關閉。這可以戲劇性地改變的行為疊加。默認情況下這個工具使用一種叫做'default'的影響這是一個簡單的顯示/隱藏效果。以下列出的是現(xiàn)在可用效果你也可以做你自己的效果。
fixed	`true`	自從1.2.0 。保持在相同的是否覆蓋位置,而屏幕滾動。這是默認適合所有瀏覽器的行為除了IE6和下面。 IE6不支持固定位置。如果這個屬性設置 false 然后是定位在覆蓋的關系到文檔,以便在屏幕上滾動然后疊加與文檔一起移動。
mask		之前被稱為暴露。覆蓋很經(jīng)常配合使用這個面具工具。因為這樣,支持這個特性已經(jīng)內(nèi)嵌式工具。這個選項接受這個面具配置。這不是一個簡單的字符串指定面具的背景顏色或更復雜的對象文字指定更多的配置變量。看到的一個例子疊加連同面具。默認情況下屏蔽是禁用的。
left	"center"	指定多遠從左邊的屏幕的邊緣了疊加應放置。默認情況下,橫向包裹集中值為"center",但你也可以提供一個數(shù)值指定的距離以像素為單位。
load	false	自從1.2.0 。如果啟用了然后覆蓋的負載后立即被初始化。
oneInstance	`true`	默認情況下,只可以有一個疊加在頁面。將這個屬性設置為 `假` 允許您有多個疊加實例。
speed	'normal'	淡入的速度動畫的'normal' 效果。有效值是 'slow', 'normal' 和 'fast',或者你也可以提供一個數(shù)值(以毫秒為單位)。通過設置這個屬性為0,則會出現(xiàn)滾動立即沒有任何動畫。
target		日程表的元素中指定的(如果不是這個 `rel` 屬性的觸發(fā)元素)。
top	'10%'	指定如何遠離屏幕的頂部邊緣的疊加應放置。可接受的值是一個整數(shù) 指定一個距離(以像素為單位),一個字符串(如“15%”) 指定百分比值或“中心”在這種情況下疊加是垂直居中。百分數(shù)工作一直保持在不同的屏幕分辨率。

事件
確保你已經(jīng)閱讀大約事件 jQuery工具。所有事件監(jiān)聽器接收這個事件對象作為第一個參數(shù)并沒有其他參數(shù) 為疊加。

事件	什么時候發(fā)生的?
onBeforeLoad	疊加顯示之前。疊加已經(jīng) 定位在該位置將從那里開始動畫。
onload	當疊加已經(jīng)完全被顯示
onBeforeClose	關閉之前的疊加
onClose	當疊加是關閉的

腳本 API
首先確保你已經(jīng)了解你自己與 jQuery工具腳本。以下列出的是所有可用的API方法:

方法	返回值類型	描述
close()	Overlay	關閉疊加。
getClosers()	`jQuery`	返回結束元素(s)作為一個jQuery對象。
getConf()	`對象`	將配置為疊加。
getOverlay()	`jQuery`	返回元素作為一個jQuery對象日程表。
getTrigger()	`jQuery`	返回元素作為一個jQuery對象觸發(fā)。
isOpened()	boolean	返回 `真正的` 如果打開包裹。
load()	Overlay	打開疊加。

明天再更新下時間那個就要為這個畫一個句話。

　　tab：傳送門
　　tab(幻燈片)：傳送門
　　tooltip：傳送門
　　overlay：傳送門
　　dateinput：傳送門
在攜程做著framework2.0，研究的卻是framework4.0，當時是怎么想的T.T。全是TMD老技術和堆代碼

您可能感興趣的文章: