news 2026/6/10 9:53:50

jQuery EasyUI 窗口 - 创建简单窗口

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 窗口 - 创建简单窗口

下面直接给你最实用、最常见的创建简单窗口(window)方法,jQuery EasyUI 的window组件超级简单好用,复制粘贴就能弹出专业对话框,领导最爱的“弹窗表单、确认框、详情查看”效果全都有!

方法1:最简单 - 3秒创建一个基本窗口(推荐现在就用这个)

<!-- 先定义一个隐藏的div作为窗口内容 --><divid="win"class="easyui-window"title="简单窗口示例"style="width:600px;height:400px;padding:10px;"data-options="iconCls:'icon-help', modal:true, <!-- 模态窗口(背景遮罩) --> closed:true, <!-- 默认关闭 --> minimizable:false, maximizable:false, collapsible:false, shadow:true"><h2>欢迎使用 EasyUI 窗口!</h2><p>这是一个最简单的窗口示例。</p><p>支持拖拽、关闭、模态遮罩等功能。</p><divstyle="margin-top:20px;text-align:center;"><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="$('#win').window('close')">关闭窗口</a></div></div><!-- 按钮触发打开窗口 --><divstyle="padding:20px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-window"onclick="$('#win').window('open')">打开简单窗口</a></div>

效果:点击按钮弹出带标题、拖拽、关闭按钮、模态遮罩的窗口,超级专业!

方法2:JS动态创建窗口(更灵活,不需要预定义div)

<divstyle="padding:20px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"onclick="openDynamicWin()">动态创建窗口</a></div><script>functionopenDynamicWin(){$('<div id="dynamicWin"/>').appendTo('body').window({title:'动态创建的窗口',width:500,height:300,modal:true,shadow:true,closed:false,// 创建后立即打开content:'<div style="padding:20px;text-align:center;"><h3>这是通过JS动态创建的窗口</h3><p>内容可以是任意HTML</p></div>',onClose:function(){$(this).window('destroy');// 关闭时销毁,避免内存占用},footer:'#win-footer'// 可指定底部按钮区});}</script><!-- 可选:自定义底部按钮 --><divid="win-footer"style="text-align:right;padding:5px;"><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="$('#dynamicWin').window('close')">取消</a><ahref="javascript:void(0)"class="easyui-linkbutton c6"onclick="alert('保存成功!');$('#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:居中显示 + 加载远程内容(超级常用!比如编辑表单)

<divid="editWin"class="easyui-window"title="编辑用户"data-options="modal:true,closed:true"style="width:600px;height:450px;"><!-- 内容通过href远程加载 --></div><script>// 打开窗口并加载表单页面functionopenEditWin(userId){$('#editWin').window({href:'edit_user.php?id='+userId,// 加载远程HTML/PHP页面onLoad:function(){// 加载完成后可以初始化表单等$('#editWin').window('center');// 重新居中(加载后高度变化时需要)}}).window('open').window('center');}</script><!-- 调用示例 --><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="openEditWin(123)">编辑用户</a>

你现在直接复制方法1的完整代码到你的页面,刷新一下就能看到一个完美的 EasyUI 窗口了!
结合之前的 datagrid(比如双击行打开编辑窗口),你的后台系统弹窗功能就齐活了。

想要我给你一个完整的HTML示例(带表单 + 验证 + 保存 + 居中 + 远程加载)?
或者你告诉我你想做什么窗口(比如“新增用户”“查看详情”“确认删除”“登录框”),我2分钟发你精准代码,复制就能跑!

快说说你的具体需求,我手把手帮你搞定,5分钟内看到超级专业的窗口效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 14:33:52

AI一键搞定:Windows下Docker安装全流程解析

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个Windows系统下的Docker安装辅助工具&#xff0c;要求&#xff1a;1.自动检测用户Windows版本和系统配置&#xff1b;2.根据检测结果智能推荐最适合的Docker版本和安装方式&…

作者头像 李华
网站建设 2026/6/9 22:13:42

jQuery EasyUI 窗口 - 自定义窗口工具栏

下面直接给你最实用、最常见的自定义窗口工具栏&#xff08;toolbar&#xff09;方法&#xff0c;jQuery EasyUI 的 window 组件支持超级灵活的工具栏设置&#xff0c;复制粘贴就能在窗口顶部添加搜索框、按钮、刷新、下拉等&#xff0c;领导最爱的“专业弹窗工具栏”效果全都有…

作者头像 李华
网站建设 2026/6/10 14:46:10

荣耀WIN系列定档12月26日发布:超神性能双旗舰

荣耀gtpro 此前荣耀官方正式宣布&#xff0c;全新升级的电竞旗舰系列——荣耀WIN将于本月发布&#xff0c;号称是“年度电竞夯机”。而现在有最新消息&#xff0c;近日荣耀官方正式宣布&#xff0c;将于12月26日14:30举行新品发布会&#xff0c;届时全新的荣耀WIN系列将正式与大…

作者头像 李华
网站建设 2026/6/10 14:45:06

TscanCode:5个技巧让代码安全扫描变得如此简单![特殊字符]

还在为代码安全问题头疼吗&#xff1f;TscanCode这款开源代码安全扫描工具&#xff0c;就像是你的专属代码医生&#xff0c;能够快速发现潜在的安全漏洞和代码缺陷。作为腾讯开源的静态分析工具&#xff0c;它支持C、C#、Lua等多种语言&#xff0c;让你的代码质量瞬间提升好几个…

作者头像 李华
网站建设 2026/6/10 14:45:06

15分钟搭建Chrome请求异常监控原型

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 使用快马平台快速开发一个Chrome请求异常监控原型&#xff0c;功能包括&#xff1a;1. 基本的错误日志捕获功能&#xff1b;2. 简单的错误分类展示&#xff1b;3. 基础的通知提醒&a…

作者头像 李华
网站建设 2026/6/10 14:45:05

Notepad++ vs 其他编辑器:为什么它仍是效率首选

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个Notepad效率对比工具&#xff0c;能够可视化展示Notepad与其他编辑器&#xff08;如VS Code、Sublime等&#xff09;在启动速度、内存占用、大文件处理等方面的性能数据。包…

作者头像 李华