Google es tu amigo...
:http://html5facil.com/sin-categoria/19-libros-para-empezar-a-aprender-html5
:http://html5facil.com/sin-categoria/19-libros-para-empezar-a-aprender-html5
- Bienvenido a Test Foro de elhacker.net SMF 2.1.
Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.
#1362
PHP / Re: Panel Vertical/Horizontal desplegable con jQuery
20 Febrero 2012, 23:18 PM
Agregado el zip con todos los archivos y el demo.
#1363
PHP / Panel Vertical/Horizontal desplegable con jQuery
20 Febrero 2012, 23:07 PMPanel Vertical/Horizontal desplegable con jQuery
DEMO: http://shellroot.vacau.com/
DOWNLOAD: http://www.mediafire.com/?jzrvuely99o139v
Más información: Panel Vertical/Horizontal desplegable con jQuery
 | Por cosas raras de la vida, necesitaba construir dos panales: uno horizontal y otro vertical, para la construcción de una aplicación, me costo un poco de trabajo y tiempo, así que lo compartiré con ustedes. Aprenderemos a crear nuestro propio panel lateral desplegable basado en jQuery. Lo haremos partiendo de cero y explicándolo como siempre paso a paso, de forma que todos podamos comprender cómo funciona. Todo ello inspirándonos en el panel lateral de Google Reader. |
ESTRUCTURA HTML
html5
Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jQuery.js"></script>
<script src="js/toggler.js"></script>
<title>PoC</title>
</head>
<body>
<section id="wrapper">
<header>
#header
</header>
<section id="slideLeft">
<div id="content">
#slideLeft
</div>
</section>
<section id="contenido">
<h1>#contenido</h1>
<div id="togglerSlideLeft"></div>
<div id="render">
#contenido
</div>
</section>
<section id="slideBottom">
<div id="togglerSlideBottom"></div>
<div id="content">
#slideBottom
</div>
</section>
<footer>
<span>
#footer
</span>
</footer>
</section>
</body>
</html>APLICANDO ESTILOS
css/style.css
Código (css) [Seleccionar]
*{ padding:0; margin:0; }
html,body{ height:100%; overflow:hidden; }
body{ font-family:Helvetica, Arial, sans-serif; font-size:12px !Important; }
header{ height:40px; padding:10px; border-bottom:1px solid #c9d7f1; }
#slideLeft{ width:260px; height:100%; float:left; }
#slideLeft #content{ padding:10px; }
#contenido{ height:100%; margin-left:260px; }
#contenido h1{ height:40px; padding:0 10px; background:#c2cff1; font-size:18px; font-weight:bold; }
#contenido #togglerSlideLeft{ width:16px; border-left:1px solid #c2cff1; background:#EBEFF9 url("../img/togglerLeft.gif") no-repeat left center; float:left; }
#contenido #togglerSlideLeft:hover{ background: #c2cff1 url("../img/togglerLeft.gif") no-repeat -25px center; cursor:pointer; }
#contenido #togglerSlideLeft.off{ background: #EBEFF9 url("../img/togglerRight.gif") no-repeat left center; margin-left:0; }
#contenido #togglerSlideLeft.off:hover{ background: #c2cff1 url("../img/togglerRight.gif") no-repeat -25px center; margin-left:0; }
#slideBottom{ width:100%; }
#slideBottom #togglerSlideBottom{ width:100%; height:16px; border-top:1px solid #8c9dc8; background:#EBEFF9 url("../img/togglerDown.gif") no-repeat top center; }
#slideBottom #togglerSlideBottom:hover{ background: #c2cff1 url("../img/togglerDown.gif") no-repeat center -25px; cursor:pointer; }
#slideBottom #togglerSlideBottom.offBottom{ background: #EBEFF9 url("../img/togglerUp.gif") no-repeat top center; margin-left:0; }
#slideBottom #togglerSlideBottom.offBottom:hover{ background: #c2cff1 url("../img/togglerUp.gif") no-repeat center -25px; margin-left:0; }
#slideBottom #content{ padding:10px; }
footer{ width:100%; height:30px; text-align:right; line-height:30px; border-top:1px solid #8c9dc8; background:#C2CFF1; position:fixed; bottom:0; }
footer span{ padding-right:10px; }AÑADIENDO INTERACCIÓN CON JQUERY
js/toggler.js
Código (javascript) [Seleccionar]
// Iniciar cuando se termine de cargar la pagina.
$(document).ready(function(){
// Variables para saber el estado de los slide's
var estadoSlideLeft = true;
var estadoSlideBottom = true;
// Variables con los elementos de la pagina.
var contenido = $("#contenido");
var slideLeft = $("#slideLeft");
var slideBottom = $("#slideBottom");
var togglerSlideLeft = $("#togglerSlideLeft");
var togglerSlideBottom = $("#togglerSlideBottom");
var render = $("#render");
// Variables con la medida reservada del slideBottom
var slideBottomHeight = 150;
var slideBottomWidth = 0;
// Variables para las medidas
var windowHeight;
var togglerHeight;
var renderHeight;
// Calcular y aplicar medidas actuales al iniciar.
calcularMedidas();
aplicarMedidas();
// Calcular y aplicar medidas actuales al cambiar el tamaño.
$(window).resize(function(){
calcularMedidas();
aplicarMedidas();
});
// Agregar evento click del toggler la función.
togglerSlideLeft.click( displaySlideLeft );
togglerSlideBottom.click( displaySlideBottom );
// Función para calculas las medidas
function calcularMedidas(){
windowHeight = document.documentElement.clientHeight;
togglerHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
renderHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
slideBottomHeight = (slideBottomHeight - 21);
}
// Función para aplicar las medidas
function aplicarMedidas(){
slideBottom.css( "height", slideBottomHeight + 'px' );
render.css( "height", renderHeight + "px" );
togglerSlideLeft.css( "height", togglerHeight +"px" );
}
// Función para mostrar/ocultar el slideLeft
function displaySlideLeft(){
if( estadoSlideLeft ){
slideLeft.hide();
contenido.css("margin-left", "0");
togglerSlideLeft.addClass("off");
estadoSlideLeft = false;
}else{
slideLeft.show();
contenido.css( "margin-left", slideLeft.width()+'px' );
togglerSlideLeft.removeClass("off");
estadoSlideLeft = true;
}
}
// Función para mostrar/ocultar el slideBottom
function displaySlideBottom(){
if( estadoSlideBottom ){
slideBottomWidth = contenido.height() + parseInt(slideBottomHeight) - 6;
slideLeft.css("height", slideBottomWidth + 'px' );
togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
contenido.css("height", slideBottomWidth + 'px' );
render.css( "height", slideBottomWidth + "px" );
togglerSlideBottom.addClass("offBottom");
estadoSlideBottom = false;
}else{
slideBottomWidth = contenido.height() - parseInt(slideBottomHeight) + 6;
slideLeft.css("height", slideBottomWidth + 'px' );
togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
contenido.css("height", slideBottomWidth + 'px' );
togglerSlideBottom.removeClass("offBottom");
estadoSlideBottom = true;
}
}
});Sugerencias, aportes, fallas, comentarios, cualquier cosa es bienvenida.
#1364
Desarrollo Web / Re: Documentación y/o tutoriales para HTML5
20 Febrero 2012, 20:01 PM #1365
PHP / Re: Este formulario de registro estaria bien ?
20 Febrero 2012, 02:14 AM
1. Miedo de qué?
2. Los IF's son básicos, si no los sabes usar, aprende!
2. Los IF's son básicos, si no los sabes usar, aprende!
#1366
PHP / Re: Este formulario de registro estaria bien ?
20 Febrero 2012, 01:08 AM
Volvemos a lo mismo, no somos adivinos, tienes que decirnos que es lo que pasa, errores, dudas, etc?
#1367
PHP / Re: Pregunta existencial con INNER JOIN
19 Febrero 2012, 23:12 PM #1368
Desarrollo Web / Re: ¿Cómo se hacen los cuadros de búsqueda bonitos? HTML
19 Febrero 2012, 23:04 PM
Pues ahí esta, eso es HTML5
Código (html4strict) [Seleccionar]
<form action="" method="post">
<label for="username">Nombre de Usuario: </label>
<input type="text"
name="username" id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
required>
<button type="submit">Enviar </button>
</form>
#1369
Bases de Datos / Re: Incrementar datos de una columna
16 Febrero 2012, 04:10 AM
Como lo dijeron, podrías hacerlo automaticamente mediante el uso de AUTO_INCREMENT dentro del campo, ejemplo:
O con el uso de la función COUNT() de MySQL, así:
Código (sql,2) [Seleccionar]
CREATE TABLE PoC(
id int(4) auto_increment primary key
nombre varchar(30) not null,
apellido varchar(30) not null
);O con el uso de la función COUNT() de MySQL, así:
Código (sql) [Seleccionar]
SELECT count(id) FROM PoC;
#1370
Desarrollo Web / Re: Ayuda !
14 Febrero 2012, 23:35 PM
Pues si lees el footer, dice que clase de cms es...
CitarPowered by phpBB © 2000, 2002, 2005, 2007 phpBB xxxx From xxx.
Traducción al español por xxxxx para phpbb-es.com