Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Swiftu. Zároveň využij výhodnou slevovou akci až 30 % zdarma při nákupu e-learningu - více informací.
swift week + discount 30
Avatar
Kamil
Člen
Avatar
Kamil:2. července 13:13

Ahoj, rád bych vytvořil konfigurator produktu, že bych si na základě vybranych součástek jako je "zhruba" na náčrtku uvedeno, vytvořil konečný produkt.

Nevím, jak začít. Díky za tipy a rady

Zkusil jsem: Nevím jak začít

Chci docílit: -

 
Odpovědět
2. července 13:13
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:7. července 7:47

A zkousel jsi google?
google = js image picker canvas

Kdybych si to mel jakoze naprogramovat po svem, tak si udelam json pole, ze ktereho se to generuje

<script>
var data = [
'cast 1': [
   {'title': '1', 'url': 'url'},
   {'title': '2', 'url': 'url'},
   {'title': '3', 'url': 'url'}
   ],
'cast 2': [
   {'title': '4', 'url': 'url'},
   {'title': '5', 'url': 'url'},
   {'title': '6', 'url': 'url'}
   ]
]
generujeCasti(data);
// onclick="generujeObrazky(data, id1);"
// onclick="kresliNaCanvas(data, id1, id2);"
</script>

Jo, tez je dobre si uvedomit, ze loadovani obrazku nejaky cas trva, takze bys mel resit tez image onload :) Pokud, totiz pozadas o vykresleni pres js drive, tak se obrazek nenacte.


google = js draw image canvas example
google = js click on image and draw to canvas example


A, pak mas druhou moznost, muzes si tam vyrobit primo html kod a jen vyuzivat skyvani. Bootstrap zalozky.
google = bootstrap tab sheets (tab panel) example
https://getbootstrap.com/…s/navs-tabs/#tabs
https://getbootstrap.com/…s/navs-tabs/#…
najdi na strance text "The tabs plugin also works with pills."
A pod nim je takovy pekny priklad i s html kodem, jen do html musis jeste pridat js a css bootstrapu.

Cili, funguje to ta, ze mas tlacitka Cast1, 2, 3.
Ty na kliknuti schovaji vsechny infopanely a zobrazi jen ten jeden.
A v tom panelu mas pak obrazky, ktere na click neco nekam vlozi

<div id=nav>
  <input type=button onclick="skryjPanely();zobrazPanel(1)" value=cast1>
  <input type=button onclick="skryjPanely();zobrazPanel(2)" value=cast2>
  <input type=button onclick="skryjPanely();zobrazPanel(3)" value=cast3>
</div>

<div id=panel1>
  <img src='obrazek1.png' onclick="kresliNaCanvas(this.src)">
  <img src='obrazek2.png' onclick="kresliNaCanvas(this.src)">
  <img src='obrazek3.png' onclick="kresliNaCanvas(this.src)">
</div>
<div id=panel2>
  <img src='obrazek4.png' onclick="kresliNaCanvas(this.src)">
  <img src='obrazek5.png' onclick="kresliNaCanvas(this.src)">
  <img src='obrazek6.png' onclick="kresliNaCanvas(this.src)">
</div>
<div id=panel3>
  <img src='obrazek7.png' onclick="kresliNaCanvas(this.src)">
  <img src='obrazek8.png' onclick="kresliNaCanvas(this.src)">
  <img src='obrazek9.png' onclick="kresliNaCanvas(this.src)">
</div>

Hadam, ze chces neco takoveho, protoze z toho obrazku se sipeckami neni uplne jasny princip a sam jsi toho mnoho nenapsal :)

 
Nahoru Odpovědět
7. července 7:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.