jQWidgets jqxSplitter resize 事件

jQWidgets jqxSplitter是一款基于jQuery的拆分屏幕插件，可以根据指定的CSS选择器在网页上快速创建可拖拽和大小可调的分隔条。在使用jqxSplitter插件的过程中，我们可能需要对拆分屏幕的大小进行动态调整或者监控拆分屏幕的大小变化事件。这时候就可以使用jqxSplitter的resize事件来实现。

1. jqxSplitter resize 事件的使用

jqxSplitter的resize事件会在拆分屏幕的大小发生变化时被触发，可以通过给拆分屏幕绑定resize事件来监听屏幕大小的变化。resize事件会传递一个event对象和一个size对象作为参数，其中event对象表示触发resize事件的事件对象，size对象表示拆分屏幕的新的大小状态。在resize事件中可以使用size对象中包含的属性来获取拆分屏幕的新的实际宽度和高度等信息。

以下是一段简单的示例代码，演示如何使用resize事件监听拆分屏幕大小的变化并输出当前大小：

$('#splitter').on('resize', function(event) {
    var size = event.args.size;
    console.log('Splitter resized to width ' + size.width + 'px and height ' + size.height + 'px');
});

在这段代码中，我们首先获取了ID为“splitter”的HTML元素，这个元素是我们创建拆分屏幕的容器元素。接着，我们使用.on()方法将resize事件绑定到拆分屏幕元素上。在resize事件触发时，我们从event对象中获取了拆分屏幕的新的大小状态，使用console.log()方法将其输出到控制台。

2. jqxSplitter resize 事件的示例

下面通过两个示例进一步说明如何使用jqxSplitter的resize事件实现动态调整拆分屏幕大小问题。

示例1：动态改变拆分屏幕的大小

在这个示例中，我们会演示如何根据拖拽事件动态调整拆分屏幕的大小。在拆分屏幕元素上，我们首先绑定mousedown事件，当用户在拖拽分隔条的时候触发。在mousedown事件中，我们可以使用.live()方法绑定mousemove和mouseup事件，以实现拖拽分隔条并实时调整拆分屏幕大小的效果。而在mousemove事件中，我们则可以通过.triggerHandler()方法触发resize事件，并传递新的大小状态。

var splitter = $("#splitter");

// 绑定mousedown事件，当用户开始拖拽分隔条时触发
splitter.find('.jqx-splitbar-vertical').live('mousedown', function() {

    // 绑定mousemove和mouseup事件
    $(document).live('mousemove.splitter', function(event) {

        // 获取鼠标距离拆分屏幕的距离
        var x = event.pageX - splitter.offset().left;

        // 触发resize事件，并传递新的大小状态
        splitter.triggerHandler('resize', [{ width: x }]);
    }).one('mouseup', function() {
        // 当用户松开鼠标时移除事件绑定
        $(document).unbind('mousemove.splitter');
    });

});

在这段代码中，我们首先通过$()函数获取了拆分屏幕元素，接着绑定拆分屏幕元素下的分隔条的mousedown事件。在这个事件中，我们使用.live()方法绑定了mousemove和mouseup事件。由于mousemove事件会不断触发，我们在它的回调函数中计算出鼠标距离拆分屏幕的距离，并使用.triggerHandler()方法触发resize事件，将计算得到的新的拆分屏幕的宽度传递过去。最后，我们在mouseup事件中移除了mousemove事件的绑定。

示例2：限制拆分屏幕的最小宽度和最小高度

在这个示例中，我们会演示如何限制拆分屏幕的最小宽度和最小高度。在拆分屏幕元素上，我们可以通过设置min属性来限制拆分屏幕的最小大小。

<div id="splitter">
    <div>左侧面板</div>
    <div min-height="100" min-width="200">
        <div>右侧面板</div>
    </div>
</div>

在这段代码中，我们在右侧面板的div元素上分别设置了min-width和min-height属性，来限制拆分屏幕的最小宽度和最小高度。

同时，我们可以通过监听resize事件来检查拆分屏幕的大小是否满足最小宽度和最小高度的限制。如果拆分屏幕的大小不满足限制，则可以使用.setSize()方法重新设置拆分屏幕的大小。

$('#splitter').on('resize', function(event) {

    var size = event.args.size;
    var minWidth = $('#splitter div[min-width]').attr('min-width');
    var minHeight = $('#splitter div[min-height]').attr('min-height');

    // 如果拆分屏幕的宽度小于最小宽度，则重新设置宽度
    if (size.width < minWidth) {
        $('#splitter').jqxSplitter('setSize', minWidth, size.height);
    }

    // 如果拆分屏幕的高度小于最小高度，则重新设置高度
    if (size.height < minHeight) {
        $('#splitter').jqxSplitter('setSize', size.width, minHeight);
    }

});

在这段代码中，我们在resize事件的回调函数中，首先获取了拆分屏幕的新的大小状态，并分别获取了右侧面板的min-width和min-height属性值。然后，我们检查拆分屏幕的大小是否满足最小宽度和最小高度的限制，并分别使用.setSize()方法重新设置拆分屏幕的宽度和高度。