博客

EasyUI jQuery 窗口小部件

  • Post category:jquery

EasyUI是一套基于jQuery的UI控件库，提供了丰富的UI控件，其中的窗口小部件（window）可以方便快捷地添加弹出窗口效果。本篇攻略将介绍如何使用EasyUI jQuery 窗口小部件以及如何进行基本的配置和自定义。

前置条件

前置条件是需要引入jQuery和EasyUI库文件。可以去EasyUI官网下载，然后在HTML文件中引入：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入EasyUI -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/easyui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>

基本使用

EasyUI窗口小部件可以使用$.window来创建一个弹出窗口。比如下面的示例代码：

<div id="win" class="easyui-window" title="窗口" style="width:400px;height:200px"></div>

<script>
   $('#win').window('open');
</script>

这段代码创建了一个名为“win”的窗口，设置其宽度为400px，高度为200px，并设置了窗口的标题。接着使用$('#win').window('open');来弹出窗口。

EasyUI还提供了非常多的可选配置项，通过配置可以实现更多的功能。

基本配置

EasyUI窗口小部件有许多基本的配置项可以设置，例如：

  • title: 窗口的标题
  • width: 窗口的宽度
  • height: 窗口的高度
  • content: 窗口中显示的内容，可以是HTML、文本或URL
  • collapsible: 是否可折叠
  • minimizable: 是否可最小化
  • maximizable: 是否可最大化
  • closable: 是否可关闭
  • onClose: 窗口关闭时触发的事件
  • onOpen: 窗口打开时触发的事件
  • …

下面是一段代码演示如何使用配置项：

<div id="win" class="easyui-window" title="窗口" style="width:400px;height:200px"
     collapsible="true" minimizable="true" maximizable="true" closable="true"
     onOpen="alert('打开了窗口')" onClose="alert('关闭了窗口')">
    <p>窗口的内容</p>
</div>

<script>
$('#win').window('open');
</script>

这段代码创建了一个可折叠、最小化、最大化、可关闭的窗口，内容为一个段落。窗口打开时会弹出一个提示框，关闭时也会弹出提示框。

自定义窗口

EasyUI窗口小部件也支持自定义样式和内容。下面是一段演示如何自定义窗口。

<style>
.myWindow .window-header{background-color:#FFA500;color:white}
.myWindow p{margin:10px}
</style>

<div id="win" class="easyui-window myWindow" title="窗口" style="width:400px;height:200px">
    <p>这是一个自定义窗口</p>
</div>

<script>
$('#win').window('open');
</script>

这段代码创建了一个自定义样式的名为“win”的窗口。使用了.myWindow .window-header{background-color:#FFA500;color:white}样式，将窗口标题栏的背景色设置为橙色，字体颜色设置为白色，同时为窗口内容添加了一个外边距。最后通过$('#win').window('open');打开窗口。

在EasyUI中使用窗口小部件非常方便，只要几行代码就可以轻松实现窗口弹出效果。通过配置选项和自定义样式，可以让窗口拥有更多的功能和更好的视觉效果。

Tags: