Weblogs Código

RecorteX

» AndiXTRM
73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
Estás viendo los recortes del usuario AndiXTRM

RSS
Recortes: 7
Registrado: 18/5/2007

Etiquetas:
php (4)
xhtml (3)
javascript (3)
clases (1)
mysql (1)
flash (1)
html (1)
imagenes (1)
ajax (1)

Generar funciones de accesibilidad de manera rapida en un formulario

El codigo que posteo es uno que yo uso, tal vez no sea la mejor solucion mas quiero compartirla con Uds., para mi se ha vuelto una manera muy efectiva y rapida de dar cierta usabilidad a mis formularios sin tanta complicacion ademas de aplicar javascript no intrusivo

 
  function prepararFormulario()
{		
	var txts=document.getElementsByTagName("INPUT");
	for(var i=0;i<txts.length;i++)
	{	var txt=txts[i];
	
		txt.onfocus=function()
		{	this.className='focused'; 
			if(this.type=="text")
			{
				/*aun me falta terminar la implementacion, estoy buscando un 
codigo crossbrowser que al obtener el foco 
seleccione el texto de la caja de texto*/
			}
		}
		
		txt.onblur=function()
		{	this.className=''; }
		
		/////////////////////////////////////////
		//Los navegadores basados en estandares automaticamente crean el Objeto Event
		//, a pesar que este no sea definido de manera explicita
		//asi en esta funcion, al enviar e, FF automaticamente genera un objeto Event.
		txt.onkeypress=function(e)
		{ 						
				if(!e)var e=window.event;			
				var xId=new String;
				xId=this.id;
				//(!document.all) ? alert(e.srcElement) : alert(e.target);
				switch(xId.substring(0,3))
				{	
					case 'txt':					
						return soloCadenas(e);
						break;				
					case 'num':
						return soloNumeros(e);					
						break;
					case 'fec':
						return soloFechas(e);					
						break;
					case 'fic':
						return soloFechas_Input(e);					
						break;		
				}
		}
			
 
	}
	
	var sels=document.getElementsByTagName("SELECT");
	for(var i=0;i<sels.length;i++)
	{	var sel=sels[i];
		sel.onfocus=function()
		{	this.className='focused'; }
		
		sel.onblur=function()
		{	this.className=''; }
	}	
}
 

Funcion en JavaScript que recoge los valores de un formulario

ya se que esto mismo lo hace el SUBMIT de un formulario cuando se envia por metodo POST, pero en caso quieran enviarlo por metodo GET esto puede serles de ayuda sobre todo si van utilizar Ajax.

 
  function getValues(obj)
{
	var getstr="";
	for (var i=0; i<obj.childNodes.length; i++) {
		if (obj.childNodes[i].tagName == "INPUT") {
			if (obj.childNodes[i].type == "text") {
			   getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
			}
			if (obj.childNodes[i].type == "checkbox") {
			   if (obj.childNodes[i].checked) {
				  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
			   } else {
				  getstr += obj.childNodes[i].name + "=&";
			   }
			}
			if (obj.childNodes[i].type == "radio") {
			   if (obj.childNodes[i].checked) {
				  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
			   }
			}
		 }   
		 if (obj.childNodes[i].tagName == "SELECT") {
			var sel = obj.childNodes[i];
			getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
		 }
		 
		 if(obj.childNodes[i].tagName=="FIELDSET" || obj.childNodes[i].tagName=="DIV" || obj.childNodes[i].tagName=="UL" || obj.childNodes[i].tagName=="LI")
		 {
			getstr+=getValues(obj.childNodes[i]);
		 }
	}	
	 return getstr;
}
 

Como observan el resultado es un String, de tal manera que uds pueden llamar esta funcion y en su funcion o metodo que llaman una pagina mediante Ajax pueden enviar asi

 
//Donde obj es el elemento padre del formulario
var params=getValues(obj)
getPagina(url + params)
 

Cargar combos con Ajax

No se uds. pero antes hacer combos que se cargaran donde uno dependia de otro era algo engorroso, claro que habia varios metodos, se podia usar iframes o recargar la pagina, aunque sinceramente ninguno de esos me parece muy bueno, hace poco necesite hacer algo asi para una web app, asi que le digo como lo hice, no se si sera lo mejor pero talvez a alguien le sirva.

Por si acaso esto esta hecho con PHP y MySQL

Primero tenemos nuestro formulario

