使用前需包含以下jquery.js、bgiframe.js、weebox.js、weebox.css文件,这个方维都包含的有了。
下面是weeboxs在网页中的基本应用:
- "http://www.w3.org/TR/html4/loose.dtd">
-
Weebox教程一 -
直接显示内容
- $("#test1").click(function(){
- $.weeboxs.open('这是直接显示的内容', {title: 'Hello World'});
- });
- 服务器上的内容', contentType:'ajax'});
- });
- $("#test6").click(function(){
- $.weeboxs.open('ajax1.html', {title:'AJAX得到服务器上的内容', contentType:'ajax',width:400});
- });
-
-
设置弹窗的宽度和高度
- $("#test7").click(function(){
- $.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
- //dialog默认宽度为300,高度是自适应的
- });
- $("#test7").click(function(){
- $.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
- });
-
-
不显示背景遮照、不允许拖拽、自动关闭
- $("#test8").click(function(){
- $.weeboxs.open('不显示背景遮照、不允许拖拽、五秒钟后自动关闭', {title:'测试5秒后自动关闭', 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);
- }
- });
- });
- $("#test8").click(function(){
- $.weeboxs.open('不显示背景遮照、不允许拖拽、五秒钟后自动关闭', {
- title:'测试5秒后自动关闭',
- 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);
- }
- });
- });
-
-
弹窗打开后、及关闭后的光标定位
- $("#test9").click(function(){
- $.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
- });
- $("#test9").click(function(){
- $.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
- });
-
-
修改确定和取消的按钮名字
- $("#test10").click(function(){
- $.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
- });
- $("#test10").click(function(){
- $.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
- });
-
-
不显示某个按钮、按钮栏
- $("#test11").click(function(){
- $.weeboxs.open('不显示标题和按钮栏', {
- title:'测试',
- showButton:false,//不显示按钮栏
- showOk:false,//不显示确定按钮
- showCancel:false//不显示取消按钮
- });
- });
- $("#test11").click(function(){
- $.weeboxs.open('不显示标题和按钮栏', {
- title:'测试',
- showButton:false,//不显示按钮栏
- showOk:false,//不显示确定按钮
- showCancel:false//不显示取消按钮
- });
- });
-
-
使用IFRAME的方式为弹窗提供内容
- $("#test12").click(function(){
- $.weeboxs.open('http://www.google.com', {title:'IFRAME得到服务器上的内容', contentType:'iframe',width:500,height:200});
- });
- 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();
- }
-
评论列表()