jQuery UI Widgets › Forums › Layouts › Splitter › Splitter inside tabs?

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 13 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Splitter inside tabs? Posts
  • April 3, 2012 at 11:43 am Splitter inside tabs? #3185

    ChrisJ
    Member

    I’m currently trialing jqWidgets and have a small app with a splitter inside a tab. This works fine, until it comes to implementing the splitter events. When the splitter is collapsed, the script becomes unresponsive.
    Below is a short example. My main app has a navigation bar in the left splitter, and a chart in the right – again, this works fine so long as the splitter events aren’t used. If I attach to the “$(window).bind(“resize”, func)” event, this works ok.

    I’m using Firefox – any comments appreciated.

    Chris

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript">
    		window.onload = function () {
    						createWidgets();
    						performLayout();
    						addEventListeners();
    		};
           function createWidgets() {
    						$('#jqxTabs').jqxTabs({position: 'top', height: "100%", selectionTracker: true, animationType: 'fade' });
    						$('#mainSplitter').jqxSplitter({height: '100%', roundedcorners: true, panels: [{ size: "25%", min: 175, max: "40%" }, { size: "75%"}] });
    		}
    		function addEventListeners() {
                         $('#mainSplitter').bind('collapsed', function (event) {
                             performLayout();
                         });
           };
    		function performLayout() {
    						var h;
    						h = $(window).height() - 20;
                         $('#jqxTabs').jqxTabs('height', h);
    						h = $('#tab1').height() - ($('#jqxTabs').outerHeight(true) - $('#jqxTabs').height());
    						$('#mainSplitter').jqxSplitter("height", h);
                         var splittersize = 5;
                         var width = $("#mainSplitter").width() - splittersize - $('#contentSplitter').outerWidth();
           };
    	</script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
    		<div id="jqxTabs">
    			<ul>
    				<li>Tab 1</li>
    				<li>Tab 2</li>
    			</ul>
    			<div id="tab1">
    				<div id="mainSplitter">
    					<div class="splitter-panel">
    					</div>
    					<div class="splitter-panel" id="contentSplitter">
    					</div>
    				</div>
    			</div>
    			<div id="tab2">
    			</div>
    		</div>
        </div>
    </body>
    </html>
    April 3, 2012 at 1:37 pm Splitter inside tabs? #3186

    Peter Stoev
    Keymaster

    Hi Chris,

    Thanks for writing.

    The issue is that the performLayout function sets the Splitter’s height which internally refreshes the Splitter’s layout. This will refresh the collapsed state, too. Refreshing the collapsed state will raise the collapsed event again i.e the performLayout function will be called again. The result is a circular call of the performLayout function. There’s also an issue in the jqxsplitter.js, because the collapsed event should not be raised, if the splitbar is already collapsed and we’ll fix this for the upcoming release.

    In order to resolve the issue, you can use the following modification of your code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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/jqxtabs.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                createWidgets();
                performLayout();
                addEventListeners();
            };
            function createWidgets() {
                $('#jqxTabs').jqxTabs({ position: 'top', selectionTracker: true, animationType: 'fade' });
                $('#mainSplitter').jqxSplitter({ width: '100%', roundedcorners: true, panels: [{ size: "25%", min: 175, max: "40%" }, { size: "75%"}] });
            }
            function addEventListeners() {
                $('#mainSplitter').bind('collapsed', function (event) {
                    performLayout(false);
                });
            };
            function performLayout(refreshSplitter) {
                var h;
                h = $(window).height() - 20;
                $('#jqxTabs').jqxTabs('height', h);
                h = $('#tab1').height() - ($('#jqxTabs').outerHeight(true) - $('#jqxTabs').height());
                if (refreshSplitter == undefined) {
                    $('#mainSplitter').jqxSplitter({ height: h });
                }
                var splittersize = 5;
            };
    	</script>
    </head>
    <body class='default'>
     		<div id="jqxTabs">
    			<ul>
    				<li>Tab 1</li>
    				<li>Tab 2</li>
    			</ul>
    			<div style="overflow: hidden;" id="tab1">
    				<div id="mainSplitter">
    					<div class="splitter-panel">
    					</div>
    					<div class="splitter-panel" id="contentSplitter">
    					</div>
    				</div>
    			</div>
    			<div id="tab2">
    			</div>
    		</div>
    </body>
    </html>

    Hope this helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.