jQuery Splitter

jQuery Splitter is a powerful and versatile plugin designed to enhance web layouts by allowing users to split content areas with a movable divider. This plugin provides an intuitive way to manage the display of multiple panels within a container, making it ideal for applications that require customizable layouts such as dashboards, sidebars, and interfaces with multiple content areas.

Key Features

• Flexible Orientation: Choose between horizontal and vertical orientations to fit the desired layout requirements.
• Customizable Positioning: Control the initial position of the splitter using percentages or pixel values, and dynamically adjust it based on user interaction.
• Drag Events: Monitor the splitter's position in real-time via the onDrag event, allowing for advanced control and interactivity.
• Height Management: Requires the height of the container to be set in order to function properly, with CSS guidelines provided to ensure a full-height display.
• Event Handling: Additional methods for managing the splitter instance include refreshing the layout, accessing or setting options, and removing the splitter data when no longer needed.

Usage Example

To implement the splitter, simply initialize it on a container element as shown below:

var splitter = $('#foo').height(200).split({
    orientation: 'vertical',
    limit: 10,
    position: '50%',
    onDrag: function(event) {
        console.log(splitter.position());
    }
});

With the basic HTML structure:

<div id="foo">
    <div id="leftPane">Foo</div>
    <div id="rightPane">Bar</div>
</div>

Configuration Options

• orientation: Defines if the splitter should be horizontal or vertical.
• limit: Specifies pixel limits for how far the splitter can be moved.
• position: Sets the initial position of the splitter.
• percent: Option to use percentage values for positioning, enhancing responsiveness.
• ignoreTags: List of HTML tags to be excluded from the splitter creation process.

Methods Available

The jQuery splitter instance provides several methods for enhanced control:

• refresh(): Recalculates the layout.
• option(name[, value]): Get or set options for the splitter.
• position(...): Get or set the position of the splitter.
• isActive: Checks if the splitter is currently active.
• destroy(): Cleans up the splitter instance and removes any associated data.

Explore a live demonstration here.

jQuery Splitter is an efficient solution for developers looking to create flexible and interactive user interfaces that improve end-user engagement.