Esas dos son clases donde la primera permite manejar la Base de datos, esa clase la postee hace un tiempo aqui.( http://www.recortex.com/recorte/177 )
Todo lo que viene a continuacion esta dentro de un solo archivo formulario.php

 
<?php 	
        include("./cls/clsManejaBD.php"); 
	include("./cls/clsUbicacion.php"); 
?>
 
 
<form action="./actions/registrar_evento.php" method="post" id="frmRegistraEvento">
<fieldset><label>Departamento</label>
         <?php /*instancio la clase y llamo a un metodo de la misma que va a generar la lista de departamentos*/ 
               $u=new Ubicacion(); $u->Generar_Combo_Departamentos(); 
         ?>
</fieldset>
<fieldset><label>Provincia</label><div id="cmbProvincia">Provincia</div></fieldset>
<fieldset><label>Distrito</label><div id="cmbDistrito">Distrito</div></fieldset>
<fieldset><label>Fecha</label><input type="text" name="txtFecha" value="dd/mm/aaaa" size="10" maxlength="10"/></fieldset>
<fieldset><label>Tema</label><input type="text" name="txtTema" value="tema tratado"/></fieldset>
<fieldset><label>Publico</label><input type="text" name="txtPublico" value="publico atendido"/></fieldset>
<fieldset><label>Lugar</label><input type="text" name="txtLugares" value="lugar"/></fieldset>
<fieldset><label>Cantidad</label><input type="text" name="txtCantidad" value="0"/></fieldset>
<fieldset><label>N&deg; de Informe</label><input type="text" name="txtInforme" value="N&deg; de Informe" /></fieldset>
<fieldset><label>Fecha de Informe</label><input type="text" name="txtFecha_Informe" value="dd/mm/aaaa" size="10" maxlength="10"/></fieldset>
<fieldset><input type="button" name="aceptar" value="aceptar"/> <input type="button" name="borrar" value="borrar"/></fieldset>
</form>
 

Cuando se vea esta pagina el navegador reemplazara donde aparece nuestro codigo php por esto

 
<select id="departamento" onchange="cambio(id,2);">
<option> Amazonas</option>
<option> Ancash </option>
<option> Arequipa </option>
...
</select>
 

ahora viene la parte de javascript, yo tengo una funcion denominada cambio() dentro de la cual valido el destino y que pagina cargar, lo que sigue pueden ponerlo en la misma pagina o en un archivo js aparte

 
function cambio(id, dest)
{	var index=document.getElementById(id).selectedIndex;
	var url;
	var detino;
       /*de acuerdo al combo que cambie carga el dato del siguiente combo
combo "departamento" carga "provincias" y "provincias" carga "distritos" */
	if(dest==2)
		{ 
			url="cargar_provincias.php?idDep=" + (index+1); /*a la variable se le suma 1 ya que el indice del combo empieza en 0*/
			destino='cmbProvincia';
		}
		
	if(dest==3)
		{ 	url="cargar_distritos.php?idProv=" + (index+1) + "&idDep=" + (document.getElementById('departamento').selectedIndex + 1);
			destino='cmbDistrito';
		}
		
	cargarDatos(url, "action", destino);//esta es una funcion que llama al ajax
}
 

Bueno aunque yo tengo separado en archivos diferentes en este caso vamos a decir que tanto la funcion de arriba como la funcion para ajax se encuentra en el mismo archivo

 
function cargarDatos(pagina, dir, target)	
{	var page = false;
	var target;
	var url;
	url="./" + dir + "/" + pagina;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        page = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try 
        {
            page = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versi&oacute;n antigua
            try
            {
                page = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    } 
    else
	{	return false;}
	
    page.onreadystatechange = function ()
    {
        // funci&oacute;n de respuesta
		if (page.readyState != 4) {
			document.getElementById (target).innerHTML= '<div id="loader"><img src="./img/ajax-loaderC.gif" > Cargando datos...</div>';
		}else{
			//window.setTimeout("cargarpagina(page);",2000); //pretendemos demorar la respuesta unos segundos
			cargarpagina(page, target);
		} 		
    }
	
    page.open ('GET', url, true); // asignamos los m&eacute;todos open y send
    page.send (null);	
 
}
 
function cargarpagina(page, target)
{
    if (page.readyState == 4 && (page.status == 200 || window.location.href.indexOf ("http") == - 1))
		document.getElementById (target).innerHTML = page.responseText;
}
 

por ultimo debemos tener nuestros archivos php, yo los tengo en una carpeta llamada “action”
aqui le muestro el que carga los distritos para que se den una idea

 
<?php
	include("../cls/clsManejaBD.php"); 
	include("../cls/clsUbicacion.php"); 
	$id_departamento=$_GET['idDep'];
	$id_Provincia=$_GET['idProv'];
	$u=new Ubicacion(); $u->Generar_Combo_Distritos($id_departamento,$id_Provincia);
?>
 

por ultimo no se uds. pero a veces me ha pasado a mi que en tutoriales como estos no ponen el codigo completo php y uno se pierde, asi que aqui les pongo el codigo de la clase Ubicacion.

getSQL($query);		
		return $rs;
	}
	
	function Generar_Combo_Departamentos()
	{ $rs=$this->ListarDepartamentos();
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='departamento' onchange='cambio(id,2);'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}
	
	function ListarProvincias($fk_departamento)
	{	
		$dbm=new ManejaBD;
		$query="SELECT idProvincia, nombre FROM Provincia where fk_Departamento=$fk_departamento";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	function Generar_Combo_Provincias($idDepartamento)
	{ $rs=$this->ListarProvincias($idDepartamento);
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='provincia' onchange='cambio(id,3);'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}
	
	function ListarDistritos($fk_departamento, $fk_provincia)
	{	
		$dbm=new ManejaBD;
		$query="SELECT DISTINCT idDistrito, nombre FROM Distrito where fk_Departamento=$fk_departamento and fk_Provincia=$fk_provincia";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	function Generar_Combo_Distritos($idDepartamento, $idProvincia)
	{ $rs=$this->ListarDistritos($idDepartamento, $idProvincia);
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='distrito'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}

	
	function Ubicacion_Evento($idEvento)
	{	
		$dbm=new ManejaBD;
		$query="SELECT direccion FROM Ubicacion where fk_Evento=$idEvento";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	
}

A pedido de un usuario ahi esta cargar_distritos.php

 
 
	include("../cls/clsManejaBD.php"); 
	include("../cls/clsUbicacion.php"); 
	$id_departamento=$_GET['idDep'];
	$id_Provincia=$_GET['idProv'];
	$u=new Ubicacion(); $u->Generar_Combo_Distritos($id_departamento,$id_Provincia);
 

aunque un poco largo espero sea entendible _

Insertar un SWF con XHTML valido

Esta es una de las maneras de insertar un SWF utilizando xhtml valido, ya que la etiqueta embed no es administida por la W3C.

 
<object type="application/x-shockwave-flash" data="./swf/anima.swf" width="786" height="165" >
							<param name="movie" value="./swf/anima.swf" />
							<param name="quality" value="high" />
							<param name="wmode" value="transparent" />
							<param name="aling" value="center" />
					</object>
 

Clase para creacion dinamica de Galeria de Imagenes sin BD

Esta es una clase que permite de manera dinamica crear tu galeria de imagenes, funciona sobre todo para casos donde no tienes una BD donde apoyarte para la creacion de tus albums de imagenes, creo que aun le voy a poner mas cosas, aqui en este sitio encontre una funcion para crear thumbsnails, que quisiera acoplar a esta clase.

 
/*******************
CLASE GALERIA
 
METODOS
	mostrarGaleria($id,$max); lista todas las imagenes que aparecen en el directorio seleccionado, este directorio 
							viene especificado en la variable $id.
							El argumento $max define cuantas fotos como maximo son mostradas.
	crarMiniGalerias($ini);el argumento $ini define desde donde empieza a mostrar, funciona para hacer la paginacion
***************/
class Galeria
{
	function mostrarGaleria($id,$max){	
		$ext = array("jpg", "png", "jpeg", "gif");//@LISTA DE EXTENSIONES ACEPTABLES
		$c=0;//@CONTADOR DEL NUMERO DE ARCHIVOS ENCONTRADOS SEGUN EL FILTRO;
		$datos=array();
		$a=3;
		//@$a=5;//@ESPECIFICA EL NUMERO DE ARCHIVOS QUE DEBE TENER CADA LISTA;		
		$dir="./galerias/".$id;
		if(is_dir($dir)){
			if ($gestor = opendir($dir)) {
				include ("./galerias/$id/datos.php");	
				echo "\t<div class='galeria'>\n";			
				echo "<p class='titulo'> $titulo </p>";
				echo "\n\t<div>\n";			
				echo "\t\t<ul>\n";
				if($max==0){
				   while (false !== ($archivo = readdir($gestor))) {
								   if ($archivo != "." && $archivo != "..") {													
										for($i=0;$i<sizeof($ext);$i++){
											if(stristr($archivo, ".".$ext[$i])){																	
												if ($c%$a==0 && $c!=0)
												{	echo "\t</ul>\n";
													echo "\t<ul>\n";
													echo "<li class='fila'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo'/> </a></li>\n";
												}
												else
												{
													echo "<li class='fila'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo' /> </a></li>\n";
												}
												$c++;																			
											}
										}
						   }
				   }
				}
				else{	while(!false==($archivo=readdir($gestor)) and $c<$max){				
								if ($archivo != "." && $archivo != "..") {													
												for($i=0;$i<sizeof($ext);$i++){
													if(stristr($archivo, ".".$ext[$i])){																	
														if ($c%$a==0 && $c!=0)
														{	echo "\t</ul>\n";
															echo "<ul>\n";
															echo "<li class='image'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo' /> </a> </li>\n";
														}
														else
														{
															echo "<li class='image'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo' /> </a> </li>\n";
														}
														$c++;									
													}
								}
								
						}		
					}	
				}
				
				echo "\t</ul>\n";
				echo "<div class='descripcion'> $descripcion </div>\n\t";
				if($max!=0){
					echo"\n\t<a href='galeria.php?gid=$id' class='oDir'> ver [+] </a>";
				}
				echo "\n\t</div>\n";	   
			   echo "</div>\n";
				closedir($gestor);
			}			
		}		
	}
	
 
	function creaMiniGalerias($ini)
	{
		echo "<div id='miniGalerias'>";
		if($ini!=1)
		{	$ini=$ini*2+1;
		}
			$max=$ini+3;
		for($i=$ini;$i<=$max;$i++)			
		{	$id='g'.$i;
			$this->mostrarGaleria($id,3);			
		}		
		echo "</div>";
		
		$dir="./galerias/";
		if ($gestor = opendir($dir)) {
			$g=0;
			echo "<div id='menuGal'>";
			 while (false !== ($archivo = readdir($gestor))) {
								   if ($archivo != "." && $archivo != "..") 
								   {		if($g%4==0)
											{	$c++;
												echo " <a href='galerias.php?n=$c'> [$c] </a> ";											
											}
											$g++;
								   }
				}
			echo "</div>";
		}
				
	}
	
	function numGalerias()
	{	$dir="./galerias";
		if ($gestor = opendir($dir)) {
			$g=0;
			 while (false !== ($archivo = readdir($gestor))) {
								   if ($archivo != "." && $archivo != "..") 
								   {		$g++;
								   }
				}
		}		
		return $g;
		
	}
	
	function creaMiniGaleriasPortada()
	{	
		$n=$this->numGalerias();
		echo "<div>";
		for($i=$n-2;$i<=$n;$i++)
		{	$id="g".$i;
			//echo $id;
			$this->mostrarGaleria($id,2);
		}
		echo "</div>";
	}
}
 

Clase para manejar conexiones mysql en localhost o servidor externo

Una clase sencilla para poder manejar la conexion a una BD MySQL asi como la ejecucion de Querys, uhmmm espero a alguien le sirva y si tiene agregados a la misma, bienvenidos !!!!

 
 
//clase Conxeion
class ManejaBD
{	
 
function Configurar($tipo="local")
{	if($tipo=="local")
	{	$parameters=array("localhost","root","mipwd","mibase");
	}else
	{	$parameters=array("http://www.mihost.com","miusuario","micontraseña","mibase");
	}
	return $parameters;
}
	
function ejecutarSQL($sql,$tipo="local")
		{	$p=array();
			$p=$this->Configurar($tipo);
			$host=$p[0]; $usr=$p[1]; $pwd=$p[2]; $db=$p[3];
			$cn=mysql_connect($host,$usr,$pwd) or die(mysql_error());
			mysql_select_db($db);
			$rs=mysql_query($sql) or die(mysql_error());
		}	
			
	function getSQL($sql,$tipo="local")
		{	$p=array();
			$p=$this->Configurar($tipo);
			$host=$p[0]; $usr=$p[1]; $pwd=$p[2]; $db=$p[3];
			$cn=mysql_connect($host,$usr,$pwd) or die(mysql_error());
			mysql_select_db($db);			
			$rs=mysql_query($sql) or die(mysql_error());
			return $rs;
		}		
		
};
 

Funcion para reemplazar caracteres especiales por codigo xhtml valido

En algunos casos hay personas que gustan de utilizar las tildes inclusive en las webs y en sus posts, asi que hice esta funcion para no tener que formatear manual mente los caracteres como las tildes y “ñ”, no es la gran cosa pero talvez a alguien le ayude asi como es sencillo agregarle mas caracteres.


  function caracteresEspeciales($texto)
	{	$nTexto=str_replace('á',"&aacute;",$texto);
		$nTexto=str_replace('é',"&eacute;",$texto);
		$nTexto=str_replace('í',"&iacute;",$texto);
		$nTexto=str_replace('ó',"&oacute;",$texto);
		$nTexto=str_replace('ú',"&uacute;",$texto);
		
		$nTexto=str_replace('?',"&Aacute;",$texto);
		$nTexto=str_replace('É',"&Eacute;",$texto);
		$nTexto=str_replace('?',"&Iacute;",$texto);
		$nTexto=str_replace('Ó',"&Oacute;",$texto);
		$nTexto=str_replace('Ú',"&Uacute;",$texto);
		
		$nTexto=str_replace('ñ',"&ntilde;",$texto);
		$nTexto=str_replace('Ñ',"&Ntilde;",$texto);
		
		return $nTexto;
	}
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin