Trước khi đi vào hướng dẫn cài đặt và sử dụng Bootstrap Tourist các bạn có thể thử tiện ích này ngay sau đây
Để có thể tải Bootstrap Tourist các bạn có thể click vào đây hoặc truy cập vào Github Bootstrap Tourist. Tại đường link tải thư viện của tôi, tôi đã thêm vào một đối tượng MyTour
để tối giản việc sử dụng Bootstrap Tourist hơn.
Hướng dẫn cài đặt
<link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.min.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-tour.min.js"></script> <!-- Phần mở rộng tôi viết thêm --> <script src="bootstrap-tourist.extension.com.min.js"></script>
Ngoài ra phần mở rộng tôi viết có sử dụng linq.js mà tôi đã có bài viết Thư viện Linq.js trong javascript
Hướng dẫn sử dụng
Tại các element
trên website, những chỗ mà các bạn muốn làm các hướng dẫn cho khách hàng (các bước trong tour) thì các element
cần phải có các attribute
sau đây
data-tour-header
: Tiêu đề của box hướng dẫn khi xuất hiệndata-tour
: Nội dung của box hướng dẫn khi xuất hiệndata-tour-position
: Vị trí hiển thị. Có 4 giá trị:left
,right
,bottom
,top
Ví dụ như hướng dẫn hiển thị ở tiêu đề bài viết này
<h2 class="post-title text-danger tour-tourist-0-element" data-tour-header="Đây là tiêu đề bài viết" data-tour="Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm" data-tour-id="2244" data-tour-position="bottom">Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm</h2>
Tiếp đến các bạn gọi hàm trên javascript để thực thi
var tour = new MyTour({ area: $("body") }); tour.init(); $("[data-btn=StartTour]").click(function () { tour.start(); });
Ở đây tham số khi khởi tạo MyTour các bạn có thể tham khảo chi tiết Document tại https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist.
Đây là một số hình ảnh tôi sử dụng bootstrap-tourist trên phần mềm của tôi
Bấm vào nút dấu ? để bắt đầu tour
Thực hiện từng bước hướng dẫn
Rất dễ cho khách hàng đúng không các bạn
Chúc các bạn áp dụng tiện ích này vào sản phẩm của mình thành công
Sơn 20