jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
jQuery EasyUI 是一个基于 jQuery 的 UI 组件库，它提供了一系列方便易用的 UI 控件，其中包括窗口（window）控件。通过 jQuery EasyUI 窗口控件，我们可以轻松地创建自定义的对话框，加入工具条和按钮等元素，增强对话框的功能。
基本用法
要使用 jQuery EasyUI 窗口控件，我们首先需要在 HTML 页面中引入相应的 js 和 css 文件，代码如下：
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
接着，我们可以使用以下代码创建一个基本的窗口：
<div id="dlg" class="easyui-window" title="My Window" style="width: 400px; height:300px;">
<div>窗口内容</div>
</div>
在这段代码中，我们使用 id 为 dlg 的 div 元素作为窗口，通过设置 class 为 easyui-window 和样式来创建窗口的外观样式，并设置 title 和窗口内容。
添加工具条
我们可以通过添加工具条，为窗口增加更多的功能和交互性。以下示例代码展示了如何添加一个工具条：
<div id="dlg" class="easyui-window" title="My Dialog" style="width:400px;height:250px;"
data-options="toolbar:'#dlg-toolbar'">
<div id="dlg-toolbar">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
</div>
<div>窗口内容</div>
</div>
在这段代码中，我们首先为窗口设置了 data-options 属性，用来指定窗口的工具条的位置。接着，我们在窗口的 div 元素之前添加了一个 id 为 dlg-toolbar 的 div 元素，并在其中添加了两个 easyui-linkbutton 按钮，分别用于保存和取消操作。使用 easyui-linkbutton 按钮需要在引入 css 文件的时候引入 easyui 的图标样式文件。
添加按钮
除了工具条，我们还可以为窗口添加独立的按钮元素。以下示例代码展示了如何添加一个确定和取消按钮：
<div id="dlg" class="easyui-window" title="My Dialog" style="width:400px;height:250px;"
data-options="modal:true,buttons:'#dlg-buttons'">
<div>窗口内容</div>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">取消</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg-form').form('submit')">确定</a>
</div>
在这段代码中，我们首先为窗口设置了 data-options 属性的 buttons 属性，用来指定窗口的按钮元素的位置。接着，我们在窗口后面添加了一个 id 为 dlg-buttons 的 div 元素，并在其中添加了两个 easyui-linkbutton 按钮，分别用于确定和取消操作。
总结
通过 jQuery EasyUI 窗口控件，我们可以轻松地创建自定义的对话框，并加入工具条和按钮等元素，增强对话框的功能。本文介绍了如何使用 jQuery EasyUI 窗口控件创建窗口、添加工具条和按钮等内容，并提供了相应的示例代码。