TCH (statz) | #1, Főfasz (10466) |
8525 | #2e81 | ^ | Idézet | Tue, 16 Sep 2014 14:55:23 +02 |
213.222.*.* | *.catv.broadband.hu |
Írjunk fejlécnél megragadható, klónozható, mindentől függetlenül mozgatható, overlay-t támogató és CSS-ből 100%-ig bedesignolható "ablakot" kevesebb, mint 150 sornyi JavaScriptből rovat:function new_fwin(data) { var fwin_caption = document.createElement('div'); fwin_caption.className = 'fwin-title'; fwin_caption.innerHTML = data.title; var fwin_close = document.createElement('button'); fwin_close.className = 'fwin-close'; fwin_close.innerHTML = 'X'; fwin_close.onmousedown = function (e) { this.parentNode.dataset.block = '1'; var cld = this; window.onmouseup = function () { cld.parentNode.dataset.block = '0'; window.onmouseup = null; }; } fwin_close.onmouseup = function (e) { if (this.parentNode.dataset.block == '1' && e.button == 0) { this.parentNode.dataset.block = '0'; document.getElementById(data.id).style.visibility = 'hidden'; overlay_check(); typeof(data.callback) == 'function' ? data.callback() : 0; } }; var fwin_header = document.createElement('div'); fwin_header.className = 'fwin-header'; fwin_header.dataset.block = '0'; fwin_header.style.visibility = data.visibleHeader === true ? '' : 'hidden'; fwin_header.onmousedown = function (e) { if (e.button == 0 && this.dataset.block == '0') { var z = 0; var u = document.getElementsByClassName('fwin-container'); for (var i = 0; i < u.length; ++i) { u[i].style.zIndex > z ? z = u[i].style.zIndex : 0; } var fwin = document.getElementById(data.id); fwin.style.zIndex = (parseInt(z) + 1) + ''; var ox = e.clientX - parseInt(fwin.style.left); var oy = e.clientY - parseInt(fwin.style.top); window.onmousemove = function (e) { fwin.style.left = (e.clientX - ox) + 'px'; fwin.style.top = (e.clientY - oy) + 'px'; }; window.onmouseup = function (e) { if (e.button == 0) { window.onmouseup = null; window.onmousemove = null; } }; } 'stopPropagation' in e ? e.stopPropagation() : 0; 'preventDefault' in e ? e.preventDefault() : 0; }; fwin_header.appendChild(fwin_close); fwin_header.appendChild(fwin_caption); var fwin_body = document.createElement('div'); fwin_body.className = 'fwin-content'; fwin_body.innerHTML = data.content; var fwin_container = document.createElement('div'); fwin_container.id = data.id; fwin_container.className = 'fwin-container'; fwin_container.setAttribute('data-overlay', data.overlay === true ? '1' : '0'); fwin_container.style.zIndex = '1000001'; fwin_container.style.position = 'fixed'; fwin_container.style.visibility = data.show === true ? '' : 'hidden'; data.width != undefined && data.width != false ? fwin_container.style.width = data.width + 'px' : 0; data.height != undefined && data.height != false ? fwin_container.style.height = data.height + 'px' : 0; if (data.center === true) { fwin_container.style.left = (((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) >> 1) - (data.width >> 1)) + 'px'; fwin_container.style.top = (((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) >> 1) - (data.height >> 1)) + 'px'; } else { fwin_container.style.left = data.left != undefined && data.left != false ? data.left + 'px' : '0px'; fwin_container.style.top = data.top != undefined && data.top != false ? data.top + 'px' : '0px'; } fwin_container.appendChild(fwin_header); fwin_container.appendChild(fwin_body); document.body.appendChild(fwin_container); data.stretch === true ? fwin_container.childNodes[1].style.height = (fwin_container.clientHeight - (fwin_container.childNodes[0].clientHeight + ((fwin_container.scrollHeight - fwin_container.clientHeight) << 2))) + 'px' : 0; if (data.overlay === true && overlay == null) { overlay = document.createElement('div'); overlay.className = 'fwin-overlay'; overlay.style.zIndex = '1000000'; overlay.style.visibility = 'hidden'; overlay.style.position = 'fixed'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.top = '0px'; overlay.style.left = '0px'; overlay.style.backgroundColor = data.overlayColor; document.body.appendChild(overlay); overlay_check(); } } function fwin_show(id) { document.getElementById(id).style.visibility = ''; overlay_check(); } function overlay_check() { if (overlay != null) { var x = document.getElementsByClassName('fwin-container'); for (var i = 0; i < x.length; ++i) { if (x[i].getAttribute('data-overlay') != 1) { continue; } if (x[i].style.visibility != 'hidden') { overlay.style.visibility = 'visible'; return; } } overlay.style.visibility = 'hidden'; } } var overlay = null;Update 2015.10.10.: • Added: A bezáró gombra került egy "X". • Added: A bezáró gombnak most már van callback-je. • Saned: A bezáró gomb innentől nem mousedown eseményre reagál, hanem normális klikkre. • Saned: Felesleges stopPropagation()-ök, meg preventDefault()-ok kihajigálva. • Fixed: Ha mozgatás közben a pointer elhagyta az ablakot, akkor megállt a mozgás és ha visszament, folytatódott akkor is, ha a bal gomb nem volt nyomva. • Fixed: Operában az ablak mozgatás közben elcsúszott balra/fel, mert Operában az offsetLeft/offsetTop máshogy működik. Update 2017.02.27.: • Fixed: Close esetén a callback akkor is le akart futni, ha nem volt megadva. Hibát nem okozott, csak a konzolban jelent meg, hogy nem sikerült. Funkciók: new_fwin(data): Ez hozza létre a mozgatható ablakot. A data paraméter egy JS tömb, amiben a következő kulcsok lehetnek (az id kötelező, a többi opcionális): • id: Az ID, amit az ablak konténere kap, és amivel hivatkozni tudunk rá. • visibleHeader: Látható-e az ablak fejléce. • title: A fejlécen található felirat. • content: Az ablak tartalma. • stretch: Húzza-e szét az ablak tartalmának konténerét 100% magasságra. • left: Az ablak bal felső sarkának X koordinátája. • top: Az ablak bal felső sarkának Y koordinátája. • width: Az ablak szélessége. • height: Az ablak magassága. • center: Rakja-e középre az ablakot létrehozáskor. (Felülírja az X,Y koordinátákat.) • show: Jelenítse-e meg az ablakot automatikusan. • overlay: Takarja-e ki az ablak megjelenítésekor a többi tartalmat egy overlay-jel. • overlayColor: Az overlay színe. • callback: A függvény, amit az ablak bezárásakor végrehajt a browser. fwin_show(id): Ablak megjelenítése, az id paraméter az ablak konténerének ID-je, amit a new_fwin függvény data paraméterében átadtunk létrehozáskor. CSS osztályok: fwin-overlay: Az overlay-ra osztálya. fwin-container: Az ablak konténerének osztálya. fwin-header: Az ablak fejlécének osztálya, a szülő a fwin-container. fwin-close: Az ablak bezárógombjának osztálya, a szülő a fwin-header. fwin-title: Az ablak feliratának osztálya, a szülő a fwin-header. fwin-content: Az ablak tartalmának osztálya, a szülő a fwin-container. És akkor egy kapaszkodó a CSS-hez: .fwin-container { border: 2px solid #000000; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; background-color: #aaaaaa; } .fwin-header { width: 100%; border-bottom: 2px solid #000000; background-color: #6688bb; cursor: move; } .fwin-close { text-align: center; background-color: #6688bb; cursor: default; color: #ffffff; border: 0px; } .fwin-title { display: inline-block; padding-left: 4px; color: #ffffff; padding: 2px; } .fwin-content { padding: 2px; } |