jEasyUI 创建简单窗口学习笔记

jEasyUI 是一款基于 jQuery 的易于使用的 UI 库，可以快速构建 Web 应用程序界面。在 jEasyUI 中，创建窗口是其中一个重要的功能，本文将介绍如何使用 jEasyUI 创建简单窗口。

1. 引入 jEasyUI 库

首先需要引入 jEasyUI 库，在 HTML 文件中添加下列代码：

htmlCopy Code
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.1/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.1/jquery.easyui.min.js"></script>

2. 创建一个简单的窗口

创建一个简单的窗口需要使用以下三个 jEasyUI 组件：panel、window、linkbutton。

htmlCopy Code
<div id="p" class="easyui-panel" title="Panel" style="width:100%;height:500px;">
  <a href="#" class="easyui-linkbutton" onclick="createWindow()">Create Window</a>
</div>

<script type="text/javascript">
  function createWindow() {
    $('#w').window('open');
  }
</script>

<div id="w" class="easyui-window" title="My Window" style="width:400px;height:200px;display:none;">
  <div class="easyui-panel" style="padding:5px;">
    Window Content.
  </div>
</div>

在上述代码中，<div id="p"> 是一个 panel 组件，<a> 标签是一个 linkbutton 组件，用于触发创建窗口的操作。当用户点击这个按钮时，会执行 createWindow() 函数打开一个 window 窗口。

3. 添加更多控件

可以向窗口中添加更多控件，例如输入框、按钮等等。下面是一个包含输入框和按钮的例子：

htmlCopy Code
<div id="w" class="easyui-window" title="My Window" style="width:400px;height:200px;display:none;">
  <form id="myform">
    <input type="text" name="name" placeholder="Your Name" style="width:100%;height:30px;">
    <br><br>
    <a href="#" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
  </form>
</div>

<script type="text/javascript">
  function submitForm() {
    $('#myform').form('submit', {
      success:function(data) {
        $.messager.alert('Success','Form Submitted Successfully!');
      }
    });
  }
</script>

在上述代码中，我们通过添加一个表单元素 <form>，并在其中添加一个输入框和一个按钮来实现一个简单的用户输入窗口。当用户填写表单并点击提交按钮时，会执行 submitForm() 函数提交表单内容，并使用 $.messager.alert 弹出提交成功的提示框。

4. 总结

本文介绍了如何使用 jEasyUI 创建简单窗口，并通过示例演示了如何添加更多控件来实现更多功能。感谢您的阅读和关注！