Dnes jsem nad tim stravil 2h tak snad to nekomu pomuze aby nad tim stravil mene casu. Muj problem byl ten ze jsem se pokousel to udelat pouze v HTML5.
O kombinaci HTML + CSS jsem nepremyslel, ted mi neslo o to jak by to vypadalo. Za kazdou cenu jsem se chtel vyhnout JS.
Docela se mi zalibila technologie wia-aria, coz je technologie pro snadnou pristupnost webovych stranek, hlavne pomoci klavesnice. Prohlizel jsem si ruzne stranky ktere meli ve svych zdrojacich atributy aria-*, ale nedokazal jsem prijit na to jak to je propojene – mozna i proto ze jsem se vyhybal JavaScriptu.
Nakonec ale jak jsem objevil tutorial na Jquery UI, tak jsem se rozhodl ze to zkusim s nim. A ono to fungovalo, uz na tom webu, proto jsem si stahl tuto knihovnu a pridal s JQuery do stranky:
|
1 2 |
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"> </script> <script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"> </script> |
Pak jsem zkopiroval CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style type="text/css"> div#parent { width: 80px; margin: 10px auto; padding: 5px; border: 1px solid #777; background-color: #fbca93; text-align: center; } div.positionable { width: 75px; height: 75px; position: absolute; display: block; right: 0; bottom: 0; background-color: #bcd5e6; text-align: center; } select, input { margin-left: 15px; } </style> |
A pote JavaScript, ktery jsem trochu upravil, aby pracoval tak ze pokud bude na necem hover, tak se bude zobrazovat podnabidka. Metoda je “univerzalni”, to znamena ze staci pouze urcit v parametrech metody setDynamicShow urcit rodice a prvek ktery se ma zobrazovat pod nim a metoda se o vse postara:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script type="text/javascript"> var positionable = ".positionable"; var parent = "#parent"; $(document).ready(function () { //-Zde muzete volanim metody setDynamicShow nastavit libovolny pocet tlacitek a jinych elementu setDynamicShow(parent, positionable); }); function setDynamicShow(parent, positionable) { $(parent).hover(function () { $(positionable).show(); }); $(positionable).hover(function () { $(positionable).show(); }); $(positionable).mouseleave(function () { $(positionable).hide(); }); $(parent).mouseleave(function () { $(positionable).hide(); }); $(positionable).css("opacity", 0.5); $(positionable).hide(); position(parent, positionable); } function position(parent, positionable) { $(positionable).position({ of: $(parent), my: "right" + " " + "top", at: "right" + " " + "bottom", offset: "", collision: "none" + " " + "none" }); } </script> |
A na zaver jeste snad ten nejjednodussi html kod ktery muze byt – a prece to vsechno skvele funguje:
|
1 2 3 4 5 6 7 8 9 10 |
<div> <p> Tlacitko </p> </div> <div> <p> Podnabidka </p> </div> |
A na uplny zaver jen obrazky jak to u me funguje:
