jQWidgets Forums

Tagged: jqxsplitter, jqxTabs, splitter, tab

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

PAnel content not shown , on clicking the spiltter in some case Posts

November 27, 2012 at 8:57 am PAnel content not shown , on clicking the spiltter in some case #11520

sumeet

Member

hi team ..
Please have a look on the following code .


<html>
<head>
<link rel="stylesheet"
	href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css"
	type="text/css" />
<script type="text/javascript"
	src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript"
	src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script type="text/javascript"
	src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/gettheme.js"></script>
<script type="text/javascript"
	src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript"
	src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#tab').jqxTabs({
			width : '100%',
			height : '100%'
		});
		$('#main').jqxSplitter({
            roundedcorners : true,
            width : '100%',
            height : '100%',
            panels : [ {
                size : 200,
            }, {
                size : 400
            } ]
        });
		$('#tab_1').jqxSplitter({
			width : 600,
			height : 600,
			panels : [ {
				size : 200,
				max : 290
			}, {
				size : 400
			} ]
		});
	});
</script>
</head>
<body>
	<div id='main'>
		<div>a</div>
		<div id='tab' style="width: 100%;" hieght="100%">
			<ul>
				<li>tab-1</li>
				<li>tab-2</li>
			</ul>
			<div id='tab_1'>
				<div id='tab_1_left'>
					This is Left
					
				</div>
				<div id='tab_2_left'>
					right
				</div>
			</div>
			<div id='tab_2'></div>
		</div>
	</div>
</body>
</html>

November 27, 2012 at 9:19 am PAnel content not shown , on clicking the spiltter in some case #11523

Dimitar

Participant

Hello sumeet,

Here is the working example. An additional div element is needed to enclose the div with id ‘tab’.

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.3.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" src="../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tab').jqxTabs({
                width: '100%',
                height: '100%'
            });
            $('#main').jqxSplitter({
                roundedcorners: true,
                width: '100%',
                height: '100%',
                panels: [{
                    size: 200
                }, {
                    size: 400
                }]
            });
            $('#tab_1').jqxSplitter({
                width: 600,
                height: 600,
                panels: [{
                    size: 200,
                    max: 290
                }, {
                    size: 400
                }]
            });
        });
    </script>
</head>
<body>
    <div id='main'>
        <div>
            a</div>
        <div>
            <div id='tab' style="width: 100%;" height="100%">
                <ul>
                    <li>tab-1</li>
                    <li>tab-2</li>
                </ul>
                <div id='tab_1'>
                    <div id='tab_1_left'>
                        This is Left
                    </div>
                    <div id='tab_2_left'>
                        right
                    </div>
                </div>
                <div id='tab_2'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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.