New Web Project

You can drag the dark backgrounded lines (that look like borders) and resize the panes

This is tab one

This is tab 2

This is tab III

This is a sample page to show the functionality of jsToys.

The code that was used to achieve this is pretty simple (see below):

				// Create a new horizontal pane in 'main' - the left pane is called 'left'

				// the right pane is called 'right'. The initial width of the left pane

				// is 220px. The width of the divider is 5px. Neither of th panes

				// can be shrunk below 200px

			var hP = new HorizontalSplitPane('main','left','right','220px','5px','200px');

			// Draw it

			hP.draw();

				// Create a new vertical pane in 'left' - the top pane is called 'top'

				// the bottom pane is called 'bottom'. The initial height of the top pane

				// is 60% of the container's height. The height of the divider is 5px. 

				// Neither of th panes can be shrunk below 15% of the container height

			var vP = new VerticalSplitPane('left','top','bottom','60%','5px','15%');

			// Draw it

			vP.draw();

			// Again draw another set of vertical panes

			var vP_main_console = new VerticalSplitPane('right','top2','bottom2','70%','5px','20%');

			vP_main_console.draw();

			// Create a new tabbed window - 'bottom' is the container which will contain all the tabs

			var tW = new TabbedWindow('bottom');

			// Create a tab called 'Tab 1' which refers to the element with the id 'bottom_1'. The

			// 1 indiciates set this as the default tab

			tW.registerTab('Tab 1','bottom_1',1);

			// Create a tab called 'Tab 2' which refers to the element with the id 'bottom_2'

			tW.registerTab('Tab 2','bottom_2');

			// Create a tab called 'Tab 3' which refers to the element with the id 'bottom_3'

			tW.registerTab('Tab 3','bottom_3');

			// Create a new tabbed window - 'bototm2' - NOTE: a tabbed window contains tabs

			// and the contents for the tabs

			var tW_console = new TabbedWindow('bottom2');

			tW_console.registerTab('Console','console',1);

			tW_console.registerTab('Plugins View','plugins');

			tW_console.registerTab('Files','files');

The console would go here

The plugins view goes here

The files view goes here

New Web Project Page

This is a sample page to show the functionality of jsToys.