Por eso me gusta usar PDT

Publicado el Julio 14, 2009 por heymx

Bueno esta solo es una muestra de lo que se puede hacer con PDT.

http://www.megavideo.com/?v=JMA74X8Y

Archivado bajo: PHP | Deja un Comentario »

Dojo.byId y Dojo.query

Publicado el Abril 2, 2009 por heymx

Dojo.byId y Dojo.query son dos funciones que comunmente utilizaremos en cualquier desarrollo web en el que necesitemos manejar nodos de nuestro codigo html.

dojo.byId: Esta funcion, nos permite seleccionar nodos por su id, y manipular sus popiedades u obtener sus valores. Suponiendo que tenemos definido un input text en nuestra pagina y quisieramos obtener el valor escrito en el, nuestro codigo quedaria de la siguiente forma:
<html>
<head>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.3.0/dijit/themes/nihilo/nihilo.css";
@import "http://o.aolcdn.com/dojo/1.3.0/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.0/dojo/dojo.js"  djConfig="parseOnLoad: true"> </script>
<script type="text/javascript">
function ver_saludo() {
var nombre = dojo.byId( "nombre" ).value;
dojo.byId( "mensaje" ).innerHTML = "Hola " + nombre; return true;
}
</script>
</head>
<body class="nihilo">
<div id="mensaje">
</div>
<input type="text" id="nombre" />
<input type="button" value="Ver Saludo" onclick="return ver_saludo();" />
</body>
</html>

dojo.query: es una funcion que nos permite seleccionar un nodo por su Id, clase o tipo de nodo. En el siguiente ejemplo se ha creado una pagina con tres elementos <p> con distintas caracteristicas,dichos elementos pueden ser seleccionados usando dojo.query, dandole como parametro una cadena que servira de query para seleccionar el (los) nodo(s) que corresponda(n) con la consulta.

<html>
<head>
<style type="text/css">
@import "dojo/dijit/themes/nihilo/nihilo.css";
@import "dojo/dojo/1.3.0/dojo/resources/dojo.css";
</style> <style type="text/css">
.elemento{
background-color: #ffcca9;
border: 1px solid #ffeecb;
}
.formato {
background-color: #000000;
color: #ff0000;
font-family: Sanserif, Helvetica, Arial;
}
</style>
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require( "dojo.parser" );
dojo.require( "dijit.form.Button" );
</script>
</head>
<body class="nihilo">
<p> Este es un parrafo sin identificador y sin formato.<br />
Este es un parrafo sin identificador y sin formato.<br /></p>
<p id="parrafo1"> Este es un parrafo con identificador y sin formato.<br />
Este es un parrafo con identificador y sin formato.<br /> </p>
<p class="formato"> Este es un parrafo sin identificador y con formato.<br />
Este es un parrafo sin identificador y con formato.<br /> </p>
<input type="text" id="query" class="elemento" />
<button dojoType="dijit.form.Button" id="Boton">
Ejecutar
<script type="dojo/method" event="onClick">
var query = dojo.byId( "query" ).value;
dojo.query( query ).forEach(
function( node ) {
node.style.color = "Blue";
} );
</script>
</button>
</body>
</html>

Como ejemplos podemos introducir las siguientes cadenas:

p ( para seleccionar todos los nodos <p> )

p.formato (para seleccionar el nodo <p class=”formato”>)

Archivado bajo: Uncategorized | Etiquetado: , , | 1 comentario