Regresando después de una partida inminente, continuamos con JQuery y sus beneficios.
En otras nuevas estoy buscando un diseño que sea apropiado para este sitio alguna propuesta?
Cambiar de campo al dar Enter
Bueno una fácil función para dar un salto de campo con un precionar enter Enter.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$("document").ready(function(){
$(".press").keypress(function(event){
if(event.which == 13){
cb = parseInt($(this).attr('tabindex'));
if ( $(':input[tabindex=\'' + (cb + 1) + '\']') != null) {
$(':input[tabindex=\'' + (cb + 1) + '\']').focus();
$(':input[tabindex=\'' + (cb + 1) + '\']').select();
return false;
}
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>campo1</td>
<td><input type="text" tabindex="1"/></td>
<td>campo2</td>
<td><input type="text" tabindex="2" /></td>
</tr>
<tr>
<td>campo3</td>
<td><input type="text" tabindex="3" /></td>
<td>campo4</td>
<td><input type="text" tabindex="4" /></td>
</tr>
<table>
</body>
</html>
Agregar elementos a un Select desde otro Select HTML
me auxilie de Jquery para realizar este procedimiento de una manera sencilla y rapida, esto es muy util a la hora de querer elegir multiples opciones que se encuentran en una lista, claro como siempre hay que ponerle un poquito de ingenio para que se vea excelente.
<!--select 1--> <select id="<a>cbx_seleccion</a>"> <option value="1|opcion 1|0">opcion 1</option> <option value ="2|opcion 2|0">opcion 2</option> <option value="3|opcion 3|0">opcion 3</option> </select> <!--select 2--> <select id="<a>cbx_asignacion</a>"></select>
La parte superior son los dos select, el procedimiento es seleccionar con doble clic el elemento que se encuentra en el selector 1 y se haga una copia automatica en el selector 2.
este es el codigo escrito con jquery para facilitar los pasos.
-
//agrega el elemento del objeto cbx_asignacion
$("#cbx_seleccion").dblclick(function(){
var atributos = $(this).attr("value");
atributos = atributos.split("|");
$("#cbx_asignacion").append('<option value="'+atributos[0]+'|'+atributos[1]+'|'+atributos[2]+'">'+atributos[1]+'</option>'); });
//Elimina el elemento del objeto cbx_asignacion
$("#cbx_asignacion").dblclick(function(){
$("#cbx_asignacion option[value='"+$(this).attr("value")+"']").remove();
});
Validar campos de un formulario
Bueno, hace mucho tiempo estaba con un problemita que tenia que validar un formulario con mas de 50 campos, y si dificil me las vi, a los 30 segundos de tener el problema en mano se me vino la idea, jajaja.
Claro utilizo jquery para acortar el codigo y ahorrarme el document… bla bla bla..
usando un poco de logica y creatividad mexicana, realize lo siguiente.
// $("[referencia al tipo de objeto]").length
for(x=0;x<=$("input").length;x++){
if($(this).val()==""){
alert("El campo "+$(this).attr("nombre")+" encuentra vacio.");
$(this).focus();
}
}
Es un pequeño fragmento que nos funciona para una N cantidad de campos de un mismo tipo, pero si se deseas es facilitar mas el asunto, simplemente delimita el ciclo a la cantidad justa de campos en el formulario y les se asigna un id o un atributo consecutivo ejemplo
<input type="text" id="vl_0"/>
<input type="text" id="vl_1"/>
<input type="text" id="vl_2"/>
<select id="vl_3"/><option>hola</option></select>
//en el script se coloca.
for(x = 0 ; x<= 3; x++ ){
if($(this).val()==""){
alert("El campo "+$(this).attr("nombre")+" encuentra vacio.");
$(this).focus();
}
}
Asignando un id consecutivo a todos los elementos se puede recorrer de una forma rapida y en poco espacio.
Buscar y reemplazar con javascript
Buen día, para buscar y remplazar tenemos el siguiente codigo:
//se recibe el valor de la cadena principal
descripcion = $("#txt_descripcion").val();
//Son los caracteres nuevos
entrada = [""","'","<"];
//los que serán sustituidos
salida = ['"',"'","<"];
//Creamos un ciclo para recorrer el vector que en este caso tiene 3 registros pero comienza
//desde 0, en el caso del No.2 podemos cambiarlo por un contador del arreglo:
//entrada.count()
for(x=0;x<=2;x++){
//hacemos un Split a descripcion para generar un nuevo arreglo.
caCaracter = descripcion.split(salida[x]);
// contamos el número de caracteres que contiene caCaracter
cCaracter = caCaracter.length;
//se genera otro ciclo para hacer la sustitución de todos los caracteres ajenos a nuestra
//cadena
for(i=0;i<=cCaracter;i++){
//con un .replace hacemos el remplazo de los caracteres.
descripcion=descripcion.replace(salida[x],entrada[x]);
}
}
De regreso
Despues de unas merecidas vacaciones, regreso a este espacio donde comparto mis infames y delirantes conocimientos sobre la programacion web, haciendo la vida mas facil para los que programan por amor al arte, me gustaria que los lectores, fueran un poco mas agradecidos, comentando y alentando al broblog para aclarar las cosas =)
Manipular objetos HTML con Jquery parte 1
Intentando crear un pequeño manual de Jquery para todos los compañeros amantes de la programación web o curiosos doy por iniciado este pequeño pero intensivo manual de Manipulación de Objetos HTML con Jquery.
Requerimientos:
Conocimientos básicos de Jquery en caso que no existan estos, busca en este link!
https://scriptall.wordpress.com/2012/03/13/jquery-primeros-pasos/
Comenzamos.
1.- La mayor parte de los elementos de HTML cuentan con una gran variedad de atributos a los cuales con Jquery podemos tener acceso a el o ellos, como ejemplo usaremos un text box ya que es el mas fácil de asimilar para todos ya que es el mas conocido, teniendo el conocimiento de como hacerlo con uno es similar para todos los otros objetos.
Por atributo Id.
Obtener valor:
var a = $("#txt1").val();
Asignar Valor
var a = $("#txt1").val("hola mundo");
Por atributo Class
Obtener valor:
var a = $(".txt1").val();
Asignar Valor
var a = $(".txt1").val("hola mundo");
agregar atributo al objeto:
<input type="text" name="txt1" id="txt1" sdf="hola mundo" />
Tomar valor del nuevo atributo
var b = $("#txt1") .attr("sdf");
Asignar valor por medio del nuevo atributo.
var b = $("#txt1") .attr("sdf","hola mundo");
Pronto continuamos con la segunda parte =)
Web Fonts
Cuantas veces nos Estamos que nos damos un tiro por no saber que fuentes usar en nuestra web y no solo eso!! si no la pregunta que a muchos nos atormenta, ¿Como carajo la voy a instalar?… pues bueno google ya hace tiempo y un poco des actualizada mi información, saco al vuelo de la Internet y para deleite de muchos diseñadores web su pagina http://www.google.com/webfonts bonita interactiva y sobre todo util!.
te dan el código para insertar la fuente de tu gusto así como también te dicen que tan pesada es para el sitio web, pero no te preocupes que su medidor esta al tanto de eso solo dale un ojo para darte cuenta de la maravilla que es esta pagina.
si tienes problemas en entender de como aplicarlo tu solo pregunta =)!
Jquery primeros pasos
Como es costumbre en muchos blogs las cosas facil las hacen dificil, solo para informar que el jquery visto en este sitio creo que lo explicare de la manera mas sencilla. Comienzo con las cosas basicas y subo el nivel poco a poco =). anulare javascript puro y me apego a lo que es jquery (frame para javascript).
Como agregarlo a nuestro documento:
Esta linea se ingresa dentro de nuestro head.
<head> <script type="text/javascript" src="<a title="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</a>"></script> </head>
Se preguntaran porque no esta colocado dentro de la carpeta junto con los demas archivos, bueno esto es porque solo se carga una vez, se aloja en cache y no hace peso en nuestro site.
Lo primero del tema es hacer la apertura del jquery para utilizar la mayor parte de sus funciones.
//Indicamos que cuando este listo el documento inicie la carga del resto del codigo.
$("document").ready(function(){
alert("Se ha cargado correctamente la forma y de igualmanera se agrego correctamente jquery.js");
});
De esta manera tenemos ya cargado el jquery en nuestro documento ahora se puede pasar a codear un poco mas, en el siguiente codigo tenemos un textbox el cual lo identifica un id «txt_texto1» el cual tomaremos su valor con query y se despliega en un alert al dar click en el boton que lo identifica un id de «btn_boton1».
$("document").ready(function(){
$("#btn_boton1").click(function(){
alert($("#txt_texto1").val());
});
});
Este codigo lo puedes copiar y pegar en un tu documento html pero recuerda meterlo dentro de las etiquetas head
<head> </head>
Bueno aqui terminamos por hoy, suerte con la pequeña practica y ya les traigo mas =)
Obtener la edad con JavaScript
Tomando el resultado de una pequeña función que necesitaba, navengando encontre un source el cual no se adecuaba a mis necesidades asi que opte por modificarlo: necesitaba que me diera los años justo al dia que yo le colocara y asi quedo.
<script>
<!-- -->
function displayDate(d,m,y) {
var Edad = "";
var Fecha = new Date();
var dia = Fecha.getDate();
var mes = Fecha.getMonth();
var año = Fecha.getYear();
if (año < 1000){
año += 1900;
}
mes = mes + 1;
edad = año - y;
if(m <= mes){
if(d <= dia){
return edad;
}
if(d > dia && m < mes){
return edad;
}
if(d > dia && m == mes){
return edad - 1;
}
}else{
if(m > mes){
return edad - 1;
}
}
}
alert(displayDate(7,03,2011));
</script>
Facil, solo basta con aplicarla y enviarle los datos digeridos.
Script All 