A jQuery Plugin to create highly configurable floating panels, modals, tooltips and hints/notifiers
stimmt schon.... ich hatte bei v3 auch nicht so ganz den erfolg den ich wollte.... deswegen ging ich recht schnell zur alpha über und war davon sehr angetan...
ich versuche mir gerade eine neue version meines browsergames zu erstellen... und da möchte ich gerne solche fenster verwenden.... und bisher erfüllen deine panels genau das, was ich möchte....
zumal sie viele aha-effekte bei mir in den letzten tagen hervorgebracht hat und ich für mich persönlich sichtbare fortschritte erzielen konnte...
hier mal meine funktion die ich aufrufe um meine fenster variable zu erstellen...
function setContent(pagename){
//mit pagenameID kann ein Panel nur einmal geöffnet werden.... ohne mehrfach
if(pagename == 'main') {
var pagenameID = '';
}else{
var pagenameID = pagename;
}
jsPanel.create({
id: pagenameID,
theme: 'rebeccapurple',
contentSize: {
width: function() { return Math.min(730, window.innerWidth*0.9);},
height: function() { return Math.min(400, window.innerHeight*0.5);}
},
position: {my: "center-top", at: "center-top", offsetY: 15},
animateIn: 'jsPanelFadeIn', // wird die zeile auskommentiert, funktioniert die opacity
headerTitle: pagename,
contentAjax: 'content/' + pagename + '.html'
})
}
der link funktioniert im übrigen nicht ...
http://jspanel.de/demos/group-minimized.html
hier geklickt: http://jspanel.de/api/#option/minimizeTo
bei
Go to group-minimized.html for an example.
und bei der funktion fallen mir direkt 2 dinge auf....
während des normalen minimized reihen sich die minimierten fenster nacheinander ein.... bei der gruppierung, drängelt sich die gruppe vor das undefinierte minimierte fenster.... die reihenfolge wird somit verändert...
die gruppe lässt sich zwar per mouseover anzeigen, jedoch kann ich den 2. und 3. reiter nicht erreichen und muss demnach die jeweils erste öffnen...
function miniAll() {
var x = document.getElementsByClassName("jsPanel");
var i;
for (i = 0; i < x.length; i++) {
x[i].minimize();
}
}wenn ich meinem body nem overflow: hidden gebe, muss ich zwei mal zb den minimize-btn klicken bevor es sich minimiert (gleiches gilt auch fürs closen und maximize)
hab zwar nun nen weg für mich gefunden auf den style-tag zu verzichten, aber es hat ne sekunde gedauert um den fehler zu finden....
vllt blockiert der style die initialisierung beim laden....
document.querySelectorAll(".jsPanel").forEach(function(elmt){
elmt.minimize();
});der fehler tritt allerdings nur bei firefox auf...
bau-dein-bunker.de/test/test3/ .... dort befindet sich mein aktuelles projekt an dem ich bastel....
wenn ich ein panel (zb info) öffne und das dann minimiere, landet es ja in der taskleiste meiner seite.... wenn ich es dann von dort via klick öffne, dann öffnet es sich auch... aber wenn ich dann die maus bewege, scheint es so als würde ich die maustaste festhalten und nen text markieren...
wie gesagt... der fehler scheint nur bei ff aufzutreten....
ne idee woran das liegen kann?
hab gerade mal die jspanel.js von der aktuellen version reinkopiert....
und ja, da werden dann im minimierten zustand die controls angezeigt und es kommt nicht mehr zu dem fehler....
jetzt versuch ich die mal wieder auszublenden und hoffe das es dann geht.... will die ja an der stelle nicht haben... ich geb feddback... und ja... ich weiß das die 4.0.0 auch ne ne alpha von ner aplha war... hehe
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.In
onminimized wird zunächst das custom Ersatzelement erzeugt und dann in den entsprechenden container eingefügt.Dann noch ein event handler der das original panel wiederherstellt und das Erstzelement entfernt.
Ich denke das kannst du recht einfach an deine Bedürfnisse anpassen.
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
