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
/* 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)閉的 |
首先確保你已經(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 | 打開疊加。 |
tab:傳送門
tab(幻燈片):傳送門
tooltip:傳送門
overlay:傳送門
dateinput:傳送門
在攜程做著framework2.0,研究的卻是framework4.0,當(dāng)時(shí)是怎么想的T.T。全是TMD老技術(shù)和堆代碼
相關(guān)文章
jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次,現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。2010-11-11
jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過彈出二級(jí)下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁(yè)面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
JQuery實(shí)現(xiàn)的在新窗口打開鏈接的方法小結(jié)
jQuery 實(shí)現(xiàn)在新窗口中打開鏈接方法,收集了幾個(gè),大家可以根據(jù)需要選擇使用。2010-04-04
autoIMG 基于jquery的圖片自適應(yīng)插件代碼
為了防止圖片撐破布局,最常見的仍然是通過onload后獲取圖片尺寸再進(jìn)行調(diào)整,所以加載過程中仍然會(huì)撐破。2011-03-03
基于jQuery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配功能,自動(dòng)匹配搜索關(guān)鍵詞功能廣泛應(yīng)用到搜索引擎當(dāng)中,感興趣的小伙伴們可以參考一下2015-10-10
關(guān)于jquery動(dòng)態(tài)增減控件的一些想法和小插件
這段代碼壓縮到100行內(nèi),而且擴(kuò)展方便,可以非常輕松的增減控件的數(shù)量,使用非常簡(jiǎn)單。2010-08-08
jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
這篇文章主要介紹了jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)輪播圖相關(guān)資料,經(jīng)過一段時(shí)間學(xué)習(xí)jquery 的知識(shí),這里寫一個(gè)簡(jiǎn)單的輪播圖,需要的朋友可以參考下2016-10-10

