Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm

Bài viết được sự cho phép của tác giả Phạm Công Sơn

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

1. data-tour-header: Tiêu đề của box hướng dẫn khi xuất hiện
2. data-tour: Nội dung của box hướng dẫn khi xuất hiện
3. data-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

Bài viết gốc được đăng tải tại sonpc20.com

Có thể bạn quan tâm:

• Tại sao code của tôi thường ngắn gọn như vậy
• Custom login page sử dụng Bootstrap và Thymeleaf trong Spring Security
• Bootstrap là gì? Tặng 20 Templates Bootstrap miễn phí

Xem thêm Việc làm IT hấp dẫn trên TopDev