Keskustelu: Koodit: JavaScript: Ikkunasysteemi

Juhko [28.09.2009 19:27:31]

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>

tsuriga [28.09.2009 23:53:23]

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.

jlaire [29.09.2009 00:38:57]

!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.

Juhko [29.09.2009 12:46:30]

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ä?

ankzilla [02.10.2009 18:46:36]

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

Olli [29.10.2009 19:19:52]

lainaus:

Ei kukaan Putkalainen käytä IE:tä. :D

Ainakaan toivottavasti :S ie on paha :D

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Kilpailu