jQuery-Tools-overlay 使用介紹

更新時(shí)間：2012年07月14日 11:02:59 作者：

jQuery-Tools-overlay 使用介紹，需要的朋友可以參考下

 
<!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

復(fù)制代碼代碼如下:

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

關(guān)閉的css的命名： xxx .close
性
以下列出的是所有可用的屬性選項(xiàng):

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

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

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

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

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

明天再更新下時(shí)間那個(gè)就要為這個(gè)畫一個(gè)句話。

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

您可能感興趣的文章: