jQuery - Producttour.js
Producttour.js là một plugin jQuery để triển khai nhanh chóng và dễ dàng hướng dẫn trợ giúp vào trang web của bạn.
Một ví dụ đơn giản của producttour.js như hình dưới đây -
<!doctype html>
<html lang = "en" class = "no-js">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body background = "tp.png">
<div class = "cd-nugget-info">
<button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
</div>
<ul class = "cd-tour-wrapper">
<li class = "cd-single-step">
<span>Step 1</span>
<div class = "cd-more-info bottom">
<h2>Step Number 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Modi alias animi molestias in, aperiam.</p>
<img src = "img/step-1.png" alt = "step 1">
</div>
</li>
<li class = "cd-single-step">
<span>Step 2</span>
<div class = "cd-more-info top">
<h2>Step Number 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Officia quasi in quisquam.</p>
<img src = "img/step-2.png" alt = "step 2">
</div>
</li>
<li class = "cd-single-step">
<span>Step 3</span>
<div class = "cd-more-info right">
<h2>Step Number 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Optio illo non enim ut necessitatibus perspiciatis,
dignissimos.</p>
<img src = "img/step-3.png" alt = "step 3">
</div>
</li>
</ul>
<script src = "js/jquery-2.1.4.js"></script>
<script src = "js/jquery.mobile.min.js"></script>
<script src = "js/main.js"></script>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bấm vào đây