LinkBack URL
About LinkBacks
HELP ME - JQUERY transform code in JAVA
HI , I need a huge help, recently I'm studying JAVA and I should turn this little project done in jQuery in JAVA language.
HELP ME PLEASE?
Below the public HTML and JS code:
--- Update ---
---->HTML :Originally Posted by francescocar
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="animazioni3.js"></script>
<LINK REL=stylesheet TYPE="text/css" HREF="prova.css" TITLE="style">
<LINK REL=stylesheet TYPE="text/css" HREF="jquery-ui-1.10.4.custom.css" TITLE="style">
</head>
<body bgcolor="gray">
<center>
<div id="dialog-form" class="div" title="Aggiungi Contatto">
<p class="validateTips"></p>
<form>
<FIELDSET>
<LEGEND><STRONG><FONT color=red>Inserisci i Dati</FONT></STRONG></LEGEND>
<label id="open-event" title="inserisci il tuo Nome" for="name">Nome</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label id="open-event" title="inserisci il tuo Cognome" for="Cognome">Cognome</label>
<input type="text" name="cognome" id="cognome" value="" class="text ui-widget-content ui-corner-all">
<label id="open-event" title="inserisci la tua data di nascita" for="data">Data di nascita</label>
<input type="text" id="datepicker" class="text ui-widget-content ui-corner-all" size="30">
<label id="open-event" title="inserisci il tuo numero di Telefono" for="tel">Telefono</label>
<input type="text" name="tel" id="tel" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<center>
<p></P>
<div id="users-contain" class="ui-widget" >
<FIELDSET style="border-width: 2; padding: 10; width: 500">
<LEGEND><STRONG><FONT color=black size=4pt>Rubrica</FONT></STRONG></LEGEND>
<div align="left" >
<br>La mia Rubrica <br>
<TR>
<TD colspan=2><HR></TD>
</TR>
</div>
<p>Ricerca Contatto:</p>
<input type='text' class="InpTxt1" size='10' name='campo' />
<input type='button' value='Cerca' id="Trova" name="Cerca" />
<button id="create-user">Inserisci Contatto</button>
<table id="users" class="ui-widget ui-widget-content">
<tr>
<td class="header" id="sel">Seleziona</td>
<td class="header">Nome</td>
<td class="header">Cognome</td>
<td class="header">Data di Nascita</td>
<td class="header">Telefono</td>
<td class="header">Cancella</td>
</tr>
</table>
</div>
<div id="dialog-confirm" title="Conferma eliminazione">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Sei Sicuro di procedere con la cencellazione dei contatti selezionati ?</p>
</div>
<div style="display:none" class="freeow freeow-top-right" id="risultato" title="Risultato"></div>
</fieldset>
<button id="Elimina">Elimina Selezionati</button>
</center>
</body>
</html>
---->JS :
$(document).ready(function(){
$(function() {
var name = $( "#name" ),
tel = $( "#tel" ),
cognome = $( "#cognome" ),
data = $ ("#datepicker"),
allFields = $( [] ).add( name ).add( tel ).add( cognome ).add(data),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Verifica il campo evidenziato" );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Aggiungi Contatto": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "Nome", 1, 16 );
bValid = bValid && checkLength( tel, "Telefono", 9, 10 );
bValid = bValid && checkLength( cognome, "cognome", 1, 16 );
bValid = bValid && checkRegexp( name, /^([a-zA-Z ])+$/, "Sono consentite solo lettere" );
bValid = bValid && checkRegexp( tel, /^[0-9]{9}/, "Sono consentite solo numeri" );
bValid = bValid && checkRegexp( cognome, /^([a-zA-Z ])+$/, "Sono consentite solo lettere" );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td class='prova'><input class='elimina'type='checkbox'></td>" +
"<td>" + name.val() + "</td>" +
"<td>" + cognome.val() + "</td>" +
"<td>" + data.val() + "</td>" +
"<td>" + tel.val() + "</td>" +
"<td><img src='images/cancella contatto.png' onclick='deleteRow(this)'/>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Chiudi: function() {
$( this ).dialog( "close" );
}
},
hide: {
effect: "explode",
duration: 1000
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
$(function() {
$( "#open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
});
//funzione trova
$('#Trova').click(function () {
PulisciRubrica('users');
var valore = $('.InpTxt1').val(); //document.Rubrica.campo.value;
var table = $('#users');
var celle = $('td');
var contatore = 0;
for (var i = 0; i < celle.length; i++) {
if (celle[i].innerHTML == valore) {
html=('<p></p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span><p>Ecco il to numero: </p>' + celle[i + 1].innerHTML);
$( "#risultato" ).html("");
$( "#risultato" ).html(html);
$( "#risultato" ).dialog( "open" );
celle[i].className = 'trovato';
}
}
});
function PulisciRubrica(){
var table = $('users');
var celle = $('td');
for (var i = 0; i < celle.length; i++) {
celle[i].className = 'default';
}
}
//tasto cerca
$( "#risultato" ).dialog({
autoOpen: false,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
//data di nascita
$(function() {
$( "#datepicker" ).datepicker();
});
/*$('#Elimina').click(function() { // When delete marked items button is clicked
// Find checked inputs within #users table,
// then find their surrounding rows and delete them
$('#users input:checked').closest('tr').remove();
}); */
// conferma cancellazione
$(function() {
$( "#dialog-confirm" ).dialog({
autoOpen: false,
height:140,
modal: true,
buttons: {
"Elimina": function() {
console.log('prova');
$('#users input:checked').closest('tr').remove();
$( this ).dialog( "close" );
},
"Annulla": function() {
$( this ).dialog( "close" );
}
}
});
});
$( "#Elimina" ).click(function() {
$( "#dialog-confirm" ).dialog( "open" );
});
});
//funzione javascript
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("users").deleteRow(i);
};
Related threads:
