Usage Data Atributes
|
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!
|
SmartPanel's HTML structure (this will change when the widget is intialized)
<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>
Initialization Options
$('#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" )
}
});