NeWorld

Nu geresnio pavadinimo nesugalvojau. Kogero ne vienam kurie norėjo select sąrašo elementus nuspalvoti skirtingomis spalvomis iškilo ši problema. Be to, nelabai sugalvojau kaip įvardinti elementus, metodus ir panašiai, taigi galbūt bus sunku suprasti. Jeigu kas nors sugalvosite geresnius terminus būtinai parašykite.

Kas nesuprato parodysiu pavziduką (iš savo žaidimo):

Kaip matote, sąraše “Laplandija” yra su “font-weight:bold;”, o tas laukelis kuris parodo tai kas yra pažymėta yra be šio atributo. Tas ptas būtų jeigu pažymėtume bet kokį kita laukelį (neturiu pavyzdžių). Pateiksiu metodą kuris išspręs mūsų problemą.

Taigi mum reikės šito select, suteikime jam id=”listas”. Dar mum reikės prototypejs frameworko. Tikiuosi mokėsite jį įsidėti (jei dar nenaudojate). Jau darbui esame pasiruošę, tas pradedam.

Pirmiausia mes turime pasirašyti paprastą javascript funkcija kuri pakeis pagrindinio elemento stilių pagal pasirinkto child elemento stilių. Ji atrodys šitaip:

[code lang="JavaScript"]function changeselectmainclass(event) {
if (typeof event == 'string') { //šitas if skirtas tam jeigu mes sugalvotume patys javascript pagalba pažymėti kitą select elemento elementą.
var el=$(event);
} else {
var el=Event.element(event);
}
el.className=el.down(el.selectedIndex).classNames();
}[/code]

Taigi dabar mums reikia pribindinti šią funkcija prie change event’o.

[code lang="JavaScript"]$('listas').observe('change',changeselectmainclass);[/code]

Taigi dabar pažymėję kitą elementą, pagrindinis elementas gaus jo visas stilių klases, t.y. klasės turės būti apibrėžtos css’u. Be to, noriu priminti, jog visi child elementai įgauna parent elemento klases, t.y. jeigu parent elementas bus pastorintas, tai visi child elementai bus irgi pastorinti išskyrus tuo atveju elementai turės po klasę kurioje nurodyta jog obektas neturi būti pastorintas. Tarkime

[code lang="html"]
astorintas nepastorintas

[/code]

Pačių klasių astikrai neapbrižinėsiu, nes ir taip turėtumėte žinoti kaip jas apibrėžti. Taigi pažymėjus pirmajį elementą ir išskleidus sąrašą tada visus įrašus pastorintus, be jeigu html source atrodys maždaug taip:

[code lang="html"]
astorintas nepastorintas

[/code]

Matysime viską gerai, kadangi antro elemento stilius bus nepastorintas, t.y. perrašys parent elemento stilių.

Gerai, dabar tarkim užsimanome patys javascript pagalbą pakeisti elemento pažymėjimą.

[code lang="JavaScript"]$('listas').selectedIndex=1;[/code]

Taigi matome jog pagrininio elemto stilius neperėmė antrojo elemento stiliaus. Tada mes turime išplėsti šį kodą:

[code lang="JavaScript"]$('listas').selectedIndex=1;
changeselectmainclass('listas');//nustato select elementui klases, tokios kokios yra pažytojo elemento klasės[/code]

Dabar tikriausiai pastebėjote jog užkrovus puslapį pagrindinis elementas nėra įgavęs nė vienoss chiild elemento klases. Taip yra todėl kad onchange eventas suveikia tik tada kai pats vartotojas pažymi kitą elementą.

Taigi užkrovus puslapį turėtų būti vykdomas šitas kodas:

[code lang="JavaScript"]changeselectmainclass('listas');[/code]

Taigi tiek, tikiuosi ką nors supratote, nes neįsivaizdavau kaip pavadinti visą šitą reikalą.

P.S. Šitas metodas parent elementui uždeda pažymėtojo child elemento klases, t.y. jeigu child elemento klasės yra class=”vienas du keturi”, tai įvykdžius kodą parent elementas tarsi bus irgi su tomis pačiomis klasėmis.