欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

本文實例講述了jquery彈出框插件jquery.ui.dialog用法。分享給大家供大家參考，具體如下：

1. jquery.ui.dialog

官方地址 http://jqueryui.net/dialog/

jquery.ui.dialog是一個非常靈活的模式框,它的官方地址為: http://docs.jquery.com/UI/Dialog

2. 文件引用

要使用jquery.ui.dialog,需要引用兩個文件，1個是js，另外1個是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中指定的，導致不能靈活的擴展彈出層的彈出時機，針對一個邏輯判斷，一種情況下彈出，另外一種不彈出,thinkbox就缺乏應變能力，而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得彈出更加靈活

1)彈出簡單的對話框

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

2）彈出模式對話框

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

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

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

4）帶確定與取消按鈕

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

5）如何關閉對話框

$("#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中。使用合適的選擇器表達式替換這里的"selector"，例如："a[rel=boxy],form.with-confirmation"。這會給匹配的元素附加一些行為，如下：

① 一個href屬性中如果錨點包含#，則此錨點相對應的ID的DOM元素的內容就會被添加到boxy對話框中。

② 如果href錨點內容為其他一些東西，則會試圖使用Ajax載入其對應的內容。理想情況下，我們有相同的起源檢查和委托對框架的跨域請求。這將會在下面展示。

③ 表單上會顯示一個提交模式的確認消息。

使用方法

使用下載包中的三個文件！

<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對話框自動計算出您的內容區(qū)域內本身的大小和位置，沒有必要明確規(guī)定了包裝集的尺寸。

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

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

最新評論