Primero quiero tomarme el tiempo para agradecerles a ustedes, lectores de Tutorialzine, por todo su apoyo el año pasado y desearles un feliz nuevo 2010! Muchos tutoriales interesantes están en camino y también hay algunos cambios agradables planeados que estoy seguro de que te gustarán.
¡Ahora comencemos el año con un nuevo tut!
Todo comenzó la semana pasada, cuando recibí esta carta de uno de nuestros lectores:
Siempre estoy buscando buenas ideas para tutoriales, ¡así que Vinnie envió su correo electrónico justo a tiempo!
Hoy estamos creando una línea de tiempo avanzada de eventos con la ayuda de PHP, MySQL, CSS y jQuery, que mostrará una bonita línea de tiempo con eventos en los que se puede hacer clic. Agregar nuevos va a ser tan fácil como insertar una fila en la base de datos.
Paso 1 - XHTML
Primero, asegúrese de tomar los archivos de ejemplo del botón de arriba, para que pueda seguir fácilmente lo que está pasando.
El primer paso de este tutorial es crear la estructura XHTML, como se ve en demo.php .
demo.php
<div id="timelineLimiter"> <!-- Hides the overflowing timelineScroll div --> <div id="timelineScroll"> <!-- Contains the timeline and expands to fit --> <!-- PHP code that generates the event list --> <div class="clear"></div> </div> <div id="scroll"> <!-- The year time line --> <div id="centered"> <!-- Sized by jQuery to fit all the years --> <div id="highlight"></div> <!-- The light blue highlight shown behind the years --> <?php echo $scrollPoints ?> <!-- This PHP variable holds the years that have events --> <div class="clear"></div> </div> </div> <div id="slider"> <!-- The slider container --> <div id="bar"> <!-- The bar that can be dragged --> <div id="barLeft"></div> <!-- Left arrow of the bar --> <div id="barRight"></div> <!-- Right arrow, both are styled with CSS --> </div> </div> </div>
He omitido parte del código PHP que genera los eventos para que podamos ver mejor el marcado (volveremos a él en el siguiente paso).
La idea principal es que tenemos dos divs - timelineLimiter y desplazamiento de la línea de tiempo colocado en su interior. El primero toma el ancho de la pantalla, y el segundo se expande para adaptarse a todas las secciones de eventos que se insertan en su interior. De esta manera, solo una parte del div interno más grande es visible y el resto se puede desplazar hacia la izquierda y hacia la derecha mediante un control deslizante de jQuery que crearemos en el paso 4.
Ahora echemos un vistazo al back-end de PHP.
Paso 2 - PHP
PHP selecciona todos los eventos en la base de datos y agrupa los eventos por año en las $dates formación. Más tarde lo recorre y genera todos los eventos como elementos dentro de listas desordenadas que pertenecen a cada uno de los años del evento.
demo.php
// We first select all the events from the database ordered by date:
$dates = array();
$res = mysql_query("SELECT * FROM timeline ORDER BY date_event ASC");
while($row=mysql_fetch_assoc($res))
{
// Store the events in an array, grouped by years:
$dates[date('Y',strtotime($row['date_event']))][] = $row;
}
$colors = array('green','blue','chreme');
$scrollPoints = '';
$i=0;
foreach($dates as $year=>$array)
{
// Loop through the years:
echo '
<div class="event">
<div class="eventHeading '.$colors[$i++%3].'">'.$year.'</div>
<ul class="eventList">';
foreach($array as $event)
{
// Loop through the events in the current year:
echo '<li class="'.$event['type'].'">
<span class="icon" title="'.ucfirst($event['type']).'"></span>
'.htmlspecialchars($event['title']).'
<div class="content">
<div class="body">'.($event['type']=='image'?'<div style="text-align:center"><img src="'.$event['body'].'" alt="Image" /></div>':nl2br($event['body'])).'</div>
<div class="title">'.htmlspecialchars($event['title']).'</div>
<div class="date">'.date("F j, Y",strtotime($event['date_event'])).'</div>
</div>
</li>';
}
echo '</ul></div>';
// Generate a list of years for the time line scroll bar:
$scrollPoints.='<div class="scrollPoints">'.$year.'</div>';
} Así se genera el marcado completo de la página. Ahora estamos listos para aplicar algunos estilos.
Paso 3 - CSS
Después de haber insertado la hoja de estilo CSS en la sección principal del documento, podemos comenzar a establecer las reglas. Aquí solo se incluyen los más interesantes. Puedes ver el resto en styles.css .
estilos.css
.event{
/* Contains the section title and list with events */
float:left;
padding:4px;
text-align:left;
width:300px;
margin:0 5px 50px;
}
.eventList li{
/* The individual events */
background:#F4F4F4;
border:1px solid #EEEEEE;
list-style:none;
margin:5px;
padding:4px 7px;
/* CSS3 rounded corners */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.eventList li:hover{
/* The hover state: */
cursor:pointer;
background:#E6F8FF;
border:1px solid #D4E6EE;
color:#548DA5;
}
li span{
/* The event icon */
display:block;
float:left;
height:16px;
margin-right:5px;
width:16px;
}
/* Individual background images for each type of event: */
li.news span.icon { background:url(img/icons/newspaper.png) no-repeat; }
li.image span.icon { background:url(img/icons/camera.png) no-repeat; }
li.milestone span.icon { background:url(img/icons/chart.png) no-repeat; }
#timelineLimiter{
/* Hides the overflowing timeline */
width:100%;
overflow:hidden;
padding-top:10px;
margin:40px 0;
}
#scroll{
/* The small timeline below the main one. Hidden here and shown by jQuery if JS is enabled: */
display:none;
height:30px;
background:#F5F5F5;
border:1px solid #EEEEEE;
color:#999999;
}
.scrollPoints{
/* The individual years */
float:left;
font-size:1.4em;
padding:4px 10px;
text-align:center;
width:100px;
position:relative;
z-index:10;
} Aquí, la clase .event diseña las secciones de años de eventos (estos son los divs que agrupan eventos que han ocurrido en el mismo año).
Cerca de la mitad del código, puede ver que hemos usado algunas esquinas redondeadas de CSS3 que funcionan en la mayoría de los navegadores (no compatibles con IE y Opera).
También definimos imágenes de fondo individuales para cada tipo de evento:imagen, noticia o hito.
Paso 4 - jQuery
El último paso es insertar una capa de interactividad en el navegador. Haremos esto con la ayuda de la biblioteca jQuery JavaScript, incluida en la sección principal de demo.php .
He dividido el código a continuación en dos partes para que sean más comprensibles.
script.js - Parte 1
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* The number of event sections / years with events */
var tot=$('.event').length;
$('.eventList li').click(function(e){
showWindow('<div>'+$(this).find('div.content').html()+'</div>');
});
/* Each event section is 320 px wide */
var timelineWidth = 320*tot;
var screenWidth = $(document).width();
$('#timelineScroll').width(timelineWidth);
/* If the timeline is wider than the screen show the slider: */
if(timelineWidth > screenWidth)
{
$('#scroll,#slider').show();
$('#centered,#slider').width(120*tot);
/* Making the scrollbar draggable: */
$('#bar').width((120/320)*screenWidth).draggable({
containment: 'parent',
drag: function(e, ui) {
if(!this.elem)
{
/* This section is executed only the first time the function is run for performance */
this.elem = $('#timelineScroll');
/* The difference between the slider's width and its container: */
this.maxSlide = ui.helper.parent().width()-ui.helper.width();
/* The difference between the timeline's width and its container */
this.cWidth = this.elem.width()-this.elem.parent().width();
this.highlight = $('#highlight');
}
/* Translating each movement of the slider to the timeline: */
this.elem.css({marginLeft:'-'+((ui.position.left/this.maxSlide)*this.cWidth)+'px'});
/* Moving the highlight: */
this.highlight.css('left',ui.position.left)
}
});
$('#highlight').width((120/320)*screenWidth-3);
}
}); Como habrás notado en la sección de PHP del tut (si no, échale un vistazo, alrededor de la línea 33) que con cada evento incluimos un conjunto de elementos div que contienen información adicional (título, texto y fecha). Esos están ocultos con display:none en nuestro archivo CSS, y jQuery accede a ellos para que la ventana emergente se pueda llenar con datos sin necesidad de enviar solicitudes AJAX (sin mencionar que este contenido es visible para los motores de búsqueda y es excelente para SEO). Así que es una solución en la que todos ganan.
Los datos en sí se obtienen en la segunda parte del siguiente script:
script.js - Parte 2
function showWindow(data)
{
/* Each event contains a set of hidden divs that hold
additional information about the event: */
var title = $('.title',data).text();
var date = $('.date',data).text();
var body = $('.body',data).html();
$('<div id="overlay">').css({
width:$(document).width(),
height:$(document).height(),
opacity:0.6
}).appendTo('body').click(function(){
$(this).remove();
$('#windowBox').remove();
});
$('body').append('<div id="windowBox"><div id="titleDiv">'+title+'</div>'+body+'<div id="date">'+date+'</div></div>');
$('#windowBox').css({
width:500,
height:350,
left: ($(window).width() - 500)/2,
top: ($(window).height() - 350)/2
});
} En esta función, básicamente tratamos el parámetro pasado de la Parte 1 anterior, donde se llama a la función, como HTML normal y usamos los selectores estándar de jQuery, completando así las variables de título, fecha y cuerpo.
Paso 5:MySQL
Este último paso solo es necesario si planea ejecutar la demostración en su propio servidor o como una adición a su sitio actual.
Para que todo funcione, debe volver a crear la tabla MySQL de la línea de tiempo desde timeline.sql , proporcionado en el archivo de descarga. También deberá completar las credenciales de su base de datos en connect.php .
¡Con esto, nuestra cronología de eventos está completa!
Conclusión
Hoy creamos una línea de tiempo que puede modificar para mostrar los eventos importantes que marcan sus días. Es fácilmente modificable y usted es libre de usarlo en sus proyectos o los de sus clientes.
Asegúrate de dejar un comentario si te gustó :)