news 2026/4/18 8:17:52

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/4/1 16:06:34

Minecraft模组汉化终极指南:5步实现完美中文界面体验

Minecraft模组汉化终极指南&#xff1a;5步实现完美中文界面体验 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 还在为复杂的英文模组界面而烦恼吗&#xff1f;Masa Mods中文汉化资源包…

作者头像 李华
网站建设 2026/4/18 8:17:02

jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框

下面直接给你最实用、最专业的自定义带有工具条&#xff08;toolbar&#xff09;和按钮&#xff08;buttons&#xff09;的对话框方法&#xff0c;jQuery EasyUI 的 dialog 组件完美支持同时设置顶部工具栏 底部按钮栏&#xff0c;复制粘贴就能做出领导最爱的“专业表单弹窗”…

作者头像 李华
网站建设 2026/4/17 21:15:26

鸿蒙“朋友圈”上新!这些应用在HarmonyOS 6上玩出了新花样

鸿蒙os 你是不是还在为手动记账烦恼&#xff1f;是不是希望出行信息能实时浮现在手机桌面上&#xff1f;随着HarmonyOS6的成熟与Mate系列新机的热销&#xff0c;一批人们熟悉的应用不仅“鸿蒙化”&#xff0c;还带来了耳目一新的玩法。最近&#xff0c;华为应用市场迎来一波鸿蒙…

作者头像 李华
网站建设 2026/4/18 8:15:41

争夺下一个万亿赛道!中国信通院报告披露:自动驾驶成为抢占科技发展制高点的战略要地

“十五五”规划建议明确提出&#xff0c;要抢占科技发展、人工智能产业应用两大制高点。李德毅院士近期刊文指出&#xff0c;“高级别智能驾驶汽车是抢占科技发展制高点必不可少的一部分”。12月12日&#xff0c;中国信通院2026深度观察报告会——人工智能法制专题报告会上&…

作者头像 李华
网站建设 2026/4/16 16:26:04

10分钟用AI打造图片选择器原型验证创意

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 快速生成一个创新的图片选择交互原型&#xff1a;1. 采用圆形裁剪预览界面 2. 支持手势缩放和旋转图片 3. 添加滤镜效果实时预览 4. 实现社交分享按钮 5. 响应式设计适配移动端 6. …

作者头像 李华
网站建设 2026/4/17 23:10:03

5分钟原型开发:Docker化Dify项目快速验证创意

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 设计一个极简的Dify项目Docker原型方案&#xff0c;要求&#xff1a;1. 最大程度简化配置 2. 保留核心功能验证能力 3. 支持单命令启动 4. 包含示例测试数据 5. 提供快速清理方案。…

作者头像 李华