<?php
// Error reporting:
error_reporting(E_ALL^E_NOTICE);
// Including the DB connection file:
define("INCLUDE_CHECK",1);
require 'connect.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advanced Event Timeline | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<h1>An Advanced Event Timeline, PHP, MySQL, jQuery & CSS</h1>
<h2>View the <a href="http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/">original tutorial »</a></h2>
<div id="timelineLimiter"> <!-- Hides the overflowing timelineScroll div -->
<div id="timelineScroll"> <!-- Contains the timeline and expands to fit -->
<?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>';
}
?>
<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>
<p class="tutInfo">
This is a tutorialzine demo. View the <a href="http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/">original tutorial</a>, or download the <a href="demo.zip">source files</a>. </p>
</div>
</body>
</html>
基于PHP的jQuery配合数据库完成的时间线功能代码.zip
版权申诉
126 浏览量
2023-07-20
23:29:17
上传
评论
收藏 104KB ZIP 举报
基于PHP的jQuery配合数据库完成的时间线功能代码.zip （12个子文件） 
132676272880133328 likecs.com_132676272885978931 AdvancedEventTimeline 
demo.php 4KB timeline.sql 3KB img 
machu-picchu.jpg 48KB icons 
newspaper.png 779B chart.png 821B camera.png 647B slider_center.png 201B google_garage.jpg 42KB slider.png 481B connect.php 399B styles.css 5KB script.js 2KB资源评论
