Turn your ordinary panels to SmartPanel. Smartpanels lets you add buttons dynamically to panel header using data attributes. All panels are Sortable across all bootstrap col-spans and uses localStorage
to store position, color, collapse state and various other panel settings. Use built in hooks to detect state change of panels and execute your script.
This plugin is exclusive and is built in house to compliment SmartAdmin WebApp. The current version of this plugin does not allow to generate dynamic widgets.
.panel
. To disable all, we add the following: data-panel-sortable
, data-panel-collapsed
, data-panel-fullscreen
, data-panel-close
, data-panel-locked
, data-panel-refresh
, data-panel-reset
, data-panel-color
data-refresh-timer="1000"
. You can disable refresh button by adding the attribute data-panel-refresh
data-panel-color
. You can also add your own colors to the pallet setting the panelColors
option
data-panel-reset
.panel-content
. Check out the general panels page for more examples of what you can add to panel headers and panel footer
data-panel-collapsed
.collapse
to your .panel-container
.collapse
to your .panel-container
Usefull when viewing images, gallery, tables with large data and maps. There are much useful applications to this method. When a panel is on fullscreen, printing a page will only print the fullscreen panel content.
data-panel-close
data-panel-locked
data-panel-sortable
data-panel-custombutton
HTML5 data attributes | Example value(s) | Desctription |
---|---|---|
data-panel-collapsed | false or blank | Prevent a panel from having a toggle button (can only be used with the value 'false'). |
data-panel-fullscreen | false or blank | Prevent a panel from having a fullscreen button (can only be used with the value 'false'). |
data-panel-close | false or blank | Prevent a panel from having a delete button (can only be used with the value 'false'). |
data-panel-locked | false or blank | Prevent a panel from having a lock button (can only be used with the value 'false'). |
data-panel-refresh | false or blank | Prevent a panel from having a refresh button (can only be used with the value 'false'). |
data-refresh-timer | int |
Set timer for refresh panel. See data-panel-refresh
|
data-panel-reset | false or blank | Prevent a panel from having a reset button (can only be used with the value 'false'). |
data-panel-color | false or blank | Prevent a panel from having color selection option (can only be used with the value 'false'). |
data-panel-custombutton | false or blank | Prevent a panel from having a custom button (can only be used with the value 'false'). |
data-panel-sortable | false or blank | Restrict a panel's sorting feature (can only be used with the value 'false'). |
These HTML5 attributes are used as individual panel options. Main options can be changed in the panel plugin it self. Notice: data attributes can only have 1 boolan value or none! |
<div id="panel-id" class="panel"> <div class="panel-hdr"> <h2> Panel Title </h2> </div> <div class="panel-container show"> <div class="panel-content"> Content </div> </div> </div>
$('#js-page-content-demopanels').smartPanel({ localStorage: true, onChange: function () {}, onSave: function () {}, opacity: 1, deleteSettingsKey: '#deletesettingskey-options', settingsKeyLabel: 'Reset settings?', deletePositionKey: '#deletepositionkey-options', positionKeyLabel: 'Reset position?', sortable: true, buttonOrder: '%collapse% %fullscreen% %close%', buttonOrderDropdown: '%refresh% %locked% %color% %custom% %reset%', customButton: true, customButtonLabel: "Custom Button", onCustom: function () {}, closeButton: true, onClosepanel: function() { if (myapp_config.debugState) console.log($(this).closest(".panel").attr('id') + " onClosepanel") }, fullscreenButton: true, onFullscreen: function() { if (myapp_config.debugState) console.log($(this).closest(".panel").attr('id') + " onFullscreen") }, collapseButton: true, onCollapse: function() { if (myapp_config.debugState) console.log($(this).closest(".panel").attr('id') + " onCollapse") }, lockedButton: true, lockedButtonLabel: "Lock Position", onLocked: function() { if (myapp_config.debugState) console.log($(this).closest(".panel").attr('id') + " onLocked") }, refreshButton: true, refreshButtonLabel: "Refresh Content", onRefresh: function() { if (myapp_config.debugState) console.log($(this).closest(".panel").attr('id') + " onRefresh") }, colorButton: true, colorButtonLabel: "Panel Style", onColor: function() { if (myapp_config.debugState) console.log($(this).closest(".panel").attr('id') + " onColor") }, panelColors: ['bg-primary-700 bg-success-gradient', 'bg-primary-500 bg-info-gradient', 'bg-primary-600 bg-primary-gradient', 'bg-info-600 bg-primray-gradient', 'bg-info-600 bg-info-gradient', 'bg-info-700 bg-success-gradient', 'bg-success-900 bg-info-gradient', 'bg-success-700 bg-primary-gradient', 'bg-success-600 bg-success-gradient', 'bg-danger-900 bg-info-gradient', 'bg-fusion-400 bg-fusion-gradient', 'bg-faded'], resetButton: true, resetButtonLabel: "Reset Panel", onReset: function() { if (myapp_config.debugState) console.log( $(this).closest(".panel").attr('id') + " onReset callback" ) } });