Potrebujete vytvoriť vyskakovacie okno alebo iné dialógové (plávajúce) okno pomocou jQuery? Dialog() Widget v knižnici jQuery UI umožňuje ľahko vytvoriť vyskakovacie okno, ktoré bude robiť presne to, čo chcete. V tomto článku si povieme, ako použiť jQuery dialog().
jQuery a jQuery UI
jQuery a JavaScript sú veľmi užitočné nástroje pre vývoj webových aplikácií. jQuery predstavuje knižnicu, ktorá pridáva veľa užitočných možností pre JavaScript; jQuery UI je knižnica prvkov užívateľského rozhrania pre jQuery (tiež zadarmo a open-source ako jQuery). Ak chcete použiť jQuery alebo jQuery UI vo svojich projektoch, môžete si tieto knižnice stiahnuť a vo svojom projekte použiť lokálne súbory alebo ako si vytvoríte odkaz na verejne dostupné on-line externé zdroje, ako v tomto príklade:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Základná syntax pre používanie väčšiny príkazov jQuery vyzerá takto:
$("vyber_nieco").urob_nieco(parametre, funkcie, atd.);
Príklady z jQuery, ktoré budem uvádzať, sú väčšinu vo vnútri funkcie používané metódu jQuery ready() – t.j. samotný kód jQuery sa spustí len vtedy, keď je táto stránka plne načítaná:
$(document).ready(function(){...});
jQuery Dialog() Widget
Dialog() Widget je súčasťou knižnice jQuery UI. Môžete ho použiť rovnako ako je typický spôsob jQuery – čiže jeho syntax bude súčasťou „.urob_nieco“ ako vo vyššie uvedenom príklade.
Vzhľadom na to, že je dialog() súčasť knižnice UI (user interface = užívateľské rozhranie), je potrebné pripojiť túto knižnicu jQuery UI rovnako, ako v prípade jQuery:
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Dialog() Widget (rovnako ako mnoho prvkov jQuery UI) musí byť tiež spojený s témou (.css), pretože potrebuje niekoľko grafických prvkov, aby užívateľské rozhranie fungovalo korektne. Témy si môžete stiahnuť z oficiálnych stránok jQuery UI alebo z iných miest, a prípadne ich upraviť a prispôsobiť si ich svojim požiadavkám. Alebo si ich môžete vložiť do svojho projektu z externého zdroja, ako v tomto príklade:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
Vyskakovacie okno (popup/modal window)
Je čas, aby sme sa pustili do práce a ukázali si dialog() widget v praxi. Nasledujúci kód umožňuje užívateľovi otvoriť dialógové okno:
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script> $(document).ready(function(){ $( "#hello" ).dialog({ autoOpen: false }); $( "#openWin" ).click(function() { $( "#hello" ).dialog( "open" ); }); }); </script> </head> <body> <button id="openWin">Otvor okno</button> <div id="hello" title="Ahoj"> <p>Ahoj, ja len poviem: Dobrý den!</p> </div> </body> </html>
Keď používateľ klikne na tlačidlo „Otvor okno“ – zobrazí sa dialógové okno uprostred stránky s názvom „Ahoj!“ a textom „Ahoj, ja len poviem: Dobrý deň!“. Toto dialógové okno môže používateľ kliknutím na krížik v pravom hornom rohu zatvoriť.
Otvorenie vyskakovacieho okna dialog()
V provom riadku kódu sme povedali, aby sa DIV „hello“ neotvoril automaticky po načítaní stránky (autoOpen: false):
$( "#hello" ).dialog({ autoOpen: false });
Chceme, aby sa okno otvorilo až po kliknutí na tlačítko – preto pridáme click() function:
$( "#openWin" ).click(function() { $( "#hello" ).dialog( "open" ); });
Animácia vyskakovacieho okna
K dialog() môžeme priradiť akýkoľvek efekt, ktorý používa jQuery UI – napríklad:
$( "#hallo" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#openWin" ).click(function() { $( "#hallo" ).dialog( "open" ); });
Zobraziť vyskakovacie okno po načítaní stránky
Pokiaľ chceme zobraziť vyskakovacie okno ihneď po načítaní stránky – kód by vyzeral asi takto:
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script> $(document).ready(function(){ $("#hello").dialog({ autoOpen: true, resizable: false }); }); </script> </head> <body> <div id="hello" title="Ahoj"> <p>Ahoj, ja len poviem: Dobrý deň!</p> </div> </body> </html>
Viac o možnostiach jQuery dialog() si môžete prečítať na oficiálnych stránkach jQuery UI.