. 代碼如下:
<!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選擇器內結束元素 疊加。 這些可以是任何元素,例如鏈接、按鈕或 圖像。 如果這不是提供的、親密的元素 自動生成的。 閱讀更多關於此 在 定義關閉行動 。
closeOnClick
true
默認情況下,重疊是當鼠標關閉或者 點擊區域外。 適合 模態 對話框 。
closeOnEsc
true
默認情況下,覆蓋網絡時關閉鍵盤ESC鍵
effect
'default'
效果時要使用打開包裹, 關閉。 這可以戲劇性地改變的行為 疊加。 默認情況下這個工具使用一種叫做'default'的影響 這是一個簡單的顯示/隱藏效果。
以下列出的是現在 可用 效果 你也可以 做你自己的 效果 。
fixed
true
自從1.2.0 。 保持在相同的是否覆蓋 位置,而屏幕滾動。 這是默認 適合所有浏覽器的行為除了IE6和下面。 IE6不 支持固定位置。 如果這個屬性設置 false
然後是定位在覆蓋的 關系到文檔,以便在屏幕上滾動 然後疊加與文檔一起移動。
mask
之前被稱為
暴露 。 覆蓋很 經常配合使用 這個 面具工具 。 因為 這樣,支持這個特性已經內嵌式 工具。 這個選項接受 這個 面具 配置 。 這不是一個簡單的字符串指定 面具的背景顏色或更復雜的對象文字 指定更多的配置變量。
看到的一個例子 疊加 連同面具 。 默認情況下屏蔽是禁用的。
left
"center"
指定多遠從左邊的屏幕的邊緣了 疊加應放置。 默認情況下,橫向包裹 集中值為"center",但你也可以提供一個 數值指定的距離以像素為單位。
load
false
自從1.2.0 。 如果啟用了然後覆蓋的負載 後立即被初始化。
oneInstance
true
默認情況下,只可以有一個疊加在頁面。 將這個屬性設置為
假 允許您 有 多個 疊加實例 。
speed
'normal'
淡入的速度動畫的'normal' 效果。 有效值是 'slow', 'normal' 和 'fast',或者你也可以 提供一個數值(以毫秒為單位)。 通過設置這個 屬性為0,則會出現滾動立即沒有任何 動畫。
target
日程表的元素中指定的(如果不是 這個
rel 屬性的觸發元素)。
top
'10%'
指定如何遠離屏幕的頂部邊緣的疊加 應放置。 可接受的值是一個整數 指定一個距離(以像素為單位),一個字符串(如“15%”) 指定百分比值或“中心”在這種情況下 疊加是垂直居中。 百分數工作 一直保持在不同的屏幕分辨率。
事件
確保你已經閱讀 大約 事件 jQuery工具 。 所有事件監聽器接收 這個 事件 對象 作為第一個參數並沒有其他參數 為疊加。
事件 |
什麼時候發生的? |
onBeforeLoad
疊加顯示之前。 疊加已經 定位在該位置將從那裡開始動畫。
onload
當疊加已經完全被顯示
onBeforeClose
關閉之前的疊加
onClose
當疊加是關閉的
腳本 API
首先確保你已經了解你自己 與 jQuery工具 腳本 。 以下列出的是所有可用的API方法:
方法 |
返回值類型 |
描述 |
close()
Overlay
關閉疊加。
getClosers()
jQuery
返回結束元素(s)作為一個jQuery對象。
getConf()
對象
將配置為疊加。
getOverlay()
jQuery
返回元素作為一個jQuery對象日程表。
getTrigger()
jQuery
返回元素作為一個jQuery對象觸發。
isOpened()
boolean
返回
真正的 如果打開包裹。
load()
Overlay
打開疊加。 明天再更新下時間那個就要為這個畫一個句話。
tab：傳送門
tab(幻燈片)：傳送門
tooltip：傳送門
overlay：傳送門
dateinput：傳送門
在攜程做著framework2.0，研究的卻是framework4.0，當時是怎麼想的T.T。全是TMD老技術和堆代碼