亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jquery彈出框插件jquery.ui.dialog用法分析

 更新時(shí)間：2016年08月20日 14:54:31   作者：xiangqian0505  
這篇文章主要介紹了jquery彈出框插件jquery.ui.dialog用法,結(jié)合實(shí)例形式分析了彈出框插件jquery.ui.dialog的功能、下載、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(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)勢(shì)，thinkbox是在$.ready中指定的，導(dǎo)致不能靈活的擴(kuò)展彈出層的彈出時(shí)機(jī)，針對(duì)一個(gè)邏輯判斷，一種情況下彈出，另外一種不彈出,thinkbox就缺乏應(yīng)變能力，而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得彈出更加靈活

1)彈出簡(jiǎn)單的對(duì)話框

$("#dialog").dialog();

2）彈出模式對(duì)話框

$("#dialog").dialog({ modal: true });

3）彈出模式對(duì)話框，并有遮罩效果

復(fù)制代碼 代碼如下:
$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });

4）帶確定與取消按鈕

復(fù)制代碼 代碼如下:
$("#dialog").dialog({ buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } } });

5）如何關(guān)閉對(duì)話框

$("#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)相對(duì)應(yīng)的ID的DOM元素的內(nèi)容就會(huì)被添加到boxy對(duì)話框中。

② 如果href錨點(diǎn)內(nèi)容為其他一些東西，則會(huì)試圖使用Ajax載入其對(duì)應(yīng)的內(nèi)容。理想情況下，我們有相同的起源檢查和委托對(duì)框架的跨域請(qǐng)求。這將會(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>

請(qǐng)注意，boxy對(duì)話框自動(dòng)計(jì)算出您的內(nèi)容區(qū)域內(nèi)本身的大小和位置，沒(méi)有必要明確規(guī)定了包裝集的尺寸。

<link rel ="stylesheet" href ="../css/common.css" type ="text/css" />

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論