首页 > 网站 > 建站经验 > 正文

方维中的弹出对话框的使用即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在网页中的基本应用:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2.                     "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Weebox教程一</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <script type="text/javascript" src="../src/jquery.js"></script>
  8. <script type="text/javascript" src="../src/bgiframe.js"></script>
  9. <script type="text/javascript" src="../src/weebox.js"></script>
  10. <link type="text/css" rel="stylesheet" href="../src/weebox.css" />
  11. </head>
  12. <body>
  13.  
  14. <h1>直接显示内容<input type="button" id="test1" value="演示[id=test1]"></h1>
  15. <pre>
  16. $("#test1").click(function(){
  17.         $.weeboxs.open('这是直接显示的内容', {title: 'Hello World'});
  18. });
  19. </pre>
  20. <img target='_blank'>服务器上的内容', contentType:'ajax'});
  21. });
  22. </pre>
  23. <img alt="" src="demo6.jpg">
  24. <script type="text/javascript">
  25. $("#test6").click(function(){
  26.         $.weeboxs.open('ajax1.html', {title:'AJAX得到服务器上的内容', contentType:'ajax',width:400});
  27. });
  28. </script>
  29. <hr>
  30.  
  31. <h1>设置弹窗的宽度和高度<input type="button" id="test7" value="演示[id=test7]"></h1>
  32. <pre>
  33. $("#test7").click(function(){
  34.         $.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
  35.         //dialog默认宽度为300,高度是自适应的
  36. });
  37. </pre>
  38. <img alt="" src="demo7.jpg">
  39. <script type="text/javascript">
  40. $("#test7").click(function(){
  41.         $.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
  42. });
  43. </script>
  44. <hr>
  45.  
  46. <h1>不显示背景遮照、不允许拖拽、自动关闭<input type="button" id="test8" value="演示[id=test8]"></h1>
  47. <pre>
  48. $("#test8").click(function(){
  49.         $.weeboxs.open('不显示背景遮照、不允许拖拽、五秒钟后自动关闭', {title:'测试<b>5</b>秒后自动关闭', modal:false, draggable:false, timeout:5, 
  50.                 onopen:function(box){
  51.                         var closetime = parseInt(box.dt.find('b').html(),10);
  52.                         var handle = setInterval(function(){
  53.                                 alert(1);
  54.                                 closetime--;
  55.                                 box.dt.find('b').html(closetime+'');
  56.                                 if (closetime<=0) clearInterval(handle);
  57.                         }, 1000);
  58.                 }
  59.         });
  60. });
  61. </pre>
  62. <img alt="" src="demo8.jpg">
  63. <script type="text/javascript">
  64. $("#test8").click(function(){
  65.         $.weeboxs.open('不显示背景遮照、不允许拖拽、五秒钟后自动关闭', {
  66.                 title:'测试<font color="red">5</font>秒后自动关闭', 
  67.                 modal:false,//默认为true 
  68.                 draggable:false,//默认为true
  69.                 timeout:5, //默认为0
  70.                 onopen:function(box){
  71.                         var closetime = parseInt(box.dt.find('font').html(),10);
  72.                         var handle = setInterval(function(){
  73.                                 closetime--;
  74.                                 box.dt.find('font').html(closetime);
  75.                                 if (closetime<=0) clearInterval(handle);
  76.                         }, 1000);
  77.                 }
  78.         });
  79. });
  80. </script>
  81. <hr>
  82.  
  83. <h1>弹窗打开后、及关闭后的光标定位<input type="button" id="test9" value="演示[id=test9]"></h1>
  84. <pre>
  85. $("#test9").click(function(){
  86.         $.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
  87. });
  88. </pre>
  89. <img alt="" src="demo9.jpg">
  90. <script type="text/javascript">
  91. $("#test9").click(function(){
  92.         $.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
  93. });
  94. </script>
  95.  
  96.  
  97. <input type="text" size="40" class="blurele" value="弹窗关闭后光标定位到这儿">
  98. <hr>
  99.  
  100. <h1>修改确定和取消的按钮名字<input type="button" id="test10" value="演示[id=test10]"></h1>
  101. <pre>
  102. $("#test10").click(function(){
  103.         $.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
  104. });
  105. </pre>
  106. <img alt="" src="demo10.jpg">
  107. <script type="text/javascript">
  108. $("#test10").click(function(){
  109.         $.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
  110. });
  111. </script>
  112. <hr>
  113.  
  114. <h1>不显示某个按钮、按钮栏<input type="button" id="test11" value="演示[id=test11]"></h1>
  115. <pre>
  116. $("#test11").click(function(){
  117.         $.weeboxs.open('不显示标题和按钮栏', {
  118.                 title:'测试',
  119.                 showButton:false,//不显示按钮栏
  120.                 showOk:false,//不显示确定按钮
  121.                 showCancel:false//不显示取消按钮               
  122.         });
  123. });
  124. </pre>
  125. <img alt="" src="demo11.jpg">
  126. <script type="text/javascript">
  127. $("#test11").click(function(){
  128.         $.weeboxs.open('不显示标题和按钮栏', {
  129.                 title:'测试',
  130.                 showButton:false,//不显示按钮栏
  131.                 showOk:false,//不显示确定按钮
  132.                 showCancel:false//不显示取消按钮               
  133.         });
  134. });
  135. </script>
  136. <hr>
  137.  
  138.  
  139.  
  140. <h1>使用IFRAME的方式为弹窗提供内容<input type="button" id="test12" value="演示[id=test12]"></h1>
  141. <pre>
  142. $("#test12").click(function(){
  143.         $.weeboxs.open('http://www.google.com', {title:'IFRAME得到服务器上的内容', contentType:'iframe',width:500,height:200});
  144. });
  145. </pre>
  146. <img alt="" src="demo12.jpg">
  147. <script type="text/javascript">
  148. var weeboxDialog;
  149. $("#test12").click(function(){
  150.         weeboxDialog=$.weeboxs.open('jQuery.weebox.iframedialog.html', {title:'IFRAME得到服务器上的内容', contentType:'iframe',width:500,height:200});   
  151. });
  152. function closeIframeDialog() {
  153.         //$.weeboxs.close();  此方法失效?
  154.         weeboxDialog.close();
  155. }
  156. </script>
  157. <hr>
  158. </body>
  159. </html>
复制代码

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表