news 2026/10/15 11:53:32

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/10/14 14:57:37

传统vsAI:Agent开发效率提升300%的秘诀

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个性能对比Demo&#xff1a;1. 传统方式手写一个天气查询Agent 2. 使用快马平台AI生成相同功能Agent。要求记录两种方式的开发时间、代码量和运行效率。生成完整的对比测试代…

作者头像 李华
网站建设 2026/10/14 21:17:38

AI计量器具管理系统开发:从技术落地到效率革命

制造、医疗、化工等行业的正常运转&#xff0c;离不开计量器具的精准护航——小到车间压力表&#xff0c;大到实验室精密分析仪&#xff0c;其准确性直接决定产品质量与生产安全。但传统管理模式的低效与漏洞&#xff0c;让不少企业饱受困扰。从产品开发视角看&#xff0c;AI计…

作者头像 李华
网站建设 2026/10/15 11:31:30

AI模拟练习系统开发:让练习精准匹配学习需求

传统模拟练习的痛点早就戳中了师生的核心困扰&#xff1a;学生埋头“题海”却总在重复做会的题&#xff0c;薄弱点始终没补上&#xff1b;老师批改堆积如山的练习卷要耗大量时间&#xff0c;反馈慢得赶不上复习节奏&#xff1b;更关键的是&#xff0c;很多模拟题和真实考试、实…

作者头像 李华
网站建设 2026/10/14 22:50:01

39-STM32F103RCT6的CAN通讯

STM32F103RCT6的CAN通讯 Can_Filter_Config(0,0, 0x100,0x7ff,0);//过滤器,0标准帧,Can_Send_Msg(CAN_ID,can

作者头像 李华
网站建设 2026/10/14 21:38:08

DBLens:让 SQL 查询更智能、更高效的数据库利器

在日常数据库开发和运维工作中&#xff0c;SQL 编写效率与准确性直接影响着开发节奏和系统稳定性。尤其是在表结构复杂、字段众多的业务系统中&#xff0c;频繁切换查看表结构&#xff08;DDL&#xff09;、记忆字段含义&#xff0c;往往成为开发者的“隐形成本”。 DBLens 正是…

作者头像 李华