Golden Layout is a jQuery-based Windows admin that helps developers create responsive, draggable, changeable, customizable, and customizable interactive popups for modern UI / UX design.
golden layout alternative, golden layout examples, javascript layout manager, golden layout github, golden layout jquery
More advantages:
- Two topics: Darkness and Light.
- Touch and mobile-friendly.
- It allows you to store layout state in local storage.
- Supports nested and stacked windows.
- It allows you to synchronize two layouts in sequence.
- Custom header controls: minimize, maximize, close, open in a new window, etc.
- Compatible with ReactJS and AngularJS.
How to make use of it:
1. Load the bottom stylesheet and a theme CSS within the doc.
<!-- Core Stylesheet --> <link rel="stylesheet" href="goldenlayout-base.css" /> <!-- Dark Theme --> <link rel="stylesheet" href="goldenlayout-dark-theme.css" /> <!-- Light Theme --> <link rel="stylesheet" href="goldenlayout-light-theme.css" />
2. Create home windows (elements) and specify the content material sort as follows.
var config = { content: [{ type: 'row', content: [{ type: 'component', componentName: 'example', componentState: { text: 'Component 1' } }, { type: 'component', componentName: 'example', componentState: { text: 'Component 2' } }, { type: 'component', componentName: 'example', componentState: { text: 'Component 3' } }] }] };
3. Create a brand new Golden Layout occasion and cross the configs.
var myLayout = new GoldenLayout(config);
4. Register the home windows.
myLayout.registerComponent('example', function (container, state) { container.getElement().html('<h2>' + state.text + '</h2>'); });
5. Initialize the plugin.
myLayout.init();
6. All doable choices to config the windows.
var myLayout = new GoldenLayout({ openPopouts: [], settings: { // global settings hasHeaders: true, constrainDragToContainer: true, reorderEnabled: true, selectionEnabled: false, popoutWholeStack: false, blockedPopoutsThrowError: true, closePopoutsOnUnload: true, showPopoutIcon: true, showMaximiseIcon: true, showCloseIcon: true, responsiveMode: 'onload' // Can be onload, always, or none. }, dimensions: { borderWidth: 5, minItemHeight: 10, minItemWidth: 10, headerHeight: 20, dragProxyWidth: 300, dragProxyHeight: 200 }, labels: { // custm labels close: 'close', maximise: 'maximise', minimise: 'minimise', popout: 'open in new window', popin: 'pop in', tabDropdown: 'additional tabs' }, content: [{ type: 'component', componentName: 'someName', componentState: { some: 'value' }, content: [], // windows here id: 'some id', width: 30, height: 30, isClosable: true, title: 'some title', activeItemIndex: 1 }] });
7. All doable properties.
/* Props for GoldenLayout */ // the top item myLayout.root // DOM element containing the layout myLayout.rootcontainer // true if is initialized myLayout.isInitialised // configs myLayout.config // currently selected items myLayout.selectedItem // outer width of the layout myLayout.width // outer height of the layout myLayout.height // an array of BrowserWindow instances myLayout.openPopouts // true if the layout has been opened as a popout by another layout myLayout.isSubWindow // event hub myLayout.eventHub /* Props for Items (Layout content) */ // configs item.config // item type item.type // an array of child items item.contentItems // parent item item.parent // item id item.id // true if is initialized item.isInitialised // true if the item is maximised item.isMaximised // true if the item is the layout's root item item.isRoot // true if the item is a row item.isRow // true if the item is a column item.isColumn // true if the item is a stack item.isStack // true if the item is a component item.isComponent // a reference to the layoutManager that controls this item item.layoutManager // the item's outer element item.element // the item's inner element. item.childElementContainer /* Props for Container */ // container width item.width // container height item.height // parent container item.parent // tab control for this container item.tab // container title item.title // A reference to the GoldenLayout instance this container belongs to item.layoutManager // true if the item is currently hidden item.isHidden /* Props for Browser Window */ // true if is initialized window.isInitialised /* Props for Header */ // a reference to the LayoutManager instance header.layoutManager // parent element header.parent // an array of tabs header.tabs // currently selected activeContentItem header.activeContentItem // outer element of this Header header.element // tab container header.tabsContainer // element containing the close, maximise and popout button header.controlsContainer /* Props for Tabs */ // true if is the selected tab tab.isActive // a reference to the header tab.header // a reference to the content item tab.contentItem // outer element of this tab tab.element // title element tab.titleElement // true if is active tab.isActive
8. API strategies.
/* Methods for GoldenLayout */ // Constructs a new layout myLayout = new GoldenLayout(configuration, container); // Registers a new component myLayout.registerComponent( name, component ); // Initialize the plugin myLayout.init(); // Returns the current state of the layout and its components as a serialisable object. myLayout.toConfig(); // Gets the component registered with registerComponent(). myLayout.getComponent(name); // Updates the size myLayout.updateSize(width, height); // Destroy the layout myLayout.destroy(); // Creates new windows myLayout.createContentItem(itemConfiguration, parent); // Creates a new popout myLayout.createPopout(configOrContentItem, dimensions, parentId, indexInParent); // Turns a DOM element into a dragSource, meaning that the user can drag the element directly onto the layout where it turns into a contentItem. myLayout.newDragSource(element, itemConfiguration); // Selects a contentItem myLayout.selectItem(contentItem); // Minify/unminify configs GoldenLayout.minifyConfig(config); GoldenLayout.unminifyConfig(minifiedConfig); /* Methods for Items (Layout content) */ // Adds child items item.addChild(itemOrItemConfig, index); // Removes an item item.removeChild(contentItem, keepChild); // Replaces an item item.replaceChild(oldChild, newChild); // Updates the item size item.setSize(); // Sets title item.setTitle(title); // Recursively call methods on items in a tree item.callDownwards(functionName, functionArguments, bottomUp, skipSelf); // Emits an event that bubbles up the item tree until it reaches the root element (and after a delay the layout manager); item.emitBubblingEvent(name); // Similar to the item.parent.removeChild(item) item.remove(); // Removes the item from its current position in the layout and opens it in a window item.popout(); // Maximizes the item item.toggleMaximise(); // Selects the item item.select(); // Deselects the item item.deselect(); // Checks if has ID item.hasId(id); // Sets active item item.setActiveContentItem(contentItem); // Gets active item item.getActiveContentItem(); // Add an unique ID to the item item.addId(id); // Removes the ID item.removeId(id); // Get items by a filter item.getItemsByFilter(filterFunction); // Gets items by ID item.getItemsById(id); // Gets items by content type item.getItemsByType(type); // Gets components by name item.getComponentsByName(componentName); /* Methods for Container */ // Gets container's elements container.getElement(); // Sets states container.setState(state); // Extends states container.extendState(state); // Gets states container.getState(); // Hides the container container.hide(); // Shows the container container.show(); // Sets container size container.setSize(width, height); // Sets container title container.setTitle(title); // Close the container container.close(); /* Methods for Header */ // Sets active item header.setActiveContentItem(contentItem); // Create a new tab header.createTab(contentItem, index); // Removes a tab header.removeTab(contentItem); /* Methods for Tab */ // Sets tab title tab.setTitle(title); // Sets active tab tab.setActive(isActive);
9. Event handlers.
on( eventName, callback, context ) emit( eventName, arg1, arg2, ...argN ) trigger( eventName, arg1, arg2, ...argN ) unbind( eventName, callback, context ) off( eventName, callback, context ) /* Methods for GoldenLayout */ myLayout.on('stateChanged', function(){ // do something }) myLayout.on('titleChanged', function(){ // do something }) myLayout.on('activeContentItemChanged', function(){ // do something }) myLayout.on('itemDestroyed', function(){ // do something }) myLayout.on('itemCreated', function(){ // do something }) myLayout.on('componentCreated', function(){ // do something }) myLayout.on('rowCreated', function(){ // do something }) myLayout.on('columnCreated', function(){ // do something }) myLayout.on('stackCreated', function(){ // do something }) /* Methods for Container */ container.on('open', function(){ // do something }) container.on('resize', function(){ // do something }) container.on('destroy', function(){ // do something }) container.on('close', function(){ // do something }) container.on('tab', function(){ // do something }) container.on('show', function(){ // do something }) container.on('hide', function(){ // do something }) /* Methods for Browser Window */ window.on('initialised', function(){ // do something }) window.on('closed', function(){ // do something })
Responsive Draggable Resizable Windows Manager, Golden Layout Plugin/Github
See Demo And Download
Official Website(golden-layout): Click Here
This superior jQuery/javascript plugin is developed by golden-layout. For extra advanced usage, please go to the official website.
Be First to Comment