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;
}}}
/* 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');
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>
<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; ] ) -->
<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>
<!-- .. 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.
about:networking