jQuery UI Widgets › Forums › Layouts › Splitter › Building Layout with splitter
Tagged: jquery splitter control
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hi Team,
Please can you help me build a layout with your splitter having 5 parts : Left – Right – Top – Bottom – Centre that fills the whole page and is used as the application layout. This example is not included in your demos and I have not been able to build it alone.
Thanks for your support
Hi mesken,
Please, find below a sample with jqxSplitter with Nested Splitters. Hope that is what you are looking for.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This page demonstrates how to create three-pane layout using jqxSplitter. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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: '100%', height: '100%', panels: [{ size: '25%' }, { size: '75%' }] }); $('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical', panels: [{ size: '50%', collapsible: false }, { size: '50%' }] }); $('#centerSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%', collapsible: false }, { size: '50%' }] }); $('#centerTop').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%', collapsible: false }, { size: '50%' }] }); }); </script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style></head><body> <div id="mainSplitter"> <div> Left Panel</div> <div> <div id="rightSplitter"> <div> <div id="centerSplitter"><div><div id="centerTop"><div>Top</div><div>Center</div></div></div><div>Bottom</div></div> </div> <div> Right Panel</div> </div> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.