A jQuery Plugin to create highly configurable floating panels, modals, tooltips and hints/notifiers
document.querySelectorAll(".jsPanel").forEach(function(elmt){
elmt.minimize();
});
Sofern der browser NodeList.prototype.forEach() unterstützt https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
Also wenn du im minimierten panel gar keine controls haben willst wäre mein Ansatz ein anderer. Nutze option.minimizeTo um das automatische Erstellen eines minimierten panels zu unterbinden und erstelle ein eigenes minimiertes panel in option.onminimized.
jsPanel.create({
minimizeTo: false,
onminimized: function(panel) {
var min = document.createElement('div');
min.textContent = 'TEST';
min.style.padding = '5px 10px';
min.style.backgroundColor = 'yellow';
min.style.cursor = 'pointer';
var minContainer = document.querySelector('#jsPanel-replacement-container');
minContainer.append(min);
min.addEventListener('click', function(){
panel.normalize();
minContainer.removeChild(min);
});
}
});
Das ist deutlich einfacher als mühsam das default minimierte panel zu bearbeiten.
minimizeTo: false
schaftt zwar das original panel aus dem Weg, erzeugt aber kein Ersatzelement.onminimized
wird zunächst das custom Ersatzelement erzeugt und dann in den entsprechenden container eingefügt.ich hab die buttons einfach via css rausgenommen....
via display:none
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize {
display: none; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-maximize, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize {
display: none; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-close, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize {
display: none; }
dadurch werden sie einfach nicht angezeigt und ich halte mir die option offen, das der user später einfach über seine optionen frei entscheiden kann ob er sie vllt doch nutzen möchte....
einzig das klickevent für die titelbar muss ich mir jetzt noch suchen, so das man es darüber wieder normalisieren kann...
'''
onminimized: function(panel) {
var elemID = pagename + '-min';
var suche = document.getElementById(elemID);
$('#' + elemID).find('.jsPanel-controlbar').css('display','none');
suche.addEventListener('click', function(){
panel.normalize();
});
}
'''
so konnte ich das ganze auch lösen....
vorteil: ich musste nicht das ganze teil neu designen, sondern konnte weiterhin den standard nutzen...
viel spass im urlaub.... und danke
Hello Stefan .. I stumped across jsPanel and have been playing with it while messing around with node && socket-io; your library is very nice. I've had a couple of quirks here and there but have not come back to them to ping here (or elsewhere).
Two top of mind issues -- I'm @4.11.3 currently:
1) I've copied a hint/notify example and the jsPanel will not auto-close, nor does its close button work.
@wjwebb Concerning the toolbars I would recommend another approach. The header toolbar as well as the footer toolbar both have a class name 'active' when visible. So I would simply remove the class name to hide the toolbar. Then you can restore a toolbar by simply adding the class name again. Example:
var p = jsPanel.create({ headerToolbar: /* ... */ });
// to toggle visibility of header toolbar
jsPanel.toggleClass(p.headertoolbar, 'active');
// or reference the panel by ID
jsPanel.create({
id: 'panel-1',
headerToolbar: /* ... */
});
jsPanel.toggleClass(document.querySelector('#panel-1').headertoolbar, 'active');
Take a look at:
https://jspanel.de/#global/toggleClass
https://jspanel.de/#properties/headertoolbar
https://jspanel.de/#properties/footer