[es] - dombomb - micro jsDomAjax framework

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz

+2247 Profil

^{28.04.2013. u 23:56 - pre 133 meseci}

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):

<a href="javascript:void(0);" 

onclick="element('~/path/php_page?action=update', 'IDnaziv'), element('~/path/php_page?action=update_other', 'IDnaziv_drugi');"> Ajax </a>

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> &nbsp; 

 <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

Odgovor na temu