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
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
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