jQWidgets jqxWindow调整大小事件

下面是jQWidgets jqxWindow调整大小事件的完整攻略：

1. 安装 jQWidgets

首先，你需要安装并引入jQWidgets库，它是一个用于创建现代网页应用程序的UI工具集，支持多种网页技术（HTML5, CSS和JavaScript等）。

你可以通过以下步骤进行安装：

1. 访问jQWidgets官网（https://www.jqwidgets.com/），下载并解压缩最新的jqwidgets库。

2. 在你的html页面中引入必要的css和js文件：

<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="./jqwidgets/jqxcore.js"></script>
<script src="./jqwidgets/jqxwindow.js"></script>

1. 在你的html页面中创建jqxWindow控件：

<div id="myWindow">
  <div>窗口内容</div>
</div>

$('#myWindow').jqxWindow();

2. 调整大小事件的使用

使用 resizable 属性绑定调整大小事件。

当窗口大小改变时，调用 jqxWindow 的 resize 方法。

例如：

<div id="myWindow">
  <div>窗口内容</div>
</div>

$('#myWindow').jqxWindow({
  resizable: true,
  width: 350, height: 200,
  resize: function(event) {
    $('#log').html('宽度: ' + event.args.width + ', 高度: ' + event.args.height);
  }
});

在上面的代码中，jqxWindow 控件被定义为可调整大小，定义了窗口初始化的大小,并绑定了一个回调函数 resize 来处理窗口大小改变事件。resize 事件中的 event 参数包含了 args 属性, 其中包含调整大小后的新宽度和高度。

示例1：在窗口里面加入一个谷歌地图

一个实际的应用场景是在窗口里面嵌入谷歌地图。要实现这个场景，首先要引入谷歌地图的API：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

然后，定义一个函数来初始化谷歌地图并在窗口加载时调用：

<div id="mapWindow">
  <div id="mapCanvas"></div>
</div>

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(40.7142, -74.0064),
    zoom: 10
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
}

$('#mapWindow').jqxWindow({
  width: 600,
  height: 400,
  resizable: true,
  initContent: function () {
    google.maps.event.addDomListener(window, 'load', initialize);
  }
});

在上述代码中，首先在窗口中定义了一个 div 元素 mapCanvas，用于显示地图。在窗口加载时， initContent 回调函数被调用，这时候仍然看不到地图。然后我们绑定了一个事件监听器，在 window 对象上监听 load 事件。当页面加载时，这个回调函数 initialize 就会被调用，并创建一个新的 google.maps.Map 对象，它的中心被设为了纽约市（center: new google.maps.LatLng(40.7142, -74.0064)）。

最后，我们将这个全新的地图对象附加到指定的 div 元素 mapCanvas 上，这样地图就可以在窗口中展示了。

示例 2：针对表单添加一个可调整大小的窗口

在本示例中，我们将演示如何创建一个可以随意调整大小的表单。在表单的最顶层我们需要使用 jqxWindow。同时注意到我们需要对这个表单元素进行 jqxValidator 的验证。调整大小事件的响应由 content 属性撑起。

<div id="formWrapper">
  <div id="formHeader">用户个人信息</div>
  <div id="formContent">
    <form>
      <label for="userName">用户名:</label>
      <input id="userName" type="text" required />
      <br>
      <label for="userAge">年龄:</label>
      <input id="userAge" type="text" required />
      <br>
      <label for="userAddr">地址:</label>
      <input id="userAddr" type="text" required />
      <br>
      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </form>
  </div>
</div>

$('#formWrapper').jqxWindow({
  width: 500,
  height: 300,
  resizable: true,
  content: $('#formContent'),
  initContent: function () {
    $('#userForm').jqxValidator({
      rules: [
        { input: '#userName', message: '请填写用户名', action: 'keyup, blur, change', rule: 'required' },
        { input: '#userAge', message: '请填写年龄', action: 'keyup, blur, change', rule: 'required' },
        { input: '#userAddr', message: '请填写地址', action: 'keyup, blur, change', rule: 'required' }
      ]
    });
  }
});

在本示例中，我们定义了一个表单，包含一个用户名输入框、一个年龄输入框、一个地址输入框和两个按钮：提交和重置按钮。然后，在 jqxWindow 控件中指定了窗口的宽度和高度，并将 resizable 属性设置为 true 以允许窗口调整大小。content 属性指定了窗口的内容，它是一个表单元素。最后，我们通过 initContent 回调函数在窗口初始化时准备好这个表单元素，并对其进行验证。