jQuery boxy彈出層插件中文演示及使用講解
要想使用該jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合適的選擇器表達(dá)式替換這里的"selector",例如:"a[rel=boxy],form.with-confirmation"。這會給匹配的元素附加一些行為,如下:
一個href屬性中如果錨點(diǎn)包含#,則此錨點(diǎn)相對應(yīng)的ID的DOM元素的內(nèi)容就會被添加到boxy對話框中。
如果href錨點(diǎn)內(nèi)容為其他一些東西,則會試圖使用Ajax載入其對應(yīng)的內(nèi)容。理想情況下,我們有相同的起源檢查和委托對框架的跨域請求。這將會在下面展示。
表單上會顯示一個提交模式的確認(rèn)消息。
其他的元素將會被忽略
手動創(chuàng)建實(shí)例
用手動模式使用boxy是很容易的——只需要創(chuàng)建一個boxy的新實(shí)例,傳遞一些內(nèi)部的內(nèi)容和任何附加的散列對象。在默認(rèn)情況下,對話框會立即顯示出來,在視角的中心,可拖拽。所有的這些設(shè)置都可以通過給構(gòu)造函數(shù)傳遞附加的對象來進(jìn)行覆蓋——更多詳情請參見下面的構(gòu)造函數(shù)選項(xiàng)
傳遞給構(gòu)造函數(shù)的內(nèi)容可以是任何有效的參數(shù),jQuery的$()函數(shù)- DOM元素,是HTML片斷或其他jQuery對象。無論提供的是什么,其display屬性均被設(shè)置為block,并插入名為boxy-content的class在對話框中。
下面為一些代表性的示例:
- 創(chuàng)建一個新的對話框,new Boxy("<p>內(nèi)容……</p>", {title: "對話框"});。
- 創(chuàng)建一個新對話框,無法拖拽。new Boxy("<p>內(nèi)容……</p>", {title: "對話框", draggable: false});。
- 創(chuàng)建一個新的對話框,沒有默認(rèn)的關(guān)閉按鈕。new Boxy("<p>內(nèi)容……</p>", {title: "對話框", closeable:false});。
- 新建對話框,使用absolute絕對定位(跟隨滾動條)new Boxy("<p>內(nèi)容……</p>", {title: "對話框, fixed:false"});。
- 新建對話框,模態(tài)的new Boxy("<p>內(nèi)容……</p>", {title: "對話框, modal:true"});。
- 新建對話框,自定義行為new Boxy("<p>內(nèi)容……</p>", {behaviours: function(r) { $(r).hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "white"); }); }});。
修改現(xiàn)有的對話(先打開一個對話框,然后再單擊下面的鏈接事件)
- 讓最新的對話框放大的動畫 - someDialog.tween(400, 400);
- 讓最新的對話框減小的動畫 - someDialog.tween(100, 100);
- 獲取最新的對話框的標(biāo)題 - someDialog.getTitle();。
- 更改最新的對話框的標(biāo)題 -
請注意,標(biāo)題欄(也就是關(guān)閉按鈕和拖動器)只有在標(biāo)題指定的情況下會出現(xiàn),在未來,這種行為可能會發(fā)生變化,使標(biāo)題欄始終存在,除非特別禁用。
一旦您創(chuàng)建了一個實(shí)例,您可以將通過提供的API分配給一個變量,隨后移動,改變大小,顯示和隱藏 - 記錄如下。
提問
使用Boxy.ask(),Boxy.alert()和Boxy.confirm()這些幫手可能提示用戶從一些選項(xiàng)中進(jìn)行選擇以及完成可選的回調(diào)函數(shù)。點(diǎn)擊下面含有演示的鏈接,參考API文檔獲取更多信息。
- 提問 - Boxy.ask() - 用戶定義的選項(xiàng),選擇項(xiàng)傳遞給回調(diào)函數(shù)
- 彈出 - Boxy.alert() - 回調(diào)函數(shù)總是不被調(diào)用
- 確認(rèn) - Boxy.confirm() - 僅當(dāng)用戶選擇了“確認(rèn)”時回調(diào)函數(shù)會被調(diào)用
<script type='text/javascript'>
$(function() {
$("#ask").click(function() {
Boxy.ask("你感覺怎么樣?", ["好極了", "還好", "不太好"], function(val) {
alert("你選擇的是: " + val);
}, {title: "這是一個問題……"});
return false;
});
$("#alert").click(function() {
Boxy.alert("文件未找到", null, {title: "提示信息"});
return false;
});
$("#confirm").click(function() {
Boxy.confirm("請確認(rèn):", function() { alert("已經(jīng)確認(rèn)!"); }, {title: "提示信息"});
return false;
});
});
</script>
Boxy.load(url, options)
- 類型 - HTTP方法,默認(rèn)為GET
- 緩存 - 如果是true,緩存內(nèi)容連續(xù)通話。相當(dāng)于緩存選項(xiàng)傳遞到j(luò)Query的Ajax方法。默認(rèn):false。
- 過濾 - jQuery的表達(dá)式,用于過濾遠(yuǎn)程內(nèi)容。
Boxy.get(element)
<a href="#" onclick="Boxy.get(this).hide();">關(guān)閉對話框</a>Boxy.ask(question, answers, callback, options)
Boxy.alert(message, callback, options)
注意:此方法并不是為了取代瀏覽器本地window.alert()函數(shù)提供,因?yàn)樗鼪]有能力阻止程序執(zhí)行,在對話框是可見的時候。
Boxy.confirm(message, callback, options)
注意:此方法并不是為了取代瀏覽器提供的本地window.confirm()函數(shù),因?yàn)樗鼪]有能力在對話框可見時阻止程序執(zhí)行的。
Boxy.linkedTo(ele)
Boxy.isModalVisible()
new Boxy(element, options)
estimateSize()
getSize()
getContentSize()
getPosition()
getCenter()
getInner()
getContent()
setContent(newContent)
moveTo(x,y)
centerAt(x,y)
center(axis)
resize(w,h,after)
tween(w,h,after)
isVisible()
show()
hide(after)
toggle()
hideAndUnload(after)
unload()
toTop()
getTitle()
setTitle(t)
- 選項(xiàng)
- 描述
- 默認(rèn)
- title
- 顯示在自動生成標(biāo)題欄上的標(biāo)題
- null
- closeable
- 是否一個關(guān)閉對話框的驅(qū)動器要添加到自動生成標(biāo)題欄上。如果標(biāo)題沒有指定是沒有影響的。
- true
- closeText
- 在可用情況下標(biāo)題欄關(guān)閉鏈接的文字
- "[關(guān)閉]"
- draggable
- 是否對話框可以通過標(biāo)題欄進(jìn)行拖拽。標(biāo)題未指定沒有影響。
- true
- clone
- 內(nèi)部區(qū)域的元素以及事件處理程序應(yīng)不應(yīng)該在被替換之前進(jìn)行復(fù)制。
- false
- actuator
- DOM元素(不包括jQuery對象),引發(fā)此對話框。兩者之間的聯(lián)系將被建立,此聯(lián)系允許對話框的參照稍后在通過執(zhí)行Boxy.linkedTo(element)獲取的元素中進(jìn)行檢索。當(dāng)對話框被卸載,此聯(lián)系也會被自動切斷。
- null
- center
- 對話框是否屏幕中心顯示
- true
- fixed
- 是否使用固定定位(fixed)而不是絕對定位(absolute),固定定位的對話框不受瀏覽器滾動條影響。IE6不支持固定定位,其永遠(yuǎn)表現(xiàn)為絕對定位。
- true
- show
- 對話框是否需要立即顯示,如果是false,則需要你手動調(diào)用dialog.show()以顯示對話框。
- true
- modal
- 對話框是否設(shè)置為模態(tài)。模態(tài)時,瀏覽器背景“黑黑的”,阻止頁面的其他元素接受事件。
- false
- x
- 對話框的x(left)坐標(biāo)
- 50
- y
- 對話框的y(top)坐標(biāo)
- 50
- unloadOnHide
- 如果是true,則在此對話框隱藏后會被卸載(如從DOM中刪除)
- false
- clickToFront
- 如果是true,則單擊對話框的任意位置(只是相對于標(biāo)題欄),會導(dǎo)致其跑到頂部。
- false
- behaviours
- 函數(shù)用來申請對話框內(nèi)容的自定義行為。每次調(diào)用setContent(),且在Boxy對象中的上下文中執(zhí)行,將接受一個包含內(nèi)容區(qū)域的jQuery對象作為參數(shù)。
- function(r){}
- afterDrop
- 當(dāng)對話框放下的時候在Boxy對象的上下文執(zhí)行回調(diào)函數(shù)。
- function(){}
- afterShow
- 當(dāng)對話框顯示的時候在Boxy對象的上下文執(zhí)行回調(diào)函數(shù)。能夠用來使表單的文本框獲取焦點(diǎn)。
- function(){}
- afterHide
- 當(dāng)對話框隱藏的時候在Boxy對象的上下文執(zhí)行回調(diào)函數(shù)。
- fuuction(){}
- beforeUnload
- 在對話框卸載前在Boxy對象的上下文執(zhí)行回調(diào)函數(shù)。
- function(){}
可以通過css完全定制對話框的外觀,這里的是您可能感興趣的選擇器列表。
.boxy-wrapper .title-bar
.boxy-wrapper .title-bar h2
.boxy-wrapper .title-bar.dragging
.boxy-wrapper .title-bar .close
.boxy-inner
.boxy-content
.boxy-wrapper .question
.boxy-wrapper .answers
.close
在線演示 http://demo.jb51.net/js/2011/jquery-plugin-boxy/page/jQuery-plugin-boxy.html
打包下載 http://xiazai.jb51.net/201102/yuanma/jquery-plugin-boxy.rar
- jQuery彈出層插件popShow用法示例
- jQuery Dialog 彈出層對話框插件
- JQUERY THICKBOX彈出層插件
- jQuery彈出層插件簡化版代碼下載
- Jquery 彈出層插件實(shí)現(xiàn)代碼
- 基于jquery的blockui插件顯示彈出層
- jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層插件
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- 一個jquery的彈出層的插件
- js彈出層(jQuery插件形式附帶reLoad功能)
- Jquery實(shí)現(xiàn)彈出層分享微博插件具備動畫效果
- jQuery彈出層插件Lightbox_me使用指南
- Jquery彈出層插件ThickBox的使用方法
- jQuery彈出層插件popShow(改進(jìn)版)用法示例
相關(guān)文章
基于 jQuery 實(shí)現(xiàn)鍵盤事件監(jiān)聽控件
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下2019-04-04
jQuery實(shí)現(xiàn)的一個自定義Placeholder屬性插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)的一個自定義Placeholder屬性插件,本文最后附有插件完整源碼,需要的朋友可以參考下2014-08-08
jQuery制作全屏寬度固定高度輪播圖(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query制作全屏寬度固定高度輪播圖(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得總結(jié)【經(jīng)典收藏】
這篇文章主要介紹了15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得,詳細(xì)總結(jié)分析了jQuery常用的開發(fā)技巧,需要的朋友可以參考下2016-05-05
jquery全選/全不選/反選另一種實(shí)現(xiàn)方法(配合原生js)
本文主要介紹下jquery另一種全選、全不選、反選的方式(與原生js混合使用),感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04
jQuery實(shí)現(xiàn)頁面滾動時智能浮動定位
本文主要介紹了jQuery實(shí)現(xiàn)頁面滾動時智能浮動定位的方法。附上完整代碼,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01
jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動畫過渡效果都是通過easing函數(shù)實(shí)現(xiàn)的,下面是自己研究之后對其的基本認(rèn)識2014-08-08
jQuery實(shí)現(xiàn)注冊會員時密碼強(qiáng)度提示信息功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)注冊會員時密碼強(qiáng)度提示信息功能,涉及jQuery事件響應(yīng)及字符串的遍歷、運(yùn)算與判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
jquery radio的取值_radio的選中_radio的重置方法
下面小編就為大家?guī)硪黄猨query radio的取值_radio的選中_radio的重置方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09

