Restrict Splitter Dragging

In this post, we will show you how to restrict the dragging range of the Splitter’s Split bar. The example code below, creates a Splitter with two Panels. The important thing in the code is the initialization of the split panels. The first panel’s definition includes setting the ‘size’, ‘min’ and ‘max’ properties. The ‘size’ property specifies the panel’s display size and the ‘min’ and ‘max’ properties specify the panel’s minimum and maximum possible size. The end-user will be able to drag the split bar only in the range between the ‘min’ and ‘max’ properties.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150, min: 100, max: 200 }, { size: 450 }] });
<body class='default'>
<div id="mainSplitter">
<div>Left Panel</div>
<div>Right Panel</div>

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxSplitter and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply