[ plus_minus @ 28.04.2013. 23:56 ] @
Ja lično rešavam sve uz pomoć php-a. Međutim, hteli ne hteli, bez javaskripte, jednostavno nema šmeka, bez obzira na sve vizuelne mogućnosti koje dolaze sa css 'tricom'. A od javaskripte mi je potrebna samo jedna - frakcija - mogućnosti. I zato gledam da izbegavam overbloatovana framework rešenja za šta mi ni 1% od preostalih 99% iz određenog framework-a ne služe - ama baš ničemu. Zbog toga, uvek sam skucam neku javaskriptu - po potrebi. I uvek gledam da to radi ništa više ni manje od onoga što mi treba. Pretpostavljam da nisam jedini koji ovako razmišlja i isto praktikuje. Znam da ima i mnogo onih koji razmišljaju isto kao i ja, međutim ne umeju d se snađu pa da sami skucaju i napišu js za ono što im treba, te zato guglaju, guglaju, guglaju i nađu odgovarajuću skriptu. Govorim dakle o dragim početnicima kojima i jeste (google search, working script. success! D: ) i nije ("kukuuu... a šta sa ovim tačkicama i zašto kojeg moyeg sad ove ovolike zagrade.. :S ") lako. Rešio sam da u jednom navratu počastim sve koji tragaju za laganom višenamenskom, manipulacijom sopstvenog sajta uz i dalje čist i nenatrpan html sors kod. :) U pitanju je jedna malena (39 linija koda (i naravno, može još da se "stegne") ), višenameska funkcija koju sam ja svrstao u neki nazovi "bazični Dom.mikro-frejmwork .. " Datum nastanka: sinoć. Razlog nastanka: opisan iznad. ScriptFile » domBomb.js Code (javascript): /* DomBomb - micro DOM/Ajax manipulator - "Framework" * Nedelja, 28. April, 2013; All natural rights reserved. */ var element = function(operation, id) { var o = operation; var x = document.getElementById(id); if(o.substring(0,1) == "~") { function getXMLHttp(){ var xmlHttp; try{ xmlHttp = new XMLHttpRequest(); } catch(e){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ alert("Your browser is professionaly dumb."); return false; }}} return xmlHttp; } var loc = o.substring(1); var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4){ RetrieveContent(xmlHttp.responseText); }} xmlHttp.open("GET", loc, true); xmlHttp.send(null); function RetrieveContent(response){ x.innerHTML = response; } } else { var xs = x.style; var no = "none"; var bl = "block"; var hdn = "hidden"; var vsb = "visible"; switch(o){ case 'hide': xs.display = no; break; case 'show': xs.display = bl; break; case 'hidden': xs.visibility = hdn; break; case 'visible': xs.visibility = vsb; break; case 'showhide': xs.display = (xs.display != no) ? no : bl; break; case 'onscreen': xs.visibility = (xs.visibility != hdn) ? hdn : vsb; break; case 'opacity': xs.opacity = (xs.opacity != '0') ? '0' : '1'; break; case 'submit': document.forms[(id)].submit(); break; default: return; break; }}} Princip korišćenja je prost. Sve iz code taga iznad iskopirati u novi fajl (dombomb.js) i zatim povući skriptu kao eksterni fajl iz html 'glave' ili sve iz gornjeg code taga nalepiti između <script type="text/javascript"></script> kao inline kod unutar head taga. Varijanta broj 1. je mnogo bolja, kao dodatni zahtev dakle ... E, nakon toga se sve svodi na sledeće: Code: element('operacija', 'html_ID_element'); Ukoliko hoćete da uvučete drugi fajl u sklopu nekog, određenog, najverovatnije, div elementa .. dakle, ukoliko vam treba AJAX - onda umesto "Operacije" ili stringa ide TILDA ~ pa zatim putanja/uri (spojeno). Skripta dakle prepoznaje i gleda prvi karakter i ukoliko jeste - ~ - u pitanju je XMLHttpRequest. Putanja može biti relativna ili apsolutna, nebitno je. Zavisi od strukture sajta/html-a. Code (html): <a href="javascript:element('~/path/php_page?action=update', 'IDnaziv');"> Ajax </a> <!-- ili --> <a href="javascript:void(0);" onclick="element('~/path/php_page?action=update', 'IDnaziv');"> Ajax </a> <!-- ili --> <a href="#IDnaziv" onclick="element('~/path/php_page?action=update', 'IDnaziv');"> Ajax </a> <!-- ili --> <body onload="element('~/path/php_page?action=update', 'IDnaziv');"> <div id="IDnaziv"> ajax </div> ... ... .. ... .. </body> .. i tako dalje. Dakle, bilo koji DOM event ... onclick, onmouseout, onmouseover, onload... itd.. A može i da se zaređa više komada na onclick recimo.. Code (html): Vrednost href atributa je proizvoljna stvar ukoliko koristite onclick. Običan #(hash ili tarabica) ili javscript:void(0); - sasvim ok, a najbolje je staviti sami naziv bilo kojeg postojećeg ID naziva u sklopu html dokumenta. Ovo važi za sve varijante koje dombomb.js nudi. Ukoliko prvi karakter nije TILDA ili ~, onda je u pitanju DOM manipulacija, nije ajax. Varijante za dom manipulaciju su sledeće (baciti pogled na switch/case metodu u sklopu same skripte, svaki 'case' je ustvari 'operacija'): Code (html): <a href="javascript:element('hide', 'IDnaziv');"> Link </a> <!-- IDnaziv će dobiti - display:none; css vrednost --> <a href="javascript:element('show', 'IDnaziv');"> Link </a> <!-- IDnaziv će dobiti - display:block; css vrednost --> <a href="javascript:element('hidden', 'IDnaziv');"> Link </a> <!-- IDnaziv će dobiti - visibility:hidden; css vrednost --> <a href="javascript:element('visible', 'IDnaziv');"> Link </a> <!-- IDnaziv će dobiti - visibility:visible; css vrednost --> <a href="javascript:element('showhide', 'IDnaziv');"> Link </a> <!-- Ukoliko je IDnaziv vidljiv, postaje skroz nevidljiv, gubi mu se svaki trag - i obrnuto. --> <a href="javascript:element('onscreen', 'IDnaziv');"> Link </a> <!-- Ukoliko je IDnaziv prikazan, postaje nevidljiv, ali zadržava visinu, širinu i sva ostala svojstva - i obrnuto. --> <a href="javascript:element('opacity', 'IDnaziv');"> Link </a> <!-- IDnaziv hoće ili neće biti 100% ne/transparentan ( css [ opacity:0; opacity:1; ] ) --> Operacija -> 'opacity' je zgodna jedino kada u vašem css dokumentu ima pravila povodom css tranzicija. Onda može da se dobije jako lep efekat. U svakom drugom slučaju nema neku svrhu, ukoliko recimo ne promenite deo skripte za case 'opacity' iz '0' u recimo '0.2' (na oba mesta u sklopu ternarnog operatora) Podrazumeva se znači da u samom css-u imate ispisana pravila za display, visibility i opacity vezano za elemente nad kojima želite da vršite manipulaciju, pre nego što krenete sa korišćenjem dombomb-a. Za kraj "mini How-TO?" povodom dombomb-a, da objasnimo i poslednju u nizu operaciju 'submit'. Pogodno je za <select> (dropdown listu, recimo) i koristi se u kombinaciji sa "onchange event". Npr. Code (html): <!-- .. dombomb.js je već učitan negde .. --> <form id="default_style" method="post" action="#default_style"> <b> Choose </b> <select name="default_style" onchange="element('submit', 'default_style');"> <option value="white"> white </option> <option value="black"> black </option> <option value="red"> red </option> <option value="blue"> blue </option> <option value="green"> green </option> </select> </form> Ključna stvar jeste sami naziv za ID forme i onda se možete igrati sa jsDOM 'događajima' ili 'hepeningovima' :p .... Čisto da napomenem da je jako prosto proširiti i dodati još 'operacija' u sklopu swich-a unutar dombomb.js mikro-frejmworka. Za sada toliko. Nadam se da će ovaj mali dombomb biti nekome od koristi. Poz. |