如何讓excel數字變成大寫
1031
2023-11-21
本文實例講述了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="http://www.gimoo.net/Content/ui.js"></script>
在masterpage中添加：
<link rel="stylesheet" type="text/css">
3. 使用方法
jquery.ui.dialog相比thinkbox要有優勢，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 rel="stylesheet" type="text/css"/>
<script src="http://www.gimoo.net/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://www.gimoo.net/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 rel="stylesheet" type="text/css"/>
<script src="http://www.gimoo.net/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://www.gimoo.net/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 ="http://www.gimoo.net/t/js/jquery.boxy.js "> </script>
<link rel ="stylesheet " type ="text/css " />
基本的插件用法：
<script type="text/javascript">
$(function(){ $(".boxy").boxy(); });
</script>
請注意，boxy對話框自動計算出您的內容區域內本身的大小和位置，沒有必要明確規定了包裝集的尺寸。
<link rel ="stylesheet" type ="text/css" />
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
