Rather than creating a SWFUpload instance and assigning handlers directly, it associates the SWFUpload instance with an element in the DOM, and all events handlers are bound to that DOM element.
Here are some live examples you can pull apart. Although the UI is not pretty, it demonstrates how you listen to events, and from there you can create whatever UI you want.
Download source here
Installing Firebug Lite 1.2
Insert this line of code into any page that you want to contain Firebug lite:
<script type=’text/javascript’
src=’http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’></script>
Configuring Firebug Lite
Height of the firebug lite form is resizeable in latest version;
<script type=”text/javascript”>
firebug.env.height = 500;
</script>
Also, developers can use their own css file;
<script type=”text/javascript”>
firebug.env.css = “/myown/firebug.css”
</script>
for more details go to: http://getfirebug.com/lite.html
Dupa cum am spus la inceputul post-ului Link simulator cu jQuery, in aceasta serie de trucuri mai adaug un “episod”. In acest post, vreau sa descriu o metoda excelenta de a adauga in mod dinamic, fara refresh, campuri intr-un formular. Campurile pot fi de orice tip.
In acest exemplu voi adauga un camp de tip text, ce va avea id propriu pentru a putea fi manipulat ulterior dupa nevoie folosind un limbaj server-side la alegere. In acest exemplu voi folosi PHP.
Ca si in articolul precedent, avem nevoie sa includem biblioteca jQuery.
Sa incepem.
Pas 1:
Fie ca folosim un layout bazat pe tabele sau pe div-uri, procedura este la fel.
Trebuie sa definim un container pe care sa il actualizam cu noul camp. De asemenea, trebuie sa definim un link pe post te trigger pentru aceasta actiune.
Mai jos este descris codul HTML cu care vom lucra in continuare. Atentie la parametrii id si name ai elementelor. Sunt importanti deoarece ii vom folosi la manipularea DOM-ului.
fisier: formular.html
<label>Text 1</label>
<input type="text" name="camp[0]"/>
<p id="campuriNoi"></p>
<p>
<a href="#" id="adaugaCamp">Adauga un camp</a>
</p>
Am lasat link-ul Adauga un camp in partea de jos pentru ca vom adauga campurile de jos in sus (evident) si, in acest fel, nu vom fi nevoiti sa folosim scroll-ul vertical pentru a ajunge la el in vederea adaugarii unui nou camp.
Este evident faptul ca trebuie sa adaugati tag-urile form inaintea codului de mai sus si sub link-ul Adauga un camp, un buton de submit.
Pas 2:
A venit momentul sa adaugam magia jQuery in acest mic script.
fisier: code.js
$(document).ready(function(){
$('#adaugaCamp').click(function(){
var i = 1;
i++;
var campNou = '<label>Text ' + i + '</label><input type="text" name="camp[]" />';
$('#campuriNoi').append(campNou);
});
});
Este mandatoriu ca declaratia valiabilei campNou sa se realizeze pe o singura linie.
Acum, ca avem la dispozitie acest mecanism extrem de simplu si de util, a venit timpul sa manipulam datele introduse pe partea de server.
Daca, spre exemplu adaugam 2 campuri text si obtinem astfel 3 campuri text (l-am inclus si pe cel existent), dupa ce vom da submit, in partea de php variabila $_POST['camp'] va contine un vector de forma urmatoare:
Array (
[0] => Text camp 1
[1] => Text camp 2
[2] => Text camp 3
)
Aceste texte, o data obtinute, pot fi manipulate in orice mod dorim.
Un exemplu de mod in care am utilizat acest “truc”, este realizarea unei interfete POS. Intr-o aplicatie dezvoltata recent, am folosit acest mecanism, ajutat si de 2 plugin-uri pentru a realiza o interfata pentru un POS. In aplicatia mea, adaug in acest mod 3 campuri si anume: Nume produs, cantitate si Pret unitar. Unul din cele 2 plugin-uri este LiveQuery si ma ajuta la actualizarea dinamica a DOM-ului, in sensul ca atunci cand adaug un camp nou, ii atasez cel de-al 2-lea plugin, Autocomplete. Apoi, pe server, preiau aceste date, le organizez intr-un bon de casa si le trimit la printat pe casa de marcat.
In urmatorul articol, voi explica cum puteti atasa evenimente acestor campuri nou create.
Sper sa va foloseasca acest mecanism la formulare de toate felurile.
M-am gandit sa fac o mica serie de post-uri referitoare la javascript in general, la jQuery in special.
Personal, gasesc acest framework a fi unul excelent pentru fix-uri rapide, dar si pentru creare de interfete complete folosind AJAX.
Un fix la care am apelat de curand a fost crearea unui link fara a folosi tag-ul a din html. Se poate realiza foarte usor, fara a modifica DOM-ul existent. Eu am folosit aceasta metoda deoarece nu vroiam sa modific structura DOM a documentului, pentru ca ar fi insemnat sa modific alte functii de javascript ce implementau diferite functionalitati.
Este de la sine inteles faptul ca trebuie sa includeti framework-ul jQuery in head-ul paginii. jQuery poate fi descarcat de aici.
In continuare voi descrie pasii ce trebuie urmati pentru a obtine acest element simulat.
HTML
<p id="simuLink">Buy design</p>
Elementul DOM poate fi oricare altul, nu este obligatoriu sa fie p. Poate fi div, span, h, td, etc.
Pentru a ii conferi un aspect de link acestui element, adaugam o definitie css de forma:
CSS
.simuLink {
cursor:pointer;
font-weight:bold;
text-decoration:underline;
}
Acum trecem la partea frumoasa, la implementarea functionalitatii cu ajutorul framework-ului jQuery.
JAVASCRIPT
$(document).ready(function(){
$('p#simuLink').click(function() {
document.location = 'http://url'; // a se edita
});
});
Codul javascript este destul de simplu si nu cred ca necesita explicatii suplimentare. Se observa ca prin prima linie a codului javascript, se ataseaza event-ul click elementului de tip p cu id-ul simuLink.
Mai simplu nu se poate. Eu am gasit aceasta metoda ca fiind cea mai simpla ocolire a multor probleme legate de selectarea unui singur element a dintr-un element div, de exemplu, atunci cand trebuie sa avem mai multe link-uri in acel element div.
Sper ca o sa va ajute acest mic truc.
Powered By Wordpress - Theme Provided By Wordpress Theme - Credit Loan
