Hướng dẫn intro js custom css

Bạn muốn hướng dẫn người dùng hoặc giới thiệu Website của bạn một cách trực quan nhất nhưng chưa biết làm thế nào? Intro.js sẽ giúp bạn tạo các bước hướng dẫn một cách dễ dàng, linh hoạt và sinh động.

Hướng dẫn intro js custom css

Khi người dùng mới truy cập vào trang web hoặc sản phẩm của bạn, bạn nên chứng minh các tính năng của sản phẩm bằng cách sử dụng hướng dẫn từng bước. Ngay cả khi bạn phát triển và thêm một tính năng mới cho sản phẩm của mình, bạn có thể đại diện cho người dùng của bạn bằng cách sử dụng giải pháp thân thiện. Intro.js được phát triển để cho phép các nhà phát triển web và thiết bị di động tạo ra một giới thiệu từng bước một cách dễ dàng.

Intro.js là mã nguồn mở và tự do sử dụng. Ưu điểm của nó là không phụ thuộc, nhanh và nhỏ chỉ 10KB với Javascript và 2,5KB với CSS, thân thiện với người dùng bằng bàn phím hoặc chuột. Dễ dàng thay đổi chủ đề cho trang Web của bạn. Tương thích với nhiều loại trình duyệt.

Cách sử dụng

Intro.js có thể được thêm vào trang web của bạn theo ba bước đơn giản:

1) Bao gồm intro.jsintrojs.css (hoặc phiên bản đã được minified rút gọn) trong trang của bạn. Sử dụng introjs-rtl.min.css cho hỗ trợ ngôn ngữ từ phải sang trái.

Tệp lưu trữ trên CDN hiện có tại jsDelivr (nhấp vào Hiển thị thêm) & cdnjs .

2) Thêm data-introdata-step các phần tử HTML của bạn. Để thêm các gợi ý bạn nên sử dụng data-hint thuộc tính.

Ví dụ:

< a  href = ' http://google.com/ '  data-intro = ' Xin chào bước đầu tiên! ' >

Xem tất cả các thuộc tính ở đây .

3) Gọi hàm JavaScript này:

introJs().start();

Tùy chọn, vượt qua một tham số để introJs chức năng để giới hạn phần trình bày.

Ví dụ: introJs(".introduction-farm").start(); chạy phần giới thiệu cho các phần tử class='introduction-farm'.

Có thể xem trước Intro.js hoạt động thế nào  [nhấn vào đây ##eye##]

Intro.js v2.8.0

Better introductions for websites and features with a step-by-step guide for your projects.

Where to get

You can obtain your local copy of Intro.js from:

1) This github repository, using git clone https://github.com/usablica/intro.js.git

2) Using bower bower install intro.js --save

3) Using npm npm install intro.js --save

4) Download it from CDN (1, 2)

How to use

Intro.js can be added to your site in three simple steps:

1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

CDN hosted files are available at jsDelivr (click Show More) & cdnjs.

2) Add data-intro and data-step to your HTML elements. To add hints you should use data-hint attribute.

For example:

<a href='http://google.com/' data-intro='Hello step one!'></a>

See all attributes here.

3) Call this JavaScript function:

Optionally, pass one parameter to introJs function to limit the presentation section.

For example introJs(".introduction-farm").start(); runs the introduction only for elements with class='introduction-farm'.

Hướng dẫn intro js custom css

Documentation

Please visit Documentation.

Using with:

Intro.js has many wrappers for different purposes. Please visit Documentation for more info.

Build

First you should install nodejs and npm, then first run this command: npm install to install all dependencies.

Now you can run this command to minify all static resources:

make build

Instant IntroJs

Want to learn faster and easier? Here we have Instant IntroJs, Packt Publishing.

Hướng dẫn intro js custom css

Buy and Download

Release History

Author

Afshin Mehrabani

  • Twitter
  • Github
  • Personal page

Other contributors

Contributing

View contribution guidlines

Support/Discussion

  • Stackoverflow

License

Commercial license

If you want to use Intro.js for a commercial application, theme or plugin the commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a commercial license at introjs.com

Open-source license

GNU AGPLv3