JavaScript

28
nov/11

jQuery Movil: jQuery para dispositivos móviles

by under JavaScript

jquerymovil

La mejor librería Javascript en versión de escritorio ha llegado oficialmente a los equipos móviles con la versión estable de jQuery Mobile (la 1.0) , un punto de inflexión para jQuery si te gusta trabajar con dispositivos móviles.

Este marco contiene varios controles adaptados para dispositivos táctiles como el iPhone, IPAD, o muchos teléfonos que existen actualmente en el mercado con el sistema operativo Android.

Lo mejor es que el corazón de la versión móvil de la jQuery es tan robusto y fácil de usar ya que siempre ha sido para la versión de escritorio.

Enlace: jQuery Mobile

f453453027255a969889a8a64366bcf6
Share via email
, , , , Leave a Comment more...

29
jul/08

Combos (Combobox) Dependientes Utilizando PHP, Mysql y jQuery (Javascript)

by under JavaScript, PHP, Programación, Recursos

Antes que nada, hola a todos este es mi primer post en el blog y espero no sea el ultimo porque desde hoy voy a colaborar aquí esperando que la información publicada sea de ayuda a todos.

Y pues empezamos, la idea es crear un script que al seleccionar el país nos muestre un combo con los estados de este y al seleccionar un estado nos muestre las ciudades del estado, aquí un ejemplo:

Ejemplo

Esto utilizando Jquery, php y Mysql, el código que aquí se utilizara es utilizando una pequeña clase para uso de mysql que hice hace algunos días y que pueden encontrar aquí, aunque en los archivos de descarga pondré los 2 utilizando la clase y sin ella.

Bueno para empezar mi base de datos se llama poblaciones y estas son las tablas que necesitamos:

PLAIN TEXT
MySQL:
  1. País:
  2. CREATE TABLE `pais` (
  3. `idpais` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  4. `pais` VARCHAR(50) DEFAULT NULL,
  5. PRIMARY KEY USING BTREE (`idpais`)
  6. ) ENGINE=MyISAM;
  7.  
  8. Estado:
  9. CREATE TABLE `estado` (
  10. `idestado` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  11. `estado` VARCHAR(50) DEFAULT NULL,
  12. `pais` INT(11) NOT NULL DEFAULT '0',
  13. PRIMARY KEY USING BTREE (`idestado`)
  14. ) ENGINE=MyISAM;
  15.  
  16. Ciudad:
  17. CREATE TABLE `ciudad` (
  18. `idciudad` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  19. `ciudad` VARCHAR(50) NOT NULL DEFAULT '',
  20. `estado` INT(11) NOT NULL DEFAULT '0',
  21. `pais` INT(10) UNSIGNED NOT NULL DEFAULT '0',
  22. PRIMARY KEY USING BTREE (`idciudad`)
  23. ) ENGINE=MyISAM;

y este código de la pagina donde estarán nuestros combos:
"com_dependientes.php"

