jQuery UI Widgets Forums Layouts Panel and Responsive Panel layout panel button on title bar

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  NormB 2 weeks, 6 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • layout panel button on title bar #123890

    NormB
    Participant

    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 });
    
    layout panel button on title bar #123896

    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/

    layout panel button on title bar #124539

    NormB
    Participant

    Excellent – just the job.
    Thanks

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

You must be logged in to reply to this topic.