Trebam javascript/CSS/whatever pomoc

Linux pomoć Programiranje
1

dobio sam zadatak da uradim a nemam pojma kako.
primjer je ovdje: http://afan.net/dev/ (neka vrsta online store)
treba da uradim formular gdje ce biti tona artikala i svaki artikl ima opcije (velicina, boja, tezina…). posto to moze biti podugacak formular odlucili smo se da “sakrijemo” opcije dok neko ne klikne na “show options” da vidi koje su. medjutim… nege opcije mogu biti i obavezne tako da ako neko samo odabere neki artikl klikanjem na chekcbox dobije poruku “missing option”. zato je odluka da ak oneko klikne na checkbox da se opcije automatski “otvore”. dio sa “show options” i “hide options” i dalje trebaju da postoje.

Imal’ ko kakvu ideju kako da uradim, gdje da pocnem?

2

afane, pitanje ko da si lijevom nogom pisao, mozes li to malko pojasnit pa ti morem udijelit pomoci :slight_smile: Ovako fakat kontam jedno 40% problema: zelis da neke opcije na nekim artiklima budu vazda vidljive. Rjesenje za to ti je CSS specificity:

<div id="artikal-1" class="artikal">
  <div id="opcija-1" class="opcija obavezna">
  ...
  </div>
</div>

I CSS:

.opcija { display: none; }
.artikal div.obavezna { display: block; }
3

Paaaa

Ni meni nije baš jasno šta si htio reći.
Ti ovdje govoriš o klijentskoj strani a tu ti je neprikosnovena jQuery biblioteka gotovih funkcija (samo ih slažeš pravilno u stack i proslijeđuješ im odgovarajuće argumente). To je najprostije što se može reći o jQeury-ju.
Sa jQuery-ijem možeš recimo registrovati događaja tipa “click” na element i onda dodati metodu show().
Prije toga tereba odrediti css visibility - hidden, pa onda skriptom show().

A možeš i cijeli dom element umetnuti događajem.
Recimo $("

")
.text(“Tekst nekog elementa”)
.appentTo(“gdje hoćeš”)

Postoji velik broj varijanti na koji se može nešto uraditi na klijentskoj strani - sve zavisi šta hoćeš.

Malo sam virnuo u html kod na stranu koju si proslijedio i vidio da koristiš dosta tabele - jel’ tako moraš jer tabele nisu baš najbolje rješenje ?
Dalje vidim da ti je sve natrpano na jednu stranu - po meni treba to malo rasporediti - css u zaseban dokument a skriptu u zaseban (ako je imaš)
Dalje, registracija događaja inline takođe nije baš “in”.
Uglavnom, izvini na sugestijama - zaparalo mi oko.

4

:smiley:

Haj’ da probam jos jednom.

Treba da napravim formular (analogan onome sto sam proslijedio url) koji ce posjetilac ispuniti kada se registruje za neku manifestaciju ili ako nesto kupuje…
Posto ce formular sadrzavati i do 20 items (haj’ da ubacim malo i engledskog, mozda bude razumljivije :)) odluceno je da se izlistaju items a da opcije (velicina, boja, ime participanta, sta’s za svecanu veceru,…) budu sakrivene i kada kliknes na “show options” one se pojave. Sa “hide options” ponovo sakrijes opcije. To sam uradio i radi kako treba. Mislim da je ovo do sada jasno?
E, onda su mi zapovjedili da uz ovo navedeno napravim da kada neko klikne na checkbox (kojim selektujes koji item kupujes/registrujes/odabiras) da se opcije takodje pojave (kao da si klikn’o na “show options”). Znaci, opcije se pokazu bilo da kliknes na link “show options” ili na checkbox.

Razlog za ovako nesto je slijedeci:

  • “Show/hide options” - ako neko hoce da vidi koje su opcije za neki item ne mora da ga prvo cekira (k’o sto na Amazonu se zna desiti da kaze da postaih item u shoppign cart da bi vidio cijenu).
  • checkbox - neki items imaju neke opcije obavezne. npr. registrujes se za neki event. U opciji moras navesti da li se member ili nisi i moras unijeti svoje ime i prezime, ali je broj telefona i godina rodjenja opcionalna. E, ako ne vidis opcije i samo kliknes na checkbox i nastavis sa formularem prijevise ti gresku da nisi ispunio obavezne opcije. Da b iizbjegli to odluceni je da kada kliknes na checkbox da se opcije pokazu.

Jel’ sad ista razumljivije?
:frowning:

5

[quote=carousel]Paaaa

Ni meni nije baš jasno šta si htio reći.
Ti ovdje govoriš o klijentskoj strani a tu ti je neprikosnovena jQuery biblioteka gotovih funkcija (samo ih slažeš pravilno u stack i proslijeđuješ im odgovarajuće argumente). To je najprostije što se može reći o jQeury-ju.
Sa jQuery-ijem možeš recimo registrovati događaja tipa “click” na element i onda dodati metodu show().
Prije toga tereba odrediti css visibility - hidden, pa onda skriptom show().

