Yksinkertainen esimerkki siitä kuinka tehdä yksinkertainen ponnahdusikkuna Javascriptillä käyttäen jQuery kirjastoa. Tarvitsee siis toimiakseen jQuery kirjaston (jquery.js samaan hakemistoon sivun kanssa), jonka voi ladata ilmaiseksi täältä:
http://jquery.com/
Eli sivuun tehdään normaali div, joka toimii popupina (piilossa oletuksena). Kun käyttäjä klikkaa hiiren nappia, jQueryn kuuntelija tuo popupin esille (tai piilottaa sen jos popup on jo näkyvillä).
Tästä tuli vähän pidempi kuin aluksi kaavailin, ja ilman koodiväritystä tämä näyttää sekavammalta kuin se lopulta onkaan.
Koodia saa käyttää vapaasti mihin tarkoituksiin haluaa.
<html>
<head>
<!-- CSS MÄÄRITYKSET ALKAVAT -->
<style type="text/css">
body { margin: 0; padding: 0; }
#popup
{
<!-- Laitetaan popup oletustason "päälle" z-indexillä -->
z-index: 1;
position: absolute;
width: 150px;
height: 100px;
padding: 5px;
border: 1px solid black;
background: lightblue;
display: none;
}
</style>
<!-- CSS MÄÄRITYKSET PÄÄTTYVÄT -->
<!-- JAVASCRIPT MÄÄRITYKSET ALKAVAT -->
<!-- Otetaan jQuery käyttöön -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//Esitellään tarvittavat muuttujat (globaaleiksi)
var hiiriPaikkaX = 0, hiiriPaikkaY = 0, popup, popupSisalto, popupAuki = false;
//Kun dokumentti on latautunut
jQuery(document).ready(function()
{
//Haetaan muutettavat elementit käyttäen jQueryn syntaksia
popup = $("#popup");
popupSisalto = $("#popup #popupSisalto");
//Kun hiiren nappia painetaan
$().mouseup(function(e)
{
//Päivitetään hiiren sijainti
hiiriPaikkaX = e.pageX;
hiiriPaikkaY = e.pageY;
//Klikataan jossain, eikä popup ole auki -> Avataan popup
if (popupAuki == false)
{
avaaPopup();
}
//Klikataan popupin sisällä kun se on auki -> Ei tehdä mitään
else if(hiiriPaikkaX > parseInt(popup.css("left")) &&
hiiriPaikkaX < parseInt(popup.css("left")) + parseInt(popup.css("width")) &&
hiiriPaikkaY > parseInt(popup.css("top")) &&
hiiriPaikkaY < parseInt(popup.css("top")) + parseInt(popup.css("height")))
{
}
//Muuten klikataan popupin ulkopuolella sen ollessa auki -> Suljetaan popup
else
{
suljePopup();
}
//Esimerkki kuinka tulostaa Firebugin konsoliin
console.log("Hiiren koordinaatit: " + hiiriPaikkaX + ", " + hiiriPaikkaY);
console.log("Popupin sijainti: " + parseInt(popup.css("left")) + ", " + parseInt(popup.css("top")));
});
});
//Avaa popupin hiiren kursorin kohdalla
function avaaPopup()
{
//Sijoitetaan laatikko hiiren kohdalle
popup.css("left", hiiriPaikkaX);
popup.css("top", hiiriPaikkaY);
//Laitetaan popupiin laatikon sijainti
popupSisalto.html("Sijainti: " + hiiriPaikkaX + ", " + hiiriPaikkaY);
//Näytetään popup, 400 on millisekunteina, kauanko aukaisemiseffekti kestää
popup.fadeIn(400);
//Laitetaan muistiin että popup on auki
popupAuki = true;
}
//Sulkee popupin
function suljePopup()
{
//Suljetaan popup, 400 on millisekunteina, kauanko sulkemiseffekti kestää
popup.fadeOut(400);
//Laitetaan muistiin että popup on kiinni
popupAuki = false;
}
</script>
<!-- JAVASCRIPT MÄÄRITYKSET PÄÄTTYVÄT -->
</head>
<!-- HTML MÄÄRITYKSET ALKAVAT -->
<body>
<h1>jQuery popup -esimerkki</h1>
<p>
Klikkaa hiirellä missä tahansa aukaistaksesi popupin.
</p>
<!-- Itse näytettävä popup, oletuksena piilossa -->
<div id="popup">
<p>
<a href="javascript:suljePopup();">Sulje</a>
</p>
<div id="popupSisalto"></div>
</div>
</body>
<!-- HTML MÄÄRITYKSET PÄÄTTYVÄT -->
</html>popup.css("left", hiiriPaikkaX);
popup.css("top", hiiriPaikkaY);Tämä varmaan tiedätkin, eikä sillä tässä ole paljoa merkitystä, mutta monta peräkkäistä kutsua saman olion css-metodiin voi korvata yhdellä:
popup.css({ left: hiiriPaikkaX, top: hiiriPaikkaY });Riviä popup.fadeOut(400); edeltävässä kommentissa pitäisi lukea sulkemis- eikä aukaisemisefekti.
Minusta hiiriPaikkaX ja hiiriPaikkaY ovat turhaan globaaleja. Ne voisivat olla paikallisia siellä missä niitä käytetään ja parametreja avaaPopup-funktiolle.
ääk! Hirveän pitkä!... :S
funktio kirjoitti:
popup.css("left", hiiriPaikkaX); popup.css("top", hiiriPaikkaY);Tämä varmaan tiedätkin, eikä sillä tässä ole paljoa merkitystä, mutta monta peräkkäistä kutsua saman olion
css-metodiin voi korvata yhdellä:popup.css({ left: hiiriPaikkaX, top: hiiriPaikkaY });Riviä
popup.fadeOut(400);edeltävässä kommentissa pitäisi lukea sulkemis- eikä aukaisemisefekti.
En tiennyt, kiitos vinkistä! Korjasin tuon virheellisen kommentin.
funktio kirjoitti:
Minusta
hiiriPaikkaXjahiiriPaikkaYovat turhaan globaaleja. Ne voisivat olla paikallisia siellä missä niitä käytetään ja parametrejaavaaPopup-funktiolle.
Itsekin vähän pyörittelin päätäni noiden globaalien kanssa, muistaakseni törmäsin johonkin käytännön ongelmaan kun yritin tehdä niitä paikallisiksi, ja nopeana quick-and-dirty korjauksena laiton ne globaaleiksi (älkää tehkö kuten minä teen vaan... :)
JAMSUO93 kirjoitti:
ääk! Hirveän pitkä!... :S
Onhan se vähän, suurelta osin koska halusin toimivan demon (pelkkän popup-koodin muuten valmiiseen ympäristöönhän saa hyvinkin triviaalisti). Kommentit ja koodin tyyli myös lisäävät pituutta (mutta mielestäni parantavat luettavuutta, mutta toisaalta koodivärjäyksen puute taas tekee koodista lähes lukukelvotonta).
No, ehkä tästä jollekulle on apua tai inspiraatiota.
Kyllä tästä ilman muuta hyötyä on.
Tästä on erittäin paljon hyötyä :)
En oikein keksi mihin tuollaista popupia tarvitsisi. Koodin idea on hyvä ja erityisesti kohta jossa määritellään divin sulkeminen hiiren X/Y-arvojen mukaan - tosin voisiko tuotakin tehdä helpommin?
Itse tein popupin vain asettamalla sen näkyväksi klikattaessa ja sulkeminen tapahtuu painamalla sulje-diviä. [OT] Tähän asiaan liittyen kysysin että miten tuon popupin sisältöä saisi säädeltyä parhaiten - Eli jos popupin sisältö/tarkoitus vaihtelisi aina eri tarkoituksissa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.