PLAIN TEXT
PHP:
  1. <?php
  2. include("mysql_inc.php");
  3. $mysql = new MySql_Class;
  4. $mysql->user="root";
  5. $mysql->password="root";
  6. $mysql->db="poblaciones";
  7. $mysql->server="localhost";
  8. $mysql->conection();
  9. ?>
  10. <script src="js/jquery.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13.     $("select").change(function(){
  14.         // Vector para saber cuál es el siguiente combo a llenar
  15.  
  16.         var combos = new Array();
  17.         combos['pais'] = "estado";
  18.         combos['estado'] = "ciudad";
  19.         // Tomo el nombre del combo al que se le a dado el clic por ejemplo: país
  20.         posicion = $(this).attr("name");
  21.         // Tomo el valor de la opción seleccionada
  22.         valor = $(this).val()       
  23.         // Evaluó  que si es país y el valor es 0, vacié los combos de estado y ciudad
  24.         if(posicion == 'pais' && valor==0){
  25.             $("#estado").html('    <option value="0" selected="selected">----------------</option>')
  26.             $("#ciudad").html('    <option value="0" selected="selected">----------------</option>')
  27.         }else{
  28.         /* En caso contrario agregado el letreo de cargando a el combo siguiente
  29.         Ejemplo: Si seleccione país voy a tener que el siguiente según mi vector combos es: estado  por qué  combos [país] = estado
  30.             */
  31.             $("#"+combos[posicion]).html('<option selected="selected" value="0">Cargando...</option>')
  32.             /* Verificamos si el valor seleccionado es diferente de 0 y si el combo es diferente de ciudad, esto porque no tendría caso hacer la consulta a ciudad porque no existe un combo dependiente de este */
  33.             if(valor!="0" || posicion !='ciudad'){
  34.             // Llamamos a pagina de combos.php donde ejecuto las consultas para llenar los combos
  35.                 $.post("combos.php",{
  36.                                     combo:$(this).attr("name"), // Nombre del combo
  37.                                     id:$(this).val() // Valor seleccionado
  38.                                     },function(data){
  39.                                                     $("#"+combos[posicion]).html(data);    //Tomo el resultado de pagina e inserto los datos en el combo indicado                                                                               
  40.                                                     })                                               
  41.             }
  42.         }
  43.     })       
  44. })
  45. </script>
  46. <form id="form1" name="form1">
  47. <div>
  48. <select name="pais" id="pais">
  49.     <option selected="selected" value="0">---------</option>
  50. <?
  51. $query = $mysql->query("SELECT * FROM pais");
  52. if($query["amount"]>0){                       
  53.     foreach($query["data"] as $rs){
  54.     ?>
  55.         <option value="<?=$rs["idpais"]?>"><?=$rs["pais"]?></option>
  56.     <?
  57.     }
  58. }
  59. ?>
  60.                         </select>
  61. </div>
  62.  
  63. <div>
  64. <select id="estado" name="estado">
  65.     <option value="0" selected="selected">----------------</option>
  66. </select>
  67. </div>
  68.  
  69. <div>
  70. <select id="ciudad" name="ciudad">
  71.     <option value="0" selected="selected">-------------------</option>
  72. </select>
  73. </div>
  74. </form>

y este es el código de "combos.php" :

PLAIN TEXT
PHP:
  1. <?
  2. include("mysql_inc.php");
  3. $mysql = new MySql_Class;
  4. $mysql->user="root";
  5. $mysql->password="root";
  6. $mysql->db="poblaciones";
  7. $mysql->server="localhost";
  8. $mysql->conection();
  9. $idcombo = $_POST["id"];
  10. $action =$_POST["combo"];
  11. switch($action){
  12.     case "pais":{
  13.         $query =$mysql->query("SELECT idestado,estado FROM estado WHERE pais = $idcombo order by estado ASC");
  14.         foreach($query["data"] as $rs)
  15.             echo '<option value="'.$rs["idestado"].'">'.htmlentities($rs["estado"]).'</option>';   
  16.     break;
  17.     }
  18.     case "estado":{       
  19.         $query =$mysql->query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
  20.         foreach($query["data"] as $rs)
  21.             echo '<option value="'.$rs["idciudad"].'">'.htmlentities($rs["ciudad"]).'</option>';   
  22.     break;
  23.     }
  24. }
  25. ?>

y por último acá los archivos aquí los archivos en descarga con la siguiente estructura:
conclase -> capeta con el script tal y como esta en este post
sinclase -> carpeta con el script sin el uso de la clase
combos_dependientes.sql -> Archivo de texto con las ciudades, estados de méxico, solo las tablas ustedes crean la base de datos e insertan estas y cambian el nombre de la base datos en el script y listo tiene que funcionar de la mejor manera.

Date una vuelta por mi Blog para más ejemplos :D -> http://jjeb.wordpress.com/

f0e894807523fcfca475ebd439844e5d
Share via email
, , , 1 Comment more...

25
jul/08

Aptana un IDE para el desarrollo web

by under CSS, JavaScript, PHP, Programas, Recursos, Tecnología

Primero que nada hola a todos, es mi primer post en este blog desde ahora voy a colaborar espero sea de ayuda para todos.

