弹出框 weeboxs 使用教程
来源:互联网 发布:人工智能与公共安全 编辑:程序博客网 时间:2024/06/07 23:57
弹出框 weeboxs 使用教程
直接显示内容
$("#test1").click(function(){ $.weeboxs.open('这是直接显示的内容', {title: 'Hello World'});});
弹窗的Alter类型
$("#test2").click(function(){ $.weeboxs.open('Sorry,这个操作不允许!', {title:'提示', type:'alert'});});
打开、确定、取消、关闭的事件
$("#test3").click(function(){ $.weeboxs.open('弹窗事件测试?', { title:'提示', onopen:function() { alert('取得内容后,显示弹窗前。'); }, onok:function(){ alert('点击确定按钮后!'); box.close();//增加事件方法后需手动关闭弹窗 }, oncancel:function(){ alert('点击取消按钮后!'); box.close();//增加事件方法后需手动关闭弹窗 }, onclose:function(){ alert('弹窗关闭前'); } });});
使用jQuery的选择器为弹窗提供内容
$("#test4").click(function(){ $.weeboxs.open('#boxcontent', {title:'提示'});});<div style="display:none" id="boxcontent">ID方式取元素里的内容</div>$("#test5").click(function(){ $.weeboxs.open('.boxcontent', {title:'提示',contentType:'selector'});});<div style="display:none" src="http://weebox.googlecode.com/svn-history/r42/trunk/demo/demo4.jpg"<ID方式取元素里的内容Class方式元素里的内容
使用Ajax的方式为弹窗提供内容
$("#test6").click(function(){ $.weeboxs.open('ajax.html', {title:'AJAX得到服务器上的内容', contentType:'ajax'});});
设置弹窗的宽度和高度
$("#test7").click(function(){ $.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300}); //dialog默认宽度为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); } });});
弹窗打开后、及关闭后的光标定位
$("#test9").click(function(){ $.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});});
修改确定和取消的按钮名字
$("#test10").click(function(){ $.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});});
不显示某个按钮、按钮栏
$("#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});});
详细内容请看(有演示)http://weebox.googlecode.com/svn-history/r42/trunk/demo/weebox.html
- 弹出框 weeboxs 使用教程
- 弹出框 weeboxs 使用教程
- 弹出框weeboxs 基本属性总结
- 弹出框weeboxs 基本属性总结
- artDialog弹出框使用
- 第一次使用 弹出框
- eclipse插件教程-弹出界面框
- $.weeboxs打开窗口属性设置
- Eclipse popupMene高级教程:使用Visibility定制弹出菜单
- 在Joomla!中使用弹出提示(Tooltip)教程 【转】
- Eclipse popupMene高级教程:使用Visibility定制弹出菜单
- WordPress 教程:在 WordPress 后台使用 ThickBox 制作弹出层
- 初步使用弹出框SimpleModal
- extjs弹出框使用fckeditor
- 正确使用PresentModalViewController弹出框
- jquery 弹出框 使用popup
- popupwindow 弹出框 使用详情
- 使用DialogFragment实现弹出框
- oracle实例名,数据库名,服务名等概念区别与联系
- 约瑟夫环
- 弹出框weeboxs 基本属性总结
- 查看php已安装扩展命令
- oracle NULL值详解
- 弹出框 weeboxs 使用教程
- java网络编程UDP
- 查询,删除表中重复的记录
- 1~n,1出现的次数
- 触发器、存储结构和索引知识
- Service与线程(基础篇)
- 安全测试工具
- 开源代码网站
- 架构师