jQWidgets jqxSplitter orientation属性

jQWidgets是一套基于jQuery的UI组件库，其中包括了一个分割器组件(jqwidgets.jqxsplitter.js)，它可以将页面中的元素通过拖拽方式划分为几个细分的区域，以便用户可以自由调整各个区域的大小和位置。

其中，jqxSplitter中的orientation属性指定了分割器的方向。具体而言，它可以取两个值：horizontal和vertical。当orientation设置为horizontal时，分割器将会水平分隔页面元素；而当orientation设置为vertical时，分割器将会垂直分隔页面元素。

下面是两个例子，详细说明了orientation属性的用法。

示例一

以下代码用jqxSplitter分割器将页面上的一个div元素水平划分为两个区域：

<div id="splitter">
  <div>左边区域</div>
  <div>右边区域</div>
</div>

<script>
$(document).ready(function () {
    $('#splitter').jqxSplitter({
        orientation: 'horizontal',
        panels: [{ size: '50%', min: 100 }, { size: '50%', min: 100 }]
    });
});
</script>

在上面代码中，我们通过设置orientation为'horizontal'让分割器实现水平切割。panels数组中的每个元素对应一个划分出来的区域，可以设置size属性指定区域的初始大小，min属性指定区域的最小尺寸。在本例中，我们将两个区域的大小都初始设置为50%，并且设置了最小尺寸为100px。

示例二

以下代码用jqxSplitter分割器将页面上的一个div元素垂直划分为三个区域：

<div id="splitter">
  <div>上边区域</div>
  <div>中间区域</div>
  <div>下边区域</div>
</div>

<script>
$(document).ready(function () {
    $('#splitter').jqxSplitter({
        orientation: 'vertical',
        panels: [{ size: '30%', min: 100 }, { size: '40%', min: 100 }, { size: '30%', min: 100 }]
    });
});
</script>

在上面的代码中，我们通过设置orientation为'vertical'让分割器实现垂直切割。同样地，panels数组中的每个元素对应一个划分出来的区域，可以设置size属性指定区域的初始大小，min属性指定区域的最小尺寸。在本例中，我们将三个区域的大小分别设置为30%、40%和30%。