本文實(shí)例講述了jquery彈出框插件jquery.ui.dialog用法。分享給大家供大家參考，具體如下：
1. jquery.ui.dialog
官方地址 http://jqueryui.net/dialog/
jquery.ui.dialog是一個(gè)非常靈活的模式框,它的官方地址為: http://docs.jquery.com/UI/Dialog
2. 文件引用
要使用jquery.ui.dialog,需要引用兩個(gè)文件，1個(gè)是js，另外1個(gè)是css
在contentpage中添加：
<script type="text/javascript" src="/Content/ui.js"></script>
在masterpage中添加：
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
3. 使用方法
jquery.ui.dialog相比thinkbox要有優(yōu)勢，thinkbox是在$.ready中指定的，導(dǎo)致不能靈活的擴(kuò)展彈出層的彈出時(shí)機(jī)，針對一個(gè)邏輯判斷，一種情況下彈出，另外一種不彈出,thinkbox就缺乏應(yīng)變能力，而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得彈出更加靈活
1)彈出簡單的對話框
$("#dialog").dialog();2）彈出模式對話框
$("#dialog").dialog({ modal: true });3）彈出模式對話框，并有遮罩效果
4）帶確定與取消按鈕
$("#dialog").dialog("close");<!DOCTYPE html><html><head> <link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#dialog").dialog(); }); </script></head><body style="font-size:62.5%;"><div id="dialog" title="Dialog Title">I'm in a dialog</div></body></html><!DOCTYPE html><html><head> <link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#dialog").dialog(); }); </script></head><body style="font-size:62.5%;"><div id="dialog" title="Dialog Title">I'm in a dialog</div></body></html>jQuery boxy
使用該jQuery插件
要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合適的選擇器表達(dá)式替換這里的"selector"，例如："a[rel=boxy],form.with-confirmation"。這會(huì)給匹配的元素附加一些行為，如下：
① 一個(gè)href屬性中如果錨點(diǎn)包含#，則此錨點(diǎn)相對應(yīng)的ID的DOM元素的內(nèi)容就會(huì)被添加到boxy對話框中。
② 如果href錨點(diǎn)內(nèi)容為其他一些東西，則會(huì)試圖使用Ajax載入其對應(yīng)的內(nèi)容。理想情況下，我們有相同的起源檢查和委托對框架的跨域請求。這將會(huì)在下面展示。
③ 表單上會(huì)顯示一個(gè)提交模式的確認(rèn)消息。
使用方法
使用下載包中的三個(gè)文件！
<script type ="text/javascript " src ="../js/jquery.boxy.js "> </script>
<link rel ="stylesheet " href ="../css/boxy.css " type ="text/css " />
基本的插件用法：
<script type="text/javascript">$(function(){ $(".boxy").boxy(); });</script>請注意，boxy對話框自動(dòng)計(jì)算出您的內(nèi)容區(qū)域內(nèi)本身的大小和位置，沒有必要明確規(guī)定了包裝集的尺寸。
<link rel ="stylesheet" href ="../css/common.css" type ="text/css" />
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