Aptana es un nuevo entorno de desarrollo especializado, donde podrás programar diferentes lenguajes como PHP, Ruby, JavaScript, etc. También podrás utilizarlo como editor de sintaxis SQL, puedes utilizar CSS y visualizarlos a la ves ,lo mas útil de esta herramienta es que se especializa en programación de aplicaciones dinámicas web, utilizando Ajax he inclusive puedes utilizar el framework de Ruby on Rails, es una excelente opción sin duda alguna.

Esta opción la podemos trabajar en los sistemas operativos Windows y Linux, es muy sencilla de instalar, en Windows solo hay que ejecutar el .exe y darle el clásico siguiente ... siguiente... siguiente.

Para Linux puedes descargarte el .tar.gz y descomprimirlo, después solo hay que darle doble click al ejecutable llamado Apatana, y listo ya estarás en el ambiente de trabajo de Apatana, podrás bajarte después plugins para trabajar con diferentes lenguajes y framework.

Aquí les dejo el enlace de aptana.

Espero les guste este magnifico IDE, si te interesa saber mas sobre Software Libre entra a la comunidad ihtoa.org.

6cacd2e9a18f501313a2e959ff9204d8
Share via email
, , , Leave a Comment more...

27
jun/08

Funcion para Validar Fechas en JavaScript

by under ASP, JavaScript

Hola me estan atormentando en el trabajo con una BD mal hecha, en la cual no estaban las fechas con el tipo date si no varchar, asi que he tenido que reprogramar todo eso y os explico el resultado:

Primero la funcion javascript para verificar lo que escribe el usuario:

PLAIN TEXT
JavaScript:
  1. function esDigito(sChr){
  2. var sCod = sChr.charCodeAt(0);
  3. return ((sCod> 47) && (sCod = 1) && (nDia = 1) && (nMes <= 12));
  4. return bOk;
  5. }
  6. function valAno(oTxt){
  7. var bOk = true;
  8. var nAno = oTxt.value.substr(6);
  9. bOk = bOk && ((nAno.length == 2) || (nAno.length == 4));
  10. if (bOk){
  11. for (var i = 0; i <nAno.length; i++){
  12. bOk = bOk && esDigito(nAno.charAt(i));
  13. }
  14. }
  15. return bOk;
  16. }
  17. function valFecha(oTxt){
  18. var bOk = true;
  19. if (oTxt.value != ""){
  20. bOk = bOk && (valAno(oTxt));
  21. bOk = bOk && (valMes(oTxt));
  22. bOk = bOk && (valDia(oTxt));
  23. bOk = bOk && (valSep(oTxt));
  24. if (!bOk){
  25. alert("Fecha inválida");
  26. oTxt.value = "";
  27. oTxt.focus();
  28. }
  29. }
  30. }

En el input del campo donde se ingresa la fecha va esto: onBlur="valFecha(this)"

y luego recuperais la fecha que en este ejemplo seria para mysql, que trabaja en yy/mm/dd asi que con split la adecuamos a nuestro formato, en asp seria asi):

PLAIN TEXT
ASP:
  1. MiCadena =  split(fecha_ins, "/",3,1)
  2. fecha_ins = MiCadena(2)  & Micadena(1)  & Micadena(0)

recordad que split existe en cualquier lenguaje de programacion.

Luego haceis la insercion en la BD y listo

6ad41b4c402d19aba5b715500ea0bf6f
Share via email
, , Leave a Comment more...

1
feb/08

Los mejores +50 Iconos para Ajax (Ajax Load Icon) GIF

by under Descargas, JavaScript, Los 10+, Recursos, Webs

Hola amigos pues aquí les traigo una recopilación de iconos que me puse a buscar por Google.. Me encontré con una que otra página que ofrece iconos de este estilo pero la mejor que encontré fué ajaxload.info que la verdad está muy bueno :P y aquí te dejo la colección que yo encontré por ahi... Abajo está el link para descargarlos todos ;) saludos

(continue reading...)

b8d3a5ea5377dd4e1f56abbf25d9947e
Share via email
, Leave a Comment more...

Copyright © 1996-2010 Recursos Del Web. All rights reserved.
iDream theme by Templates Next | Powered by WordPress