Tekee näytölle otsikkopalkista siirrettäviä, Windows-tyylisiä ikkunoita. Ikkunat voivat sisältää normaalia HTML-koodia.
Demo: http://jjp.jouluserver.com/roskaa/ikkunat.html
Muokkaushistoria
28.09.2009: Toimivuutta hitailla koneilla parannettu.
29.09.2009: Bugikorjaukset & koodin siirto head-osioon.
<html>
<head>
<title>Ikkunat</title>
<style type="text/css">
body {
background-color: black;
color: white;
}
.window {
border: 2px solid gray;
border-top: 2px solid white;
border-left: 2px solid white;
color: black;
background-color: #d8d8d8;
position: fixed;
}
.windowtitle {
background-color: blue;
padding: 3px;
color: white;
font-weight: bold;
}
</style>
<script type="text/javascript">
var mouseon=""; //Ikkuna, jonka päällä hiiri on
var mouseon2=""; //Väliaikaismuuttuja samaan tarkoitukseen
var mousepressed=0; //Onko hiiren painike painettu
var hx=0; //Hiiren etäisyydet käsiteltävän otsikkopalkin vasemmasta yläkulmasta
var hy=0;
var mousex=0; //Hiiren koordinaatit
var mousey=0;
var cz=3; //Z-koordinaatti
function windowEvents(e) {
if(!mouseon=="") {
if(mousepressed==1) {
mousex=e.pageX;
mousey=e.pageY;
document.getElementById(mouseon).style.left=mousex-hx;
document.getElementById(mouseon).style.top=mousey-hy;
}
}
}
//Ikkunan valinta
function pickWindow(e) {
if(mouseon=="") {
var temp=e.target.id;
mouseon=temp.substring(0,temp.length-2);
}
}
function unPickWindow(e) { if(mousepressed==0) mouseon=""; }
//Ikkunan siirto
function mousePress(e) {
mousepressed=1;
if(mouseon != "") {
mousex=e.pageX; //Haetaan hiiren koordinaatit
mousey=e.pageY;
document.getElementById(mouseon).style.zIndex=cz; cz++; //Z-koordinaatti
temp=document.getElementById(mouseon).style.left;
hx=mousex-Number(temp.substring(0,temp.length-2));
temp=document.getElementById(mouseon).style.top;
hy=mousey-Number(temp.substring(0,temp.length-2));
}
}
//Ikkunan aktivointi
function clickWindow(e) {
var temp=e.target.id;
document.getElementById(temp).style.zIndex=cz; cz++;
}
//Hiiren painikkeen vapautus
function mouseUnPress(e) { mousepressed=0; }
//Otsikon vaihto
function setCaption(wndname,wndtitle) {
var wcontent=document.getElementById(wndname).innerHTML;
document.getElementById(wndname).innerHTML='<div class="windowtitle" id="'+wndname+'_t" onmousedown="windowEvents();">'+wndtitle+'</div>'+wcontent.substring(wcontent.indexOf("<!--windowsystem_endtitle-->"));
document.getElementById(wndname+"_t").onmouseover=pickWindow;
document.getElementById(wndname+"_t").onmouseout=unPickWindow;
}
//Alustus
if (window.captureEvents) {
window.captureEvents(Event.MOUSEOVER);
window.onmousemove=windowEvents;
window.onmousedown=mousePress;
window.onmouseup=mouseUnPress;
}
//Ikkunan määrittely
function defineWindow(wndname,wndx,wndy,wndw,wndh,wndtitle) {
if (window.captureEvents) {
//Otsikkopalkin luonti
document.getElementById(wndname).innerHTML='<div class="windowtitle" id="'+wndname+'_t" onmousedown="windowEvents();">'+wndtitle+'</div><!--windowsystem_endtitle-->'+document.getElementById(wndname).innerHTML;
//Koordinaatit
document.getElementById(wndname).style.left=wndx;
document.getElementById(wndname).style.top=wndy;
//Mitat
document.getElementById(wndname).style.width=wndw;
document.getElementById(wndname).style.height=wndh;
//Z-koordinaatti
document.getElementById(wndname).style.zIndex=1;
//Käsittelijät
document.getElementById(wndname+"_t").onmouseover=pickWindow;
document.getElementById(wndname+"_t").onmouseout=unPickWindow;
document.getElementById(wndname).onmousedown=clickWindow;
}
}
</script>
</head>
<body>
<div class="window" id="ikkuna1">
Tämä on JavaScript-käyttöinen ikkunasysteemi. Ikkunoita voi siirtää hiirellä otsikkopalkista.
</div>
<div class="window" id="ikkuna2">
Tässä on muutamia lisätoimintoja, kuten otsikon vaihtaminen.<br>
<form><input type="button" value="Vaihda otsikko" onClick="setCaption('ikkuna2','Otsikko vaihdettu');"><br><input type="button" value="Siirrä sattumanvaraisesti" onClick="document.getElementById('ikkuna2').style.left=Math.random()*500; document.getElementById('ikkuna2').style.top=Math.random()*500;"></form>
</div>
<div class="window" id="ikkuna3">
Ikkunoihin voi kirjoittaa HTML-koodia aivan normaalisti, myös esim. kuvia voi lisätä.<br>
<center><img src="https://www.ohjelmointiputka.net/img/palkki2.jpg" width="500px"></center>
</div>
JavaScript-ikkunasysteemin esimerkki.
<script type="text/javascript">
defineWindow("ikkuna1",30,30,200,150,"Ikkunasysteemi");
defineWindow("ikkuna2",140,70,400,300,"Toimintoja");
defineWindow("ikkuna3",340,100,600,300,"Käyttö");
</script>
</body>
</html>Plussaa ideasta, miinusta toteutuksesta. Kiva sinänsä tietää, että joku vääntää ihan rautalangasta, mutta valmiita kirjastoja käyttämällä selaintuki paranisi huomattavasti vähemmällä vaivalla. Koodi on melko epäselvää, ja laitettu valitettavasti sivun rakennemerkkauksen sisään head-osion sijaan.
!mouseon==""
Tuo on sama kuin (!mouseon) == "". Käytä sulkuja, !(mouseon == ""), tai selvemmin näin: mouseon != "".
Parempia ikkunasysteemejä tosiaan on jo turhankin paljon. Jos toteutus olisi jollain tavalla opettavainen, voisi tämä olla ihan hyvä vinkki, mutta ei se oikein ole. Koodi olisi huomattavasti helpompaa luettavaa, jos siinä olisi enemmän välejä. Globaalit muuttujat kannattaisi nimetä selkeämmin ja/tai selittää niiden käyttötarkoitus määrittelyn yhteydessä. Ihan parin rivin juttuja pidemmät JavaScript-pätkät kannattaa laittaa erillisiin .js-tiedostoihin, varsinkin jos niitä voi käyttää useammalla kuin yhdellä sivulla.
Tein pyytämänne korjaukset. Koodivinkki on vielä hieman kesken, mutta kiitos palautteesta. Funktiot on helppo siirtää erilliseen .js-tiedostoon.
Onko vinkkejä siitä, miten tuon saisi toimimaan IE:llä?
Juhko kirjoitti:
Tein pyytämänne korjaukset. Koodivinkki on vielä hieman kesken, mutta kiitos palautteesta. Funktiot on helppo siirtää erilliseen .js-tiedostoon.
Onko vinkkejä siitä, miten tuon saisi toimimaan IE:llä?
Ei kukaan Putkalainen käytä IE:tä. :D
lainaus:
Ei kukaan Putkalainen käytä IE:tä. :D
Ainakaan toivottavasti :S ie on paha :D
Aihe on jo aika vanha, joten et voi enää vastata siihen.