layout panel button on title bar

[NormBParticipant]

Hi,
I would like to be able to use the space next to a layoutpanel’s title to add a button – is it possible?

For instance, in the layout below, is it possible to add a button next the the title “Music” of the RHS, Tab 1 layoutpanel?

	var layout = [{
		type: 'layoutGroup',
		orientation: 'horizontal',
		items: [
			{
				type: 'autoHideGroup',
				alignment: 'left',
				width: '5%',
				unpinnedWidth: '15%',
				popupContentSize: '200%', // Seems to be a multiple of the "width"
				items: [
					{
						type: 'layoutPanel',
						title: 'Menu',
						contentContainer: 'MenuPanel',
						initContent: function() {
							$("#jqxMenu").jqxMenu({theme: 'energyblue', mode: 'vertical', autoCloseOnClick: false});
						}
					},
					{
						type: 'layoutPanel',
						title: 'Tunes',
						contentContainer: 'TunelistPanel',
						initContent: TunesTreeInit
					},
					{
						type: 'layoutPanel',
						title: 'Others',
						contentContainer: 'OtherFilesPanel',
						initContent: OtherFilesTreeInit
					},
					{
						type: 'layoutPanel',
						title: 'Recent',
						contentContainer: 'RecentPanel',
						initContent: RecentTreeInit
					}
				]
			}, 
			{ // LHS
				type: 'layoutGroup',
				width: '55%',
				orientation: 'vertical',
				items: [
					{ // LHS - Upper
						type: 'tabbedGroup',
						height: '100%',
						items: [
							{ // Tab 1
								type: 'layoutPanel',
								title: 'ABC',
								contentContainer: 'AbcPanel',
								selected: true
							},
							{ // Tab 2
								type: 'layoutPanel',
								title: 'Modified',
								contentContainer: 'ModifiedPanel'
							}
						]
					}
				]
			},
			{ // RHS
				type: 'layoutGroup',
				width: '40%',
				orientation: 'vertical',
				items:[
					{ // RHS Upper
						type: 'tabbedGroup',
						height: '100%',
						items: [
							{ // Tab 1
								type: 'layoutPanel',
								title: 'Music',
								contentContainer: 'MusicDisplayPanel',
								selected: true
							},
							{ // Tab 2
								type: 'layoutPanel',
								title: 'Codes',
								contentContainer: 'CodesPanel'
							}
						]
					}
				]
			}
		]
	}];

	$('#jqxLayout').jqxLayout({ theme: 'energyblue', height: 750, layout: layout });

[svetoslav_borislavovParticipant]

Hi,

You can manually add a button by selecting the header element and appending a button to it.
Please see this sample: http://jsfiddle.net/Lrvmgofk/

I hope this helps!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[NormBParticipant]

Excellent – just the job.
Thanks

[Author]

Posts