hacksCMS: abril 2015

miércoles, 29 de abril de 2015

Ambito de una variable en javascript

//Ambito de una variable en javascript

var mundo = "Mundo!";

function holaMundo()
{
var hola = "¡Hola ";

function extra()
{
var extra = "Todavía hay más";
console.log(hola + mundo + extra);
}
extra();
}

holaMundo();

console.log("Mundo afuera de holaMundo(): ", mundo);
//console.log("Hola afuera de holaMundo(): ", hola);

lunes, 27 de abril de 2015

Ejemplos con los métodos bind() y unbind() de jQuery

A continuación puede verse el código de una página completa que pone en práctica las explicaciones ofrecidas en el artículo. El ejemplo se puede ver en marcha en una página aparte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Eventos bind</title>
   <script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){

   $("p").bind("click mouseenter mouseleave", function(e){
      if ($(this).css("color")!="rgb(250, 100, 0)")
         $(this).css("color", "rgb(250, 100, 0)");
      else
         $(this).css("color", "rgb(150, 0, 255)");
   })

   function clicAlerta(){
      alert("Has hecho clic");
   }

   $(".miclase").bind("click", clicAlerta);

   $("#quitarevento").bind("click", function(){
      $(".miclase").unbind("click", clicAlerta);
   })
})
</script>
</head>
<body>

<p class="miclase">Primer párrafo</p>
<p>Otro párrafo</p>

<input type=button value="Quitar el alert del clic del primer párrafo" id="quitarevento">
</body>
</html>

Formas de jquery ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.Ajax</title>
</head>
<body>
<div id="container">
<div id="content">
<p>Tje jquwry ajax</p>
<ul>
<li><button id="remote-html">file remoto</button></li>
<li><button id="remote-script">script remoto</button></li>
<li><button id="remote-data">send data</button></li>
<li><button id="remote-error">error handle</button></li>

</ul>
<div id="result"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){

$('#remote-html').click(function(){
$.ajax({
url:'ajaxme.html',
success: function(data){
$('#result').html(data).append('<p>Resquest valido</p>');
},
error:function(){
$('#result').text('<p>Resquest filed</p>');
}
});
});
});

$(document).ready(function(){

$('#remote-script').click(function(){
$.ajax({
url:'sample.js',
dataType: "script"
});
});
});

$(document).ready(function(){

$('#remote-data').click(function(){
$.ajax({
type:"POST",
url:'server.php',
data:{first:"Cesar", last:"Morones"}}).done(function(msg){
alert('Dato salvado'+ msg)
});
});
});

$(document).ready(function(){

$('#remote-error').click(function(){
$.ajax({
type:"GET",
url:'bogus.html',
statusCode:{
404: function(){
$('#result').text('<p>Archivo no encontrado !!!</p>');
}
}
});
});
});
</script>

</body>
</html>

martes, 21 de abril de 2015

propiedad lenght y metodo size

<html>
<head>
<title>Prueba Size</title>
<script type = "text/javascript" src = "jquery.js"> </script>
<script type = "text/javascript">
$(document).ready(function(){
console.log('Número de links en el documento: (' + $('a').size() +').');
});
</script>
</head>
<body>
<a href="http://www.google.com" title="Google">Google1</a><br>
<a href="http://www.google.com" title="Google">Google2</a><br>
<a href="http://www.google.com" title="Google">Google3</a><br>
</body>
</html>

<html>
<head>
<title>Prueba Length</title>
<script type = "text/javascript" src = "jquery.js"> </script>
<script type = "text/javascript">
$(document).ready(function(){
console.log('Número de links en el documento: (' + $('a').length +').');
});
</script>
</head>
<body>
<a href="http://www.google.com" title="Google">Google1</a><br>
<a href="http://www.google.com" title="Google">Google2</a><br>
<a href="http://www.google.com" title="Google">Google3</a><br>
<a href="http://www.google.com" title="Google">Google4</a><br>
</body>
</html>

cambiar estilo con jquery

<html>
<head>
<title>Funcion jQuery</title>
<script type = "text/javascript" src = "jquery.js"> </script>
<script type = "text/javascript">
$(document).ready(function()
{
$("p").css("color", "blue");
$("#miId").css("color", "red");
$(".miClase").css("color", "green");
});
</script>
</head>
<body>
<p>Esto es un parrafo</p>
<div id="miId">Esto es un bloque div con identificador</div>
<div class="miClase">Esto es un bloque div con clase</div>
</body>
</html>

viernes, 17 de abril de 2015

Propiedades de color

http://www.w3.org/wiki/CSS3/Color/Extended_color_keywords

numeral

color:#000000

Por su color en ingles

green, yellow, blue etc

RGBA red, green, blue y alfa transparencia

div{
    width: 900px;
    height: 600px;
    background: rgba(255,255.255,0); // o trasparente y 1 solido
    border: 5px solid red;
}

background: hsl(360,100%,50%); /* trasparente y 1 solido*/

puede usar alfa

background: hsla(360,100%,20%,.5); /* luz*/

CMYK

aun no se puede aplicar a todos los elemntos

Selectores Estructurales

:root
:empty
p:empty
:first-child
:last-child

li:first-child //primer elemnto de esta lista
li:last-child //ultimo elemento de esta lista

h1:first-of-type{

}//primer elemento de un elemento superior

h1:last-of-type{
}//ultimo elemento de un elemento superior

:only-child

:only-of-type

Descendientes por id