A možeš i cijeli dom element umetnuti događajem.
Recimo $("

")
.text(“Tekst nekog elementa”)
.appentTo(“gdje hoćeš”)

Postoji velik broj varijanti na koji se može nešto uraditi na klijentskoj strani - sve zavisi šta hoćeš.

Malo sam virnuo u html kod na stranu koju si proslijedio i vidio da koristiš dosta tabele - jel’ tako moraš jer tabele nisu baš najbolje rješenje ?
Dalje vidim da ti je sve natrpano na jednu stranu - po meni treba to malo rasporediti - css u zaseban dokument a skriptu u zaseban (ako je imaš)
Dalje, registracija događaja inline takođe nije baš “in”.
Uglavnom, izvini na sugestijama - zaparalo mi oko.[/quote]

Ovo sto sam ja napravio je samo primjer na sta mislim. Nemam nista protiv da se koristi i jQuery samo je problem sto nisam jQuery nikad koristio i nemam sada vremena da ga ucim zbog ovog problema. Ako ima negdje neki primjer i objasnjenje bilo bi super.
Sto se tice tabela i CSS-a - to je samo nabrezake nabacano, kao primjer. Nije tak ou originalu :slight_smile:
Ali ne znam sta si mislio pod [quote]registracija događaja inline takođe nije baš “in”.[/quote] ?!?!?!

6

To mozes rijesiti malenom funkcijom u halvaskriptu, naime, prvo zavedes neku strukturu slicnu ovoj:

<div class="set-opcija">
    <input type="checkbox" class="kutija" />
     <span class="prikazi-opcije">Prikazi/sakrij opcije</span>
    <div class="opcije">...</div>
</div>

Zatim uradis ovako nesto u halvaskriptu (ovo je jQuery):

$(document).ready(function(){
	$(".prikazi-opcije").click(function(){
		var kutija = $(this).prev(".kutija");
		var opcije = $(this).next(".opcije");
		if(kutija.is(":checked") and opcije.is(":visible")) {
			return;
		}
		opcije.toggle();
	});
	$(".kutija").click(function(){
		if($(this).is(":checked")) {
			$(this).next(".opcije").show();
		}
	})
});

Nisam otestiro ovaj kod al mislim da je logika jasna:

  • Ako mujo klikne na checkbox i checkbox je “checked” onda prikazi opcije ako nisu
  • Ako mujo klikne na span provjeri jel checkbox “checked” i da li su opcije vidljive; ako jesu bjezi
  • Svaki drugi slucaj samo togglaj (show/hide) opcije
7

dodao sam onclick="document.getElementById('ID1').style.display='block'" u checkbox i sada radi 75% od onoga sta sam htio. nije perfektno ali… :smiley:

izgleda da cu morati uzeti dan-dva godisnji i najahati na jQuery :slight_smile:

8

Registracija događaja inline, kao html atributa npr.

 [quote]<div onclick = alert("Inline događaj")></div>[/quote]

je stari način registracije događaja na html element.

To potiče iz ranih dana razvoje html-a kad razdvajanja sadržaja od prezentacije gotovo da nije bilo.Skoro sav css i javascript su se pisali inline, kao html atributi. Vremenom je to postalo neefikasno, pa se css počeo smještati u zasebne datoteke, koje su se onda pozivale iz html dokumanta. To je slučaj i sa javascriptom.
Tehnički se može i dalje tako pisati kod, ali je trend da se u html uglavnom smješta “čisti” sadržaj tipa tekst i fotografije koji se onda formatira i manipulira iz eksternih datoteka. A po onom što se može pročitati ovakav način značajno doprinosi performansi aplikacije.

[quote]Although the inline event registration model is ancient and reliable, it has one serious drawback. It requires you to write JavaScript behavior code in your XHTML structure layer, where it doesn’t belong.

Therefore I strongly feel that you shouldn’t use this model.

Understanding this old model is necessary for a full overview of JavaScript event handling, but you should use one of the modern models which I describe later on.[/quote]

evo i da napomenem da nije neophodno umotavati jQuery kod u ready() funkciju, kako bi se osiguralo da se DOM učita.

Znači umjesto:

[quote]$(document).ready(function(){

// javascript kod

}[/quote]

bolje je samo smjestiti neposredno prije zatvaranje taga.
Isti efekat, a manje kucanja.

Iskreno mislim da se jQuery ne može naučiti za dan dva, bez obzira što izgleda jednostavno.

9

[quote=carousel]Registracija događaja inline, kao html atributa npr.

 [quote]<div onclick = alert("Inline događaj")></div>[/quote]

je stari način registracije događaja na html element…[/quote]

Ovo se zove “od drveta ne vidis sumu”. Ma, znam sta je inline ali mi se u glavi motalo da je to nesto novo za sto jos nisam cuo :smiley: “span”-ov’o sam ja text jos kad je Netscape bio najjaci browser :smiley:
Sta’s… Dolazi sa godinama i senilnoscu. :smiley:

Hvala Carousel.

10

Nešto me ova opcija sa checkboxom zaintrigirala, pa sam napisao jQuery skriptu na osnovu tvojih specifikacija. Evo link pa virni. Dizajnerski je mršavo, al to nije ni bio cilj :slight_smile: Sama skripta se za profi upotrebu može još doraditi, ali je bazična funkcionalnost tu:

http://mmw.site40.net/proba.html#

11

[quote=carousel]Nešto me ova opcija sa checkboxom zaintrigirala, pa sam napisao jQuery skriptu na osnovu tvojih specifikacija. Evo link pa virni. Dizajnerski je mršavo, al to nije ni bio cilj :slight_smile: Sama skripta se za profi upotrebu može još doraditi, ali je bazična funkcionalnost tu:

http://mmw.site40.net/proba.html#[/quote]

pogledaj ponovo http://afan.net/dev/
ovo je otprilike na sta sam ja mislio.