jQury easyui(2)——窗口（window、dialog）

jQuery easyui是一套基于jQuery的UI库，提供了丰富的UI组件和易于使用的API，使得开发者可以轻松地创建出基于Web的应用程序。本文将介绍jQuery easyui中的两个弹出窗口组件：window和dialog，以及它们的使用方法。

一、window组件

window组件是一个轻量级的弹出窗口，提供了基于浮动层的弹出效果，可以显示在页面中的任何位置。window组件支持多种显示方式，比如范围限制、阴影、拖动和调整大小等。

1. 初始化Window

要使用window组件，首先要创建一个window对象。可以在HTML代码中创建一个空的div元素来表示窗口：

<div id="win" class="easyui-window" title="My Window" style="width:400px;height:200px;">
   Content here.
</div>

这样就创建了一个名为win的window对象，设置了窗口的标题和尺寸。可以在其中添加任何需要显示的内容。

2. 展示Window

要显示窗口，可以使用window组件的open方法。例如：

$('#win').window('open');

这样就可以在页面上展示名为win的窗口。

3. 设置Window属性

window对象的属性可以通过window组件的methods进行设置。例如，可以使用title方法来设置窗口的标题：

$('#win').window('setTitle', 'New Title');

还可以设置窗口的尺寸、位置和关闭方法等。下面是一些例子：

$('#win').window('resize', {
   width: 500,
   height: 300
});

$('#win').window('move', {
   left: 100,
   top: 50
});

$('#win').window('close', true);

这些方法都可以用来动态地修改窗口的属性。

二、dialog组件

dialog组件是一个基于window组件的封装，提供了更多的样式和功能。Dialog组件支持模态和非模态显示方式，支持回调函数，还可以自动设置按钮。

1. 初始化Dialog

要使用dialog组件，可以在HTML代码中创建一个按钮，然后绑定click事件来打开对话框。

<a href="#" class="easyui-linkbutton" onclick="openDialog()">Create Dialog</a>

openDialog函数可以在JavaScript代码中实现。如下：

function openDialog(){
   $('#dlg').dialog('open').dialog('setTitle', 'My Dialog');
}

这里创建了一个名为dlg的对话框，并设置了对话框的标题。在JavaScript代码中可以进行更多的设置。

2. 设置Dialog

dialog组件支持多种设置方式。例如，可以动态设置按钮：

function openDialog(){
   $('#dlg').dialog({
      title: 'My Dialog',
      buttons:[{
         text:'Save',
         handler:function(){
            alert('save');
         }
      },{
         text:'Cancel',
         handler:function(){
            $('#dlg').dialog('close');
         }
      }]
   });
}

这样就添加了两个按钮：保存和取消。保存按钮的handler会弹出一个提示框，而取消按钮会关闭对话框。

还可以设置其他属性，比如尺寸、位置、遮罩和最大化/最小化等。这些设置都通过JavaScript代码实现，和window组件非常类似。

结论

window和dialog组件是jQuery easyui中常用的弹出窗口组件。它们提供了丰富的API和易于使用的方法，使得开发者可以轻松地创建出基于Web的应用程序。通过本文的介绍，相信读者已经对这两个组件有了一定的了解，可以在实际开发中灵活运用。