jQuery-Tools-overlay 使用介紹

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

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

<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老技術和堆代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery-Tools-overlay 使用介紹

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support