| Autor | Zpráva | ||
|---|---|---|---|
| igid26 Profil |
#1 · Zasláno: 21. 2. 2012, 10:03:43
Dobrý deň
Potreboval vy som vytvoriť presné takúto tabuľku http://www.chudnutie-ako.sk/potraviny/energeticke-hodnoty-potravin.php. Plus by som tam potreboval pridať 7 stĺpec cenu každej potraviny. Ako na to ? |
||
| Keeehi Profil |
#2 · Zasláno: 21. 2. 2012, 10:12:55
Vytvořit si v databázi potřebné tabulky a naplnit je daty.
V nějakém grafickém editoru vytvořit grafiku stránky. Tuto grafiku převést do "formátu" pro zobrazení na stránkách pomocí HTML a CSS. No a nakonec pomocí PHP tuto šablonu plnit daty z databáze. |
||
| Hando Profil |
Ahoj.
A tobě jde konkrétně o co? Jak udělat stránku, nebo jak to naprogramovat? Potřebuješ nějakou databázovou tabulku, což je asi nejjednodušší, kde budeš mít uložené hodnoty - nějakou identifikaci potraviny, kategorii - (tu obsluhuje to první menu), název, potom složení - bílkoviny, sacharidy, lipidy a tu cenu, vše vztažené na nějaké měrné množství. Potom si napíšeš to první menu, kterým vybereš kategorii a přes script a předanou hodnotu kategorie si vypíšeš všechny potraviny, patřící do dané kategorie. Potom na hlavní stránce budeš mít třeba nějaké kecy, jako tam mají oni a samotnou tabulku s daty a možnost přepočtu. Přepočet je jednoduchý - jde pouze o násobení, takže mít někde připravenou proměnnou s výchozí hodnotou (třeba 100 (gramů)) a tu případně měnit při stisknutí tlačítka pro přepočítání. Pokud jde o samotné vytvoření stránek, tak to chce mít nějaký nápad a dokopat se k tomu. :) ---- Aha, tak Keeehi byl rychlejší. :) |
||
| igid26 Profil |
#4 · Zasláno: 22. 2. 2012, 00:36:09
Webovú stránku mám cez wordpress. Som skôr začiatočník tak ma šetrite.
|
||
| Hando Profil |
#5 · Zasláno: 22. 2. 2012, 13:00:59
Fajn, až to budeš mít kompletní, tak by asi bylo vhodný to nějak nastylovat, kvůli lepší čitelnosti a tak, pokud to chceš někde prezentovat a nemáš to jen pro naučení.
A teď bys potřeboval co? Nebo už ti to funguje? Povedlo se ti nějak aplikovat výše popsané postupy? |
||
| igid26 Profil |
#6 · Zasláno: 22. 2. 2012, 16:27:35
To je len obrázok ako chcem aby to vyzeralo vôbec neviem ako to urobiť :D
|
||
| Hando Profil |
#7 · Zasláno: 22. 2. 2012, 19:58:49
Ahááá, jo tak. :D
No, možností je více - buď použít nějaký WYSIWYG editor a pak použít výsledný kód k vložení programu (do příslušných buněk tabulky napráskat příslušné proměnné z databáze, případně po přepočtu scriptem), což zase chce, aby se člověk trochu v tom kódu orientoval, aby měl alespoň základy HTML, tady konkrétně tabulky; nebo se naučit html z jakpsátweb.cz, kde je to fakt výborně popsané a řekl bych, že většina ze zde diskutujících právě tam začínala, a napsat to pěkně řádek po řádku, div po divu; a nebo si to nechat někým napsat. Jedním z kritérií rozhodování je samozřejmě to, jak moc na to máš čas a jak moc to spěchá. Pokud to chceš dělat sám, tak se bez kódování v html neobejdeš. A tím bych začal. Nějak nechápu tu spojitost s wordpressem, co ten má společného s takovýmto zadáním a s tím, že v něm máš stránku. Pokud to musíš dělat přímo v provázanosti s wordpressem, tak to se omlouvám a nemohu sloužit, protože CMS nepoužívám. Nicméně s nějakou drobnou úpravou je ten postup stejný. |
||
| igid26 Profil |
No základy html aké také mám no skúsim to cez ten WYSIWYG editor to by malo byt asi najjednoduchšie riešenie. Ale ďakujem za odpovede.
|
||
| igid26 Profil |
#9 · Zasláno: 23. 2. 2012, 14:35:24
Takže čosi sa mi podarilo dať dokopy. Ale ešte by som potreboval pomoc. Tu je ako to vyzerá na živo. http://www.zaujimave.6f.sk/index.html
Základný súčet potravín funguje správne. Ale nezobrazuje bielkoviny sacharidy ani tuky iba cenu a tiež nezapočíta viac kusov vždy iba tej jeden základný. <!doctype html>
<meta charset="utf-8">
<form name="formulár">
<input type="checkbox" name="suroviny[]" data-cena="0.90" biekoviny="5" tuky="3" id="0" value="0"> <label for="0">Mlieko</label>
<select id="kusy">
<option value="1">1 kus</option>
<option value="2">2 kusy</option>
<option value="3">3 kusy</option>
</select>
<br>
<input type="checkbox" name="suroviny[]" data-cena="0.60" biekoviny="4" tuky="4" sacharidy="5" id="1" value="1"> <label for="1">Maslo</label>
<select id="kusy">
<option value="1">1 kus</option>
<option value="2">2 kusy</option>
<option value="3">3 kusy</option>
</select>
<br>
<input type="checkbox" name="suroviny[]" data-cena="1.20" biekoviny="6" tuky="5" sacharidy="5" id="2" value="2"> <label for="2">Tvaroh</label>
<select id="kusy">
<option value="1">1 kus</option>
<option value="2">2 kusy</option>
<option value="2">2 kusy</option>
</select>
<br>
<input type="checkbox" name="suroviny[]" data-cena="1.50" biekoviny="6" tuky="5" sacharidy="5" id="3" value="3"> <label for="3">Jogurt</label>
<select id="kusy">
<option value="1">1 kus</option>
<option value="2">2 kusy</option>
<option value="3">3 kusy</option>
</select>
<br>
<hr> <span id="vysledok">0</span> €
<br><span id="biekoviny">0</span> Biekoviny
<br><span id="tuky">0</span> Tuky
<br><span id="sacharidy">0</span> Sacharidy
</form><script>
var ch=[], cena=[], el=document.forms[0].elements, n=0, vystup=document.getElementById("vysledok");
for(var i=0; i<el.length; i++){
if(el[i].name=="suroviny[]"){
ch[n]=el[i].checked=false; cena[n++]=Number(el[i].getAttribute("data-cena")); el[i].onclick=f;
}
}
function f(){
var vysledok=0;
ch[this.id]=this.checked;
for(var i=0; i<n; i++)vysledok+=ch[i]*cena[i];
vystup.innerHTML=vysledok;
}
</script> |
||
| Hando Profil |
#10 · Zasláno: 24. 2. 2012, 12:52:48
Takže ses vydal cestou javascriptu, jo? V tom bohužel moc neporadím, snad někdo jiný.
Nicméně se mi zdá, že to motáš nějak moc dohromady a tvoříš něco jako vlastní jazyk. :) 1.) Úplně ti tam chybí základní struktura hmtl dokumentu, oddělení head od body, což by bylo vhodné, když už chceš používat meta tagy. Sice to moc nesouvisí s nefunkčností, ale proč to rovnou nedělat pořádně? <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 2.) Nevím, jak moc je moudré používat diakritiku v atributech "name" - vyvaroval bych se toho, není k tomu důvod. 3.) U selectů ti chybí atribut name. 4.) Atribut id primárně slouží k aplikaci css. 5.) V javascriptu fakt nejsem kovanej, ale z hlediska html nemají věci typu data-cena="0.90" co dělat. Ale třeba je to výjimka, nechci si vymýšlet. Dál jsem to moc nezkoumal. Stále si myslím, že by byla lepší cesta přes databázi. Hosting na endoře ji přeci umožňuje již jako free. Už jen z hlediska pozdějšího přidávání dalších surovin a funkčnosti při vypnutém javascriptu, navíc by ses krásně vyhnul potřebě vymýšlení a zápisu dalších atributů do html. Ale proti gustu... :) |
||
| igid26 Profil |
#11 · Zasláno: 24. 2. 2012, 13:14:58
Ale neviem ako to mam cez databázu urobiť :D
|
||
| panther Profil |
Hando:
plácáš. „1.) Úplně ti tam chybí základní struktura hmtl dokumentu, oddělení head od body“ head i body mají nepovinnou počáteční i koncovou značku, v uvedené dokumentu jsou.
„to mi přijde jako blbost, správně je to“ oba zápisy jsou správné. První je kratší, není důvod jej nepoužít. „Doctype html - na začátku je to v tomhle případě úplná zbytečnost.“ není pravda. Bez doctypu by shodil prohlížeče do quirku, takto nahodí standardní vykreslovací mód. HTML je v pořádku, chybí jen <title> (pokud chceme být úplní).
„4.) Atribut id primárně slouží k aplikaci css.“ ... nebo zaměření elementu JavaScriptem. Jestli míříš na id=kusy, tak máš pravdu - mělo by tam být id=nazev-produktu, případně správněji třída, pokud bychom chtěli zaměřit ty selecty pomocí CSS. Nebo si vystačíme s kontextem select.
„Stále si myslím, že by byla lepší cesta přes databázi.“ databáze jen umožní automaticky aktualizovat obsah ve smyslu přidávání/odebírání položek nebo ukládat odeslané hodnoty. Přepočítávání počtu kalorií atp. dle vybraných hodnot databáze samozřejmě neumí. igid26: JS a PHP nejsou alternativy, každé slouží k něčemu jinému. Měl by sis nejprve ujasnit, co vlastně chceš. Pokud přepošítávat v reálném čase, pak je JS správnou volbou. Databázi (zatím) nepotřebuješ, pokud budeš schopný udržet data aktualizovaná ručně (třeba v případě, že je nebudeš měnit). Dál, chceš data z formuláře někam ukládat? Případně dále uchovávat, zpracovávat? Pokud ne, server (PHP/MySQL) vůbec nepotřebuješ a vystačíš si s úpravou tebou uvedeného scriptu. Než se tím bude někdo probírat (třeba i já až bude trochu času), bylo by dobře vědět, čeho se snažíš docílit. Je zbytečné posílat ti scripty, když nevíme, zda budou dělat to, co očekáváš. |
||
| igid26 Profil |
#13 · Zasláno: 25. 2. 2012, 16:10:26
Při zpracování BB značek došlo k samovolnému sežrání celého příspěvku. Pardon.
Hodnoty meniť nebudem budú stále. Ukladať to nikam netreba. Problém je už vyriešený. Ďakujem za pomoc. [pre]<script> function zobrazSkryj(idecko){ el=document.getElementById(idecko).style; el.display=(el.display == 'block')?'none':'block'; } </script> <style> h3 {cursor: pointer; cursor: hand; text-decoration: underline} .skryvany {display: none} </style> ... <h3 onclick="zobrazSkryj('oddil1')"><img src="http://autosurf.6f.sk/mliecne.png"></h3> <div id="oddil1" class="skryvany"> <!doctype html> <html> <head> <meta charset="utf-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> </head> <body> <form> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.35|10|4.3|9.5|116|0|0" value="0"> Bryndza</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.27|6.5|2|1.5|50|1|1" value="1"> Cottage cheese</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.1|3|2.3|4.8|50|2|2" value="2"> Jogurt biely</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.2|2.5|2|9|61|3|3" value="3"> Jogurt ovocný (raj)</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.1|2|2|0.85|26|4|4" value="4"> Kefir</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.06|1.7|1.7|2.15|30|5|5" value="5"> Mlieko acidofilné </label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.05|1.55|1.7|2.3|30.5|6|6" value="6"> Mlieko plnotučné</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.03|1.6|0.25|2.3|17.8|7|7" value="7"> Mlieko nízkotučné</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.03|1.6|0.7|2.35|22.62|8|8" value="8"> Mlieko polotučné</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.32|1.5|0.95|2|22|9|9" value="9">Mlieko sušené</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> <option value="10">500 g</option> <option value="20">1 kg</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.5|7.6|10|0.6|120|10|10" value="10">Mozzarella</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.15|1.1|16.5|1.56|162|11|11" value="11"> Smotana na šľahanie 33%</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> Kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> Kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> Kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> Kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> </form></div> <h3 onclick="zobrazSkryj('oddil1')"><img src="http://autosurf.6f.sk/pecivo.png"></h3> <div id="oddil1" class="skryvany"> První oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil2')"><img src="http://autosurf.6f.sk/maso.png"></h3> <div id="oddil2" class="skryvany"> Druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil3')"><img src="http://autosurf.6f.sk/zelenina.png"></h3> <div id="oddil3" class="skryvany"> Druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil4')"><img src="http://autosurf.6f.sk/prilohy.png"></h3> <div id="oddil4" class="skryvany"> První oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil5')"><img src="http://autosurf.6f.sk/ovocie.png"></h3> <div id="oddil5" class="skryvany"> Druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil6')"><img src="http://autosurf.6f.sk/napoje.png"></h3> <div id="oddil6" class="skryvany"> Druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil7')"><img src="http://autosurf.6f.sk/tuky.png"></h3> <div id="oddil7" class="skryvany"> Druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil8')"><img src="http://autosurf.6f.sk/sladkosti.png"></h3> <div id="oddil8" class="skryvany"> Druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazSkryj('oddil9')"><img src="http://autosurf.6f.sk/vajcia.png"></h3> <div id="oddil9" class="skryvany"> Druhý oddíl: bla bla bla text</div> <center><table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="120" height="80"><div>Cena v €</div></td> <td width="120" height="80"><div>Bielkoviny</div></td> <td width="120" height="80"><div>Tuky</div></td> <td width="120" height="80"><div>Sacharidy</div></td> <td width="120" height="80"><div>Kalórie</div></td> </tr> <tr> <td width="120" height="80"><div class="value" itemprop="vysledok">0</div><a>€</td> <td width="120" height="80"><div class="value" itemprop="bielkoviny">0</div> g</td> <td width="120" height="80"><div class="value" itemprop="tuky">0</div> g</td> <td width="120" height="80"><div class="value" itemprop="sacharidy">0</div> g</td> <td width="120" height="80"><div class="value" itemprop="kalorie">0</div> Kcal</td> </tr> </tbody> </center> <script type="text/javascript"> var sumarizacia = []; $(document).ready(function () { $("input[name='suroviny[]']").bind("change", function () { var el = $(this); var arr = el.attr("itemprop").split('|'); var obj = { cena: parseFloat(arr[0]), bielkoviny: parseInt(arr[1]), tuky: parseInt(arr[2]), sacharidy: parseInt(arr[3]), kalorie: parseInt(arr[4]), id: parseInt(arr[5]), value: parseInt(arr[6]), select: parseInt(el.parent().parent().find("select").find("option:selected").val()) }; if (el.prop("checked")) { // pridávame/aktualizujeme do sumarizácie var rewrite = false; for (var i = 0; i < sumarizacia.length; i++) { var o = sumarizacia[i]; if (o.id == obj.id) { sumarizacia[i] = obj; rewrite = true; break; } } if (!rewrite) sumarizacia.push(obj); } else { // odoberáme zo sumarizácie var tmp = []; for (var i = 0; i < sumarizacia.length; i++) { var o = sumarizacia[i]; if (o.id != obj.id) tmp.push(o); } sumarizacia = tmp; } // voláme sum(), ktorá zobrazí užívateľovi údaje sum(); }); $("select").bind("change", function () { var el = $(this); // ak vyberieme hodnotu z DropDown tak aby sa refresla štatistika el.parent().find("input").trigger("change"); }); }); function sum() { // všetky zaškrtnuté var cena = 0.0; var bielkoviny = 0; var sacharidy = 0; var kalorie = 0; var tuky = 0; var pocet = 0; for (var i = 0; i < sumarizacia.length; i++) { var obj = sumarizacia[i]; cena += obj.select * obj.cena; bielkoviny += obj.bielkoviny * obj.select; sacharidy += obj.sacharidy * obj.select; tuky += obj.tuky * obj.select; kalorie += obj.kalorie * obj.select; //obj.cena //obj.bielkoviny //obj.sacharidy //obj.tuky //obj.kalorie //obj.id //obj.select } $("div.value").each(function () { var el = $(this); switch (el.attr("itemprop")) { case "vysledok": el.html(cena); break; case "bielkoviny": el.html(bielkoviny); break; case "tuky": el.html(tuky); break; case "sacharidy": el.html(sacharidy); break; case "kalorie": el.html(kalorie); break; } }); } </script> </body> </html> [/pre][/pre]<script> function zobrazskryj(idecko){ el=document.getelementbyid(idecko).style; el.display=(el.display == 'block')?'none':'block'; } </script> <style> h3 {cursor: pointer; cursor: hand; text-decoration: underline} .skryvany {display: none} </style> ... <h3 onclick="zobrazskryj('oddil1')"><img src="http://autosurf.6f.sk/mliecne.png"></h3> <div id="oddil1" class="skryvany"> <!doctype html> <html> <head> <meta charset="utf-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> </head> <body> <form> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.35|10|4.3|9.5|116|0|0" value="0"> bryndza</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.27|6.5|2|1.5|50|1|1" value="1"> cottage cheese</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.1|3|2.3|4.8|50|2|2" value="2"> jogurt biely</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.2|2.5|2|9|61|3|3" value="3"> jogurt ovocný (raj)</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.1|2|2|0.85|26|4|4" value="4"> kefir</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.06|1.7|1.7|2.15|30|5|5" value="5"> mlieko acidofilné </label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.05|1.55|1.7|2.3|30.5|6|6" value="6"> mlieko plnotučné</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.03|1.6|0.25|2.3|17.8|7|7" value="7"> mlieko nízkotučné</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.03|1.6|0.7|2.35|22.62|8|8" value="8"> mlieko polotučné</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.32|1.5|0.95|2|22|9|9" value="9">mlieko sušené</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> <option value="10">500 g</option> <option value="20">1 kg</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.5|7.6|10|0.6|120|10|10" value="10">mozzarella</label> <select id="kusy"> <option value="1">50 g</option> <option value="2">100 g</option> <option value="3">150 g</option> <option value="4">200 g</option> <option value="5">250 g</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.15|1.1|16.5|1.56|162|11|11" value="11"> smotana na šľahanie 33%</label> <select id="kusy"> <option value="1">50 ml</option> <option value="2">100 ml</option> <option value="3">150 ml</option> <option value="4">200 ml</option> <option value="5">250 ml</option> <option value="10">500 ml</option> <option value="20">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> <div> <label><input type="checkbox" name="suroviny[]" itemprop="0.46|8.25|9|18,7|122,62|12|12" value="12"> kefir</label> <select id="kusy"> <option value="1">250 ml</option> <option value="2">0,5 l</option> <option value="4">1 l</option> </select> </div> <br> </form></div> <h3 onclick="zobrazskryj('oddil1')"><img src="http://autosurf.6f.sk/pecivo.png"></h3> <div id="oddil1" class="skryvany"> první oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil2')"><img src="http://autosurf.6f.sk/maso.png"></h3> <div id="oddil2" class="skryvany"> druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil3')"><img src="http://autosurf.6f.sk/zelenina.png"></h3> <div id="oddil3" class="skryvany"> druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil4')"><img src="http://autosurf.6f.sk/prilohy.png"></h3> <div id="oddil4" class="skryvany"> první oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil5')"><img src="http://autosurf.6f.sk/ovocie.png"></h3> <div id="oddil5" class="skryvany"> druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil6')"><img src="http://autosurf.6f.sk/napoje.png"></h3> <div id="oddil6" class="skryvany"> druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil7')"><img src="http://autosurf.6f.sk/tuky.png"></h3> <div id="oddil7" class="skryvany"> druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil8')"><img src="http://autosurf.6f.sk/sladkosti.png"></h3> <div id="oddil8" class="skryvany"> druhý oddíl: bla bla bla text</div> <h3 onclick="zobrazskryj('oddil9')"><img src="http://autosurf.6f.sk/vajcia.png"></h3> <div id="oddil9" class="skryvany"> druhý oddíl: bla bla bla text</div> <center><table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="120" height="80"><div>cena v €</div></td> <td width="120" height="80"><div>bielkoviny</div></td> <td width="120" height="80"><div>tuky</div></td> <td width="120" height="80"><div>sacharidy</div></td> <td width="120" height="80"><div>kalórie</div></td> </tr> <tr> <td width="120" height="80"><div class="value" itemprop="vysledok">0</div><a>€</td> <td width="120" height="80"><div class="value" itemprop="bielkoviny">0</div> g</td> <td width="120" height="80"><div class="value" itemprop="tuky">0</div> g</td> <td width="120" height="80"><div class="value" itemprop="sacharidy">0</div> g</td> <td width="120" height="80"><div class="value" itemprop="kalorie">0</div> kcal</td> </tr> </tbody> </center> <script type="text/javascript"> var sumarizacia = []; $(document).ready(function () { $("input[name='suroviny[]']").bind("change", function () { var el = $(this); var arr = el.attr("itemprop").split('|'); var obj = { cena: parsefloat(arr[0]), bielkoviny: parseint(arr[1]), tuky: parseint(arr[2]), sacharidy: parseint(arr[3]), kalorie: parseint(arr[4]), id: parseint(arr[5]), value: parseint(arr[6]), select: parseint(el.parent().parent().find("select").find("option:selected").val()) }; if (el.prop("checked")) { // pridávame/aktualizujeme do sumarizácie var rewrite = false; for (var i = 0; i < sumarizacia.length; i++) { var o = sumarizacia[i]; if (o.id == obj.id) { sumarizacia[i] = obj; rewrite = true; break; } } if (!rewrite) sumarizacia.push(obj); } else { // odoberáme zo sumarizácie var tmp = []; for (var i = 0; i < sumarizacia.length; i++) { var o = sumarizacia[i]; if (o.id != obj.id) tmp.push(o); } sumarizacia = tmp; } // voláme sum(), ktorá zobrazí užívateľovi údaje sum(); }); $("select").bind("change", function () { var el = $(this); // ak vyberieme hodnotu z dropdown tak aby sa refresla štatistika el.parent().find("input").trigger("change"); }); }); function sum() { // všetky zaškrtnuté var cena = 0.0; var bielkoviny = 0; var sacharidy = 0; var kalorie = 0; var tuky = 0; var pocet = 0; for (var i = 0; i < sumarizacia.length; i++) { var obj = sumarizacia[i]; cena += obj.select * obj.cena; bielkoviny += obj.bielkoviny * obj.select; sacharidy += obj.sacharidy * obj.select; tuky += obj.tuky * obj.select; kalorie += obj.kalorie * obj.select; //obj.cena //obj.bielkoviny //obj.sacharidy //obj.tuky //obj.kalorie //obj.id //obj.select } $("div.value").each(function () { var el = $(this); switch (el.attr("itemprop")) { case "vysledok": el.html(cena); break; case "bielkoviny": el.html(bielkoviny); break; case "tuky": el.html(tuky); break; case "sacharidy": el.html(sacharidy); break; case "kalorie": el.html(kalorie); break; } }); } </script> </body> </html> [/pre[ |
||
|
Časová prodleva: 12 let
|
|||
0