news 2026/6/23 8:13:26

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/23 18:55:59

如何在Kotaemon中自定义评分指标进行A/B测试?

如何在Kotaemon中自定义评分指标进行A/B测试&#xff1f; 在构建智能问答系统时&#xff0c;我们常常面临一个尴尬的现实&#xff1a;模型明明通过了BLEU和ROUGE测试&#xff0c;用户却依然抱怨“答非所问”。这背后暴露出的问题是——传统的NLP评估指标已经跟不上真实业务场景…

作者头像 李华
网站建设 2026/6/23 20:45:02

AI教学演示系统开发:让技术真正服务课堂

数字化教学普及后&#xff0c;传统教学演示的“卡脖子”问题越来越明显&#xff1a;老师备一节演示课&#xff0c;要花几小时做课件、反复调试设备&#xff0c;结果还可能因为设备兼容问题出岔子&#xff1b;学生跟不上演示节奏&#xff0c;想提问却没机会&#xff0c;互动感极…

作者头像 李华
网站建设 2026/6/22 20:30:07

LangGraph4J:Java开发者如何快速构建多智能体AI应用?

LangGraph4J&#xff1a;Java开发者如何快速构建多智能体AI应用&#xff1f; 【免费下载链接】langgraph4j &#x1f680; LangGraph for Java. A library for building stateful, multi-actor applications with LLMs, built for work jointly with langchain4j 项目地址: h…

作者头像 李华
网站建设 2026/6/23 18:23:00

阿里通义ReMe框架:智能体记忆的新篇章,小模型的新机遇!

近年来&#xff0c;大语言模型智能体正从静态模型向具备自主推理与工具调用能力的动态系统演进&#xff0c;而程序性记忆&#xff08;procedural memory&#xff09;作为内化“如何做”知识的关键机制&#xff0c;有望显著减少冗余试错、提升任务泛化能力。然而&#xff0c;现有…

作者头像 李华