In questi giorni sto eseguendo un pò di refactoring di codice javascript presente in un progetto Asp.Net 2.0, facendo uso delle API offerte dal framework JQuery.
Una delle primissime funzioni che ho sostituito completamente è stata quella in cui tramite l’evento doppio click su controlli di tipo Textbox si inseriva la data corrente.
L’Event Model di JQuery è estremamente versatile e ben strutturato oltre che semplice nell’utilizzo.
Se per esempio all’evento onclick di un button vogliamo far apparire un dialog box di alert senza far uso di un particolare framework javascript, dobbiamo scrivere qualcosa di questo tipo:
1: <input type="button" id="btnTest" value="Click" onclick="javascript:alert( 'test click');" />
Utilizzando l’Event Model JQuery possiamo far uso del comando bind(). L’esempio precedente diventa:
1: $('#btnTest').bind('click', function(event) { alert('test click'); });
La sintassi del comando bind:
1: bind( eventType, data, function)Ritornando alla funzione che accennavo ad inizio post, devo dire che l’utilizzo delle API JQuery mi ha permesso di ridurre sensibilmente il codice migliorando così anche la mantenibilità.
Nello specifico, supponendo di avere un controllo Textbox targato runat server:
1: <asp:TextBox ID="txtDoubleClick" runat="server" Text=""></asp:TextBox>
Il codice per implementare un gestore di eventi per l’evento double click:
1: <script type="text/javascript">1:2: $(function() {3: $('#txtDoubleClick').bind('dblclick', function(event) { setDateNow() })4: });5: function setDateNow() {6: var date = new Date();7: var day = date.getDate();8: var month = date.getMonth() + 1;9: var year = date.getFullYear();10: $('#txtDoubleClick').val(day + "/" + month + "/" + year);11: }</script>
E’ possibile passare diversi tipi di eventi:
| blur | focus | load |
| resize | scroll | unload |
| beforeunload | click | dblclick |
| mousedown | mouseup | mousemove |
| mouseover | mouseout | mouseenter |
| mouseleave | change | select |
| submit | keydown | keypress |
| keyup | error |
Se invece, volessimo ottenere lo stesso risultato per controlli Textbox presenti per esempio in un controllo GridView:
1: <asp:GridView ID="dgrTest" runat="server">
2: <Columns>
3: <asp:TemplateField>
4: <ItemTemplate>
5: <asp:TextBox ID="txtDoubleClick" runat="server" Text=""></asp:TextBox>
6: </ItemTemplate>
7: </asp:TemplateField>
8: </Columns>
9: </asp:GridView>
lo script potrebbe essere così modificato:
1: <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
2: <script type="text/javascript">
3: $(function() {
4: $("#dgrTest input[type=text]").bind('dblclick', function(event) { setDateNow($(this)) })
5: });6: function setDateNow(id) {
7: var date = new Date();
8: var day = date.getDate();
9: var month = date.getMonth() + 1;
10: var year = date.getFullYear();
11: id.val(day + "/" + month + "/" + year);}
12: </script> Essenzialmente la modifica più sostanziale riguarda il gestore dell’evento applicato a tutti i controlli input di tipo text presenti nella griglia con id dgrTest.
Concludo con un altro comando altrettanto importante one():
1: one(eventType, data, function)
permette di rimuove l’handler dopo la prima esecuzione dell’evento specificato.
Read More »»
