|
Teendők lista (to-do list) készítése
2014.11.09. 16:12
A demót az oldalon baloldalt is láthatjátok, vagy itt:
Hamarosan...
Avagy amiket nem "kéne" elfelejtenem.
Az elkészítése pedig a következő. A leírásban inkább csak a Javascript kódot kell kicsit magyaráznom, mert szerintem a css kódot már tudjátok értelmezni. :) Az egészet egy szövegdobozból és egy űrlapos elemből hoztam össze.
A Javascript kód:
<form name="teendok_lista">
<label><input type="checkbox" name="jelolo" value="Halloween" CHECKED >Halloween</br></label>
<label><input type="checkbox" name="jelolo" value="Szülinapom">Szülinapom (dec.02.) </br></label>
<label><input type="checkbox" name="jelolo" value="Mikulás">Mikulás </br></label>
<label><input type="checkbox" name="jelolo" value="Karácsony">Karácsony :) </br> </label>
Szétszedtem őket, hogy jobban átláthassátok. Amit pirossal jelöltem a kódban, oda jön a szöveg, amit akartok, hogy megjelenjen.
Kék színnel láthatjátok a CHECKED szócskát ami annyit tesz, hogy amint a példában látjátok a Halloween szó előtti négyzet alapértelmezetten be van pipálva. Na már most, ha azt onnan kiveszitek, akkor értelem szerűen a pipa eltűnik, viszont ha máshova írjátok/máshova is írjátok, akkor a jelölő négyzetnél megjelenik a pipa. A javascript kód része ennyi is lenne. Ezt persze bővíthetitek (a listát) ezzel a kódrészlettel:
<label><input type="checkbox" name="jelolo" value="Karácsony" readonly>Karácsony :) </br> </label>
A css kódra nem írtam segítséget de ha valakinek segítség kell, nyugodtan írjon nekem. :)
CSS kód:
<style type="text/css">
#idezet_doboz{
width: 230px;
padding-left: 3px;
background: #F5F5F5;
background-image:url();
font-size: 10pt;
color: #c0c0c0;
font-weight: normal;
line-height: 15pt;
padding: 4px;
font-family: tahoma;
font-style: none;
letter-spacing: 1px;
border: 1pt dashed #E7D8BF;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
#idezet_doboz:hover {
padding-left: 3px;
background: #F5F5F5;
background-image:url();
font-size: 10pt;
color: #000000;
font-weight: normal;
line-height: 15pt;
padding: 4px;
font-family: tahoma;
font-style: none;
letter-spacing: 1px;
border: 1pt dashed #DB7093;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}</style>
| 
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum
