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

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

Nếu bạn thấy nội dung chia sẻ này có ích với bạn hãy Donate để tạo động lực cho tôi viết các bài viết tiếp theo nhé. Cảm ơn nhiều !!!!

Từ khóa: Jquery Plugins

Bài viết cùng chuyên mục

Hướng dẫn gửi email bằng code C#. Cấu hình tài khoản gmail để gửi email từ phần mềm.

Sử dụng thư viện SmtpClient để gửi email. Cấu hình tài khoản gmail ở trạng thái kém bảo mật để có thể gửi email từ phần mềm.

02/12/2020 Xem chi tiết
Các hướng đi cho lập trình viên khi lựa chọn ngôn ngữ lập trình.

Mình thì lựa chọn phát triển web nên đã chọn chuyên sâu về HTML, Css, Javascript, ASP.NET, SQL

23/11/2020 Xem chi tiết
Mật khẩu kém bảo mật được sử dụng phổ biến trong năm 2020

Bất ngờ với mật khẩu 123456 lại đứng top đầu danh sách. Cứ bảo sao tài khoản hay bị hack. Đúng là sai lầm và chủ quan.

20/11/2020 Xem chi tiết
Xây dựng khung phần mềm trên nền Web giao diện Desktop Window

Đã xây dựng gần như xong khung, chỉ việc viết module business để phát triển phần mềm trên nền tảng Web giao diện Window.

30/10/2020 Xem chi tiết
Tôi đã thiết kế ra design pattern Trứng có trước hay Gà có trước như thế nào

Về ý tưởng này tôi đã thực hiện khoảng 5,6 năm trước do tham gia vào dự án mà xây dựng các khối độc lập nhưng lại có tính năng tương tự nhau

19/10/2020 Xem chi tiết
Chia sẻ một số hiệu ứng Hover hữu ích khi làm Frontend viết bằng css

Gồm các hiệu ứng Hover ZoomIn, Hover Fade, Hover Blur, Hover Zoomout, Hover Mask, Hover Over Text, Hover Fall, Hover Blurout

16/10/2020 Xem chi tiết

Bài viết khác

Hướng dẫn sử dụng Jquery plugin Lazy Load everything

Đây là plugin tôi chỉnh sửa lại từ thư viện jquery.lazyload.js để từ đó có thể lazy với mọi phần tử và không chỉ riêng cho sử dụng lazy image.

10/09/2020 Xem chi tiết
Thư viện Linq.js trong javascript

Thư viện này cung cấp đầy đủ các phương thức như .NET 4.0 và mở rộng thêm nhiều phương thức khác

10/09/2020 Xem chi tiết
Hướng dẫn sử dụng Jquery Plugin Hotkeys - Tạo phím nóng trên trình duyệt web

Thư viện của tác giả Tzury Bar Yochay được viết từ năm 2010

06/09/2020 Xem chi tiết
Hướng dẫn sử dụng Timer trong Javascript

Định nghĩa đối tượng Timer tương tự như trong WinForm C# để thực hiện task vụ theo chu kỳ bằng Javascript

01/09/2020 Xem chi tiết
Mã hóa dữ liệu bằng thuật toán TripleDES

Thuật toán mã hóa dữ liệu đối xứng. Sử dụng một mật khẩu để thực hiện mã hóa và giải mã

31/08/2020 Xem chi tiết
Hướng dẫn sử dụng thuộc tính filter css làm hiệu ứng đồ họa

Thuộc tính áp dụng để làm các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho các element

30/08/2020 Xem chi tiết
{"nalias":"huong-dan-su-dung-bootstrap-tourist-de-lam-tro-giup-cho-phan-mem","lang":"2","cattype":"0","catId":"3","UrlEngine":"UrlNewsEngine","site":"1"}