建建设网站的,建盏公司官方网站,好商网,河源新闻最新消息下面直接给你最实用、最常见的创建简单窗口#xff08;window#xff09;方法#xff0c;jQuery EasyUI 的 window 组件超级简单好用#xff0c;复制粘贴就能弹出专业对话框#xff0c;领导最爱的“弹窗表单、确认框、详情查看”效果全都有#xff01;
方法1#xff1a…下面直接给你最实用、最常见的创建简单窗口window方法jQuery EasyUI 的window组件超级简单好用复制粘贴就能弹出专业对话框领导最爱的“弹窗表单、确认框、详情查看”效果全都有方法1最简单 - 3秒创建一个基本窗口推荐现在就用这个!-- 先定义一个隐藏的div作为窗口内容 --dividwinclasseasyui-windowtitle简单窗口示例stylewidth:600px;height:400px;padding:10px;data-optionsiconCls:icon-help, modal:true, !-- 模态窗口背景遮罩 -- closed:true, !-- 默认关闭 -- minimizable:false, maximizable:false, collapsible:false, shadow:trueh2欢迎使用 EasyUI 窗口/h2p这是一个最简单的窗口示例。/pp支持拖拽、关闭、模态遮罩等功能。/pdivstylemargin-top:20px;text-align:center;ahrefjavascript:void(0)classeasyui-linkbuttononclick$(#win).window(close)关闭窗口/a/div/div!-- 按钮触发打开窗口 --divstylepadding:20px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-windowonclick$(#win).window(open)打开简单窗口/a/div效果点击按钮弹出带标题、拖拽、关闭按钮、模态遮罩的窗口超级专业方法2JS动态创建窗口更灵活不需要预定义divdivstylepadding:20px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-addonclickopenDynamicWin()动态创建窗口/a/divscriptfunctionopenDynamicWin(){$(div iddynamicWin/).appendTo(body).window({title:动态创建的窗口,width:500,height:300,modal:true,shadow:true,closed:false,// 创建后立即打开content:div stylepadding:20px;text-align:center;h3这是通过JS动态创建的窗口/h3p内容可以是任意HTML/p/div,onClose:function(){$(this).window(destroy);// 关闭时销毁避免内存占用},footer:#win-footer// 可指定底部按钮区});}/script!-- 可选自定义底部按钮 --dividwin-footerstyletext-align:right;padding:5px;ahrefjavascript:void(0)classeasyui-linkbuttononclick$(#dynamicWin).window(close)取消/aahrefjavascript:void(0)classeasyui-linkbutton c6onclickalert(保存成功);$(#dynamicWin).window(close)确定/a/div方法3常见实用配置复制这些选项就能做出领导喜欢的弹窗$(#win).window({title:用户编辑,width:700,height:500,top:50,// 距离顶部距离left:200,// 距离左边距离或自动居中modal:true,// 模态必须shadow:true,closed:true,draggable:true,// 可拖拽resizable:true,// 可调整大小maximizable:true,// 显示最大化按钮minimizable:true,// 显示最小化按钮collapsible:true,// 显示折叠按钮iconCls:icon-edit,onBeforeClose:function(){returnconfirm(确定关闭窗口吗未保存数据将丢失);},buttons:[{// 自定义底部按钮推荐text:保存,iconCls:icon-save,handler:function(){alert(保存成功);$(#win).window(close);}},{text:取消,handler:function(){$(#win).window(close);}}]});方法4居中显示 加载远程内容超级常用比如编辑表单divideditWinclasseasyui-windowtitle编辑用户data-optionsmodal:true,closed:truestylewidth:600px;height:450px;!-- 内容通过href远程加载 --/divscript// 打开窗口并加载表单页面functionopenEditWin(userId){$(#editWin).window({href:edit_user.php?iduserId,// 加载远程HTML/PHP页面onLoad:function(){// 加载完成后可以初始化表单等$(#editWin).window(center);// 重新居中加载后高度变化时需要}}).window(open).window(center);}/script!-- 调用示例 --ahrefjavascript:void(0)classeasyui-linkbuttononclickopenEditWin(123)编辑用户/a你现在直接复制方法1的完整代码到你的页面刷新一下就能看到一个完美的 EasyUI 窗口了结合之前的 datagrid比如双击行打开编辑窗口你的后台系统弹窗功能就齐活了。想要我给你一个完整的HTML示例带表单 验证 保存 居中 远程加载或者你告诉我你想做什么窗口比如“新增用户”“查看详情”“确认删除”“登录框”我2分钟发你精准代码复制就能跑快说说你的具体需求我手把手帮你搞定5分钟内看到超级专业的窗口效果