ul li{
width:200px;
height:200px;
text-aling:center;
line-height:200px;
font-size:40px;
font-weight:bold;
background:grey;
margin-right:20px;
float:left;
margin-bottom:20px;
list-style:none;
color:white;

}

//busca la pocision 8 y le cambia el color

li:nth-child(8){
backgorund:blue
}

li:nth-child(1n){ //saltos para afectar una regla
backgorund:blue
}

li:nth-child(2n){ //cada dos elementos
backgorund:blue
}

li:nth-child(3n){ //cada tres elementos
backgorund:blue
}
tima
Tambien pueden ser negativas

li:nth-child(-1n+3){ //cada tres elementos hacia atras
backgorund:blue
}

Cuenta elemtos hacia aarriba

li:nth-last-child(){ //empezando del final 3 elemntos
backgorund:blue
}

li:nth-last-child(1n){ //empezando del final 3 elemntos
backgorund:blue
}

Seleccionar la penultima fila y la primera

li:nth-child(-1n+7){ //la fila ultima
backgorund:blue
}

li:nth-last-child(1n+7){ //la fila empezando
backgorund:blue
}

forma mas simple con comas

li:nth-last-child(1n+7),li:nth-last-child(1n+7){ //empezando del final 3 elemntos
backgorund:blue
}

viernes, 10 de abril de 2015

Estilos a atributos

a[href]{
font-size=25px;
}

a[href="home.html"]{
color: red;
}

la tilde nos trae si tiene compras en cualquier lugar

a[title~=compras]{
text-decoration:none;
margin-left:60px;
}

a[title="compras"]{
text-decoration:none;
margin-left:60px;
}
Busca compras en cualquier parte del atributo

a[href^="compras"]{
text-decoration:none;
margin-left:60px;
}

Buscar en extensiones pdf con el signo "$"

a[href$=".pdf"]:before{
content:"PDF";
background:red;
color:white;
padding:2px;
font-size:9px;
border:1px solid black;
margin-right:6px;
}

<div>

</div>

Un parrafo al mismo nivel si que sea necesario ser adyacente

<div> ~ p {

color:red;
font-weight:bold;

}

<div>

</div>
<h1>Este s un titulo</h1>
<p>Este apparafo sigue la regla</p>

Representadado por ~

Estilos adyacentes mismo nivel de jeraquia

<div> + h1 {

color:red;
font-weight:bold;

}

<div>

<h1>Este apparafo sigue la regla</h1>

</div>

Es através del sigono + y estan al mismo novel

estilo a descendientes directos

<div> > p {

color:red;
font-weight:bold;

}

<div>

<p>Este apparafo sigue la regla</p>

</div>

Esto aplica para todos los decendientes de div que sean parrafos.

Vendor prefixes

Mozila Firefoz: -moz-

Google Crhome -webkit-

Apple Zafari: -webkit-

Opera -o-

Microsoft -ms-, -mso-

jueves, 9 de abril de 2015

funciona anonima and self invoking

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sumatorias</title>
</head>
<script type="text/javascript">
    (function(){
        alert('hola Mundo');
    })();

</script>
<body>

<input type="button" value="Clic" onclick="alert('la suma es =' + alertit(10,20));">

</body>
</html>

Sumar lista de parametros

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sumatorias</title>
</head>
<script type="text/javascript">
    function alertit(){
        var x = 0;
        for ( var i=0; i < arguments.length; i++){
            x += arguments[i];
        }
        alert('Suma'+ x);
    }
</script>
<body>

<input type="button" value="Clic" onclick="alertit(10,20,30,40,50);">

</body>
</html>

miércoles, 8 de abril de 2015

Filtros de jquery

El uso de los filtros en jquery es una manera de buscar elementos de una formas más especifica.

Los filtros de jquery lo podemos en contrar en 6 categorias:

Básicos: Proveee un filtro báscio
Contenido: Basado en el contenido del componente
Visibilidad: Basandose en sus atributos de visibilidad
Atributo: Elementos basado en el texto de sus atributos
Child: Basado en la relación con sus hijos
Form: elemntos que se enecuentran en un formulario(text, password, checkbox)

Selectores Basicos en Jquery

Para el uso de selectores en jquery, la sintaxis es similar a la de css y funciona en muchos aspectos del mismo modo aesta.
Para utilizarlos empleamos el símbolo "$"

Tagname: Identificador d eun tipo de elemneto

Identificador: frase que identifica el elemento, utilizando el simbolo "#"

ClassName: Calse css asociada a un componente, utilizando el simbolo "."

Combinaciones: Se puede realizar combinaciones de criterios

taq#id.className

Todos los componentes, utilizando "*"

Elemento que se encuentre despues de otro elemento, usuando "+"

Todos los elementos que se encuentran después de un elemento, usuando el simbolo "~"

Caracteristicas de jquery

Funcionalidades Basicas
Selecciones
Eventos
Manipulacion CSS
Efectos y Animaciones
Ajax

martes, 7 de abril de 2015

Uso de join cn CDbCriteria y relaciones

$criteria = new CDbCriteria;
$criteria->with=array('personas');
//$criteria->join="right JOIN datos_personales as dp ON(dp.id=t.id_dp)";
$criteria->condition= "t.id_area=:id_area and t.status=:status";
$criteria->params=array(':id_area'=>$id_area,':status'=>38);
$criteria->order = "personas.nombre";

$resultado = Directorio::model()->findAll($criteria);

hacksCMS