177 lines
9.0 KiB
HTML
177 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>jQuery水平时间轴内容切换插件DEMO演示</title>
|
|
|
|
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
|
|
|
|
|
|
<script src="js/modernizr.js"></script> <!-- Modernizr -->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<section class="cd-horizontal-timeline">
|
|
<div class="timeline">
|
|
<div class="events-wrapper">
|
|
<div class="events">
|
|
<ol>
|
|
<li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
|
|
<li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
|
|
<li><a href="#0" data-date="20/04/2014">20 Mar</a></li>
|
|
<li><a href="#0" data-date="20/05/2014">20 May</a></li>
|
|
<li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
|
|
<li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
|
|
<li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
|
|
<li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
|
|
<li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
|
|
<li><a href="#0" data-date="19/01/2015">29 Jan</a></li>
|
|
<li><a href="#0" data-date="03/03/2015">3 Mar</a></li>
|
|
</ol>
|
|
|
|
<span class="filling-line" aria-hidden="true"></span>
|
|
</div> <!-- .events -->
|
|
</div> <!-- .events-wrapper -->
|
|
|
|
<ul class="cd-timeline-navigation">
|
|
<li><a href="#0" class="prev inactive">Prev</a></li>
|
|
<li><a href="#0" class="next">Next</a></li>
|
|
</ul> <!-- .cd-timeline-navigation -->
|
|
</div> <!-- .timeline -->
|
|
|
|
<div class="events-content">
|
|
<ol>
|
|
<li class="selected" data-date="16/01/2014">
|
|
<h2>Horizontal Timeline</h2>
|
|
<em>January 16th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="28/02/2014">
|
|
<h2>Event title here</h2>
|
|
<em>February 28th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="20/04/2014">
|
|
<h2>Event title here</h2>
|
|
<em>March 20th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="20/05/2014">
|
|
<h2>Event title here</h2>
|
|
<em>May 20th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="09/07/2014">
|
|
<h2>Event title here</h2>
|
|
<em>July 9th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="30/08/2014">
|
|
<h2>Event title here</h2>
|
|
<em>August 30th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="15/09/2014">
|
|
<h2>Event title here</h2>
|
|
<em>September 15th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="01/11/2014">
|
|
<h2>Event title here</h2>
|
|
<em>November 1st, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="10/12/2014">
|
|
<h2>Event title here</h2>
|
|
<em>December 10th, 2014</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="19/01/2015">
|
|
<h2>Event title here</h2>
|
|
<em>January 19th, 2015</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
|
|
<li data-date="03/03/2015">
|
|
<h2>Event title here</h2>
|
|
<em>March 3rd, 2015</em>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
|
|
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
|
|
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
|
|
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div> <!-- .events-content -->
|
|
</section>
|
|
|
|
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
|
|
<script src="js/jquery.mobile.custom.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |