方維中的彈出對話框的使用即weeboxs 的基本應用

2024-04-25 20:44:45

字體：大中小

來源：轉載

供稿：網友

方維分享系統中的彈出對話框，用的是weeboxs ，這個用著很不錯，下面總結下weeboxs 基本參數及用法
使用前需包含以下jquery.js、bgiframe.js、weebox.js、weebox.css文件，這個方維都包含的有了。

boxid: null, //設定了此值只后，以后在打開同樣boxid的彈窗時，前一個將被自
動關閉
boxclass: null, //給彈窗設置其它的樣式，用此可以改變彈窗的樣式
type: 'dialog', //彈窗類型，目前有dialog,error,warning,success,wee,prompt,
box六種
title: '', //彈窗標題
width: 0, //彈窗寬度,不設時，會自動依據內容改變大小
height: 0, //彈窗高度(注意是內容的高度,不是彈窗的高度)
timeout: 0, //自動關閉的秒數，設置此值后，窗口將自動關閉
draggable: true,//是否可以拖拽
modal: true, //是否顯示遮照
overlay: 75, //遮照透明度
focus: null, //彈窗打開后，焦點移到什么元素上，默認移到取消按鈕到
position: 'center',//彈窗打開后的默認為中間，設置為element時，需要設置
trager選項，
trigger: null, //顯示位置的參照元素，為一個元素id
showTitle: true,//是否顯示標題
showButton: true,//是否顯示按鈕，包括確定和取消
showCancel: true, //是否顯示取消按鈕
showOk: true, //是否顯示確定按鈕
okBtnName: '確定',//"確定"按鈕名稱
cancelBtnName: '取消',//"取消"按鈕名稱
contentType: 'text',//內容獲取方式，目前有三種text,selector,ajax
contentChange: false,//為selector時
clickClose: false, //點擊不在彈窗上時，是否關閉彈窗
zIndex: 999,//默認彈窗的層
animate: false,//效果顯示
onclose: null, //彈窗關閉時觸發的函數
onopen: null, //彈窗顯示前觸發的函數, 此時內容已經放入彈窗中，不過還沒有顯示出來
onok: null ,//點擊確定按鈕后
oncancel:null //點擊取消按鈕觸發函數
$.weeboxs.open('The operation failed.',{
onopen:function(){alert('opened!');},
onclose:function(){alert('closed!');}, onok:function(){alert('ok');
$.weeboxs.close();} });
$.weeboxs.open('/modules/test/testsession.php', {contentType:'ajax'});
$.weeboxs.open('hello world');
$.weeboxs.open('The operation failed.',{type:'error'});
$.weeboxs.open('The operation failed.',{type:'wee'});
$.weeboxs.open('The operation failed.',{type:'success'});
$.weeboxs.open('The operation failed.',{type:'warning'});
$.weeboxs.open('Autoclosing in 5 seconds.', { timeout: 5 });

