| TCH (statz) | ![]() #1, Főfasz (10579) |
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;
} |