JOURMOLY

En ésta tercera parte (y en la cuarta dentro de unos días) veremos algunas herramientas que, si bien no son tan importantes como las anteriormente explicadas, vale la pena tenerlas a mano.

appendText(texto)

Nos permite agregar solo texto a un elemento. Si intentamos insertar HTML con appendText no sera interpretado, es pasado a entidades HTML para ser mostrado como texto.

1

<div id="elemento">Elemento</div>

1

$('elemento').appendText(' con mucho texto');

Resultado:

1

<div id="elemento">Elemento con mucho texto</div>

Y si intentamos insertar HTML:

1

$('elemento').appendText(' con algunos <tags></tags>');

Resultado:

1

<div id="elemento">Elemento con algunos &lt;tags&gt;&lt;/tags&gt;</div>

hasClass(nombreClase)

Devuelve true si nuestro elemento contiene la clase indicada o false en caso contrario.

1

<div id="elemento" class="casa">Elemento</div>

1
2
3
4
5

var resultado = $('elemento').hasClass('departamento');
//resultado es false
 
var resultado = $('elemento').hasClass('casa');
//resultado es true

Seguir leyendo »

En este artículo explicare los métodos para mover, insertar, cambiar y borrar elementos del DOM de nuestras páginas con ayuda de Mootools. También prepare un par de ejemplos que los puedes ver desde aquí o bajártelos desde aquí.

injectBefore

Inserta un elemento antes del elemento que pasamos por parámetro. Dicho parámetro puede ser el id de un elemento o directamente su referencia.

1

<div id="otroElemento"></div>

1
2

var elemento = new Element('div', {'id':'MiElemento'});
elemento.injectBefore('otroElemento');

1
2

<div id="MiElemento"></div>
<div id="otroElemento"></div>

En este caso creamos un elemento (div) y lo insertamos antes que nuestro otro div. También podríamos haber tomado cualquier otro elemento de nuestra pagina y hacer lo mismo, sin tener que crearlo como en el ejemplo anterior.

1

$('MiElemento').injectBefore('otroElementoMas');

En este caso, MiElemento desaparecerá de donde estaba y se colocará por delante de otroElementoMas.

injectAfter

Como injectBefore, pero inserta seguido al elemento pasado por parámetro.

1

<div id="otroElemento"></div>

1
2

var elemento = new Element('div', {'id':'MiElemento'});
elemento.injectAfter('otroElemento');

1
2

<div id="otroElemento"></div>
<div id="MiElemento"></div>

Seguir leyendo »

Una de las clases mas importantes que tiene Mootools es la clase Element, la cual nos brinda métodos para manipular el DOM de nuestras páginas de manera muy sencilla.

Creando un Elemento

var miElemento = new Element(tipoElemento, {opciones});

Donde tipoElemento es el tipo de elemento que vamos a crear, por ejemplo ‘a’ (un enlace).

var miEnlace = new Element('a');

Las opciones pueden ser propiedades, eventos y estilos tal como lo detallo a continuación.

Propiedades
Las propiedades tales como id, class, href se agregan como propiedades de un objeto, así:

var miEnlace = new Element('a',
{
      'class': 'mi-clase',
      'id': 'mi-id',
      'href': 'http://sitio.com'
});

Estilos
Los estilos se agregan de manera muy similar a las propiedades, pero en una llave styles.

var miEnlace = new Element('a',
{
      'href': 'http://sitio.com',
      'styles':
      {
            'border': '1px solid #ff0000',
            'padding': '5px',
      }
});

Seguir leyendo »

Arcadio, fiel visitante del sitio, vino por aquí con un problemita y he hecho un ejemplo mas sobre Mootools Fx.Slide, a él le sirvió, seguramente a alguien mas también le servirá y por eso lo hago mas visible dedicándole una entrada. Lo pueden ver desde aquí.

PDO es una interface de acceso a datos que nos permite, mediante varios drivers, conectarnos a diferentes bases de datos. Olvídate de esto, esto, esto e incluso de esto otro, ahora solo debes preocuparte por PDO. Esta librería escrita en C viene activada por defecto desde PHP 5.1 por lo cual la podrás utilizar en la mayoría de los servidores que actualmente soportan PHP5.

La conexión

Para todos los ejemplos utilizaré MySQL, pero también podria utilizar cualquier otra de las bases de datos soportadas adaptando un poco el código que sigue:

1

$db = new PDO('driver:host=servidor;dbname=bd', user, pass);

Y el ejemplo práctico:

1

$db = new PDO('mysql:host=localhost;dbname=pruebas', 'root', '');

Ahora en $db tenemos una instancia de PDO_MySQL

Primera consulta

Para la primer consulta haremos uso de prepare, execute y fetch.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

require 'conexion.php';
 
//Nos conectamos
$db = new PDO('mysql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);
 
//Preparamos la consulta para dejarla lista para su ejecución
$consulta = $db->prepare('SELECT * FROM items');
 
//Ejecutamos la consulta
$consulta->execute();
 
//Recorremos el set de resultados mostrando la información
while($fila = $consulta->fetch())
{
	echo $fila[0] . '  ' . $fila[1] . '<br />';
}
 
//Cerramos la conexión a la vez que destruimos nuestra instancia de PDO
$db = null;

Seguir leyendo »