下面是weeboxs在網頁中的基本應用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Weebox教程一</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../src/jquery.js"></script>
<script type="text/javascript" src="../src/bgiframe.js"></script>
<script type="text/javascript" src="../src/weebox.js"></script>
<link type="text/css" rel="stylesheet" href="../src/weebox.css" />
</head>
<body>
<h1>直接顯示內容<input type="button" id="test1" value="演示[id=test1]"></h1>
<pre>
$("#test1").click(function(){
$.weeboxs.open('這是直接顯示的內容', {title: 'Hello World'});
});
</pre>
<img target='_blank'>服務器上的內容', contentType:'ajax'});
});
</pre>
<img alt="" src="demo6.jpg">
<script type="text/javascript">
$("#test6").click(function(){
$.weeboxs.open('ajax1.html', {title:'AJAX得到服務器上的內容', contentType:'ajax',width:400});
});
</script>
<hr>
<h1>設置彈窗的寬度和高度<input type="button" id="test7" value="演示[id=test7]"></h1>
<pre>
$("#test7").click(function(){
$.weeboxs.open('ajax2.html', {title:'設置彈窗的寬度和高度', contentType:'ajax', width:600, height:300});
//dialog默認寬度為300,高度是自適應的
});
</pre>
<img alt="" src="demo7.jpg">
<script type="text/javascript">
$("#test7").click(function(){
$.weeboxs.open('ajax2.html', {title:'設置彈窗的寬度和高度', contentType:'ajax', width:600, height:300});
});
</script>
<hr>
<h1>不顯示背景遮照、不允許拖拽、自動關閉<input type="button" id="test8" value="演示[id=test8]"></h1>
<pre>
$("#test8").click(function(){
$.weeboxs.open('不顯示背景遮照、不允許拖拽、五秒鐘后自動關閉', {title:'測試<b>5</b>秒后自動關閉', modal:false, draggable:false, timeout:5,
onopen:function(box){
var closetime = parseInt(box.dt.find('b').html(),10);
var handle = setInterval(function(){
alert(1);
closetime--;
box.dt.find('b').html(closetime+'');
if (closetime<=0) clearInterval(handle);
}, 1000);
}
});
});
</pre>
<img alt="" src="demo8.jpg">
<script type="text/javascript">
$("#test8").click(function(){
$.weeboxs.open('不顯示背景遮照、不允許拖拽、五秒鐘后自動關閉', {
title:'測試<font color="red">5</font>秒后自動關閉',
modal:false,//默認為true
draggable:false,//默認為true
timeout:5, //默認為0
onopen:function(box){
var closetime = parseInt(box.dt.find('font').html(),10);
var handle = setInterval(function(){
closetime--;
box.dt.find('font').html(closetime);
if (closetime<=0) clearInterval(handle);
}, 1000);
}
});
});
</script>
<hr>
<h1>彈窗打開后、及關閉后的光標定位<input type="button" id="test9" value="演示[id=test9]"></h1>
<pre>
$("#test9").click(function(){
$.weeboxs.open('ajax3.html', {title:'彈窗打開后、及關閉后的光標定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
});
</pre>
<img alt="" src="demo9.jpg">
<script type="text/javascript">
$("#test9").click(function(){
$.weeboxs.open('ajax3.html', {title:'彈窗打開后、及關閉后的光標定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
});
</script>
<input type="text" size="40" class="blurele" value="彈窗關閉后光標定位到這兒">
<hr>
<h1>修改確定和取消的按鈕名字<input type="button" id="test10" value="演示[id=test10]"></h1>
<pre>
$("#test10").click(function(){
$.weeboxs.open('修改確定和取消的按鈕名字', {title:'修改按鈕名字', okBtnName:'保存', cancelBtnName:'放棄'});
});
</pre>
<img alt="" src="demo10.jpg">
<script type="text/javascript">
$("#test10").click(function(){
$.weeboxs.open('修改確定和取消的按鈕名字', {title:'修改按鈕名字', okBtnName:'保存', cancelBtnName:'放棄'});
});
</script>
<hr>
<h1>不顯示某個按鈕、按鈕欄<input type="button" id="test11" value="演示[id=test11]"></h1>
<pre>
$("#test11").click(function(){
$.weeboxs.open('不顯示標題和按鈕欄', {
title:'測試',
showButton:false,//不顯示按鈕欄
showOk:false,//不顯示確定按鈕
showCancel:false//不顯示取消按鈕
});
});
</pre>
<img alt="" src="demo11.jpg">
<script type="text/javascript">
$("#test11").click(function(){
$.weeboxs.open('不顯示標題和按鈕欄', {
title:'測試',
showButton:false,//不顯示按鈕欄
showOk:false,//不顯示確定按鈕
showCancel:false//不顯示取消按鈕
});
});
</script>
<hr>
<h1>使用IFRAME的方式為彈窗提供內容<input type="button" id="test12" value="演示[id=test12]"></h1>
<pre>
$("#test12").click(function(){
$.weeboxs.open('http://www.google.com', {title:'IFRAME得到服務器上的內容', contentType:'iframe',width:500,height:200});
});
</pre>
<img alt="" src="demo12.jpg">
<script type="text/javascript">
var weeboxDialog;
$("#test12").click(function(){
weeboxDialog=$.weeboxs.open('jQuery.weebox.iframedialog.html', {title:'IFRAME得到服務器上的內容', contentType:'iframe',width:500,height:200});
});
function closeIframeDialog() {
//$.weeboxs.close(); 此方法失效?
weeboxDialog.close();
}
</script>
<hr>
</body>
</html>