专注于WEB技术的IT博客

如何使用Intro.js 创建绚丽的分步指南效果

时间:2014-08-18分类: Js浏览:6445
分享到:

Intro.js 一款小巧的js插件,可以更好地为您的网站项目一步一步指导说明,支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键推出指南。

说起js插件,我们就想起繁冗的js代码,而且下载缓慢。不过你不用担心,Intro.js十分小巧易用,只有intro.js和introjs.css两个小文件,总共不到50kB,请放心使用∩▂∩。

如何获取Intro.js

1、到官网https://github.com/usablica/intro.js/下载

2、到网志博客的百度网盘下载 http://pan.baidu.com/s/1jGFXeg2(附实例)

如何使用

1、加载文件

<script src="./intro/intro.js" type="text/javascript"></script>
<link href="./intro/introjs.css" rel="stylesheet" type="text/css" />

2) 添加 data-intro 和 data-step 到你的html元素里

例如

<div class="col-md-2" data-step="1" data-intro="网志博客logo" data-position='right'><img name="logo" src="./images/logo.gif" style="margin:5px;" alt="">

说明:

data-step="1" --表示指引步骤,这里表示第一步

data-intro="网志博客logo"--描述内容,支持简的的html标签

data-position='right'--弹出层的方向,可以设置为left,middle和right

下面是演示效果

小结:在使用时发现,弹出层的相关按纽是英文标记的,如何按照我们的需求来改变呢,只需打开intro.js找到下面代码来修改即可。

function IntroJs(obj) {
    this._targetElement = obj;

    this._options = {
      /* Next button label in tooltip box 下一步*/
      nextLabel: 'Next &rarr;',
      /* Previous button label in tooltip box 返回*/
      prevLabel: '&larr; Back',
      /* Skip button label in tooltip box 跳过*/
      skipLabel: 'Skip',
      /* Done button label in tooltip box */
      doneLabel: 'Done',
      /* Default tooltip box position */
      tooltipPosition: 'bottom',
      /* Next CSS class for tooltip boxes */
      tooltipClass: '',
      /* Close introduction when pressing Escape button? 是否使用键盘的Esc退出*/ 
      exitOnEsc: true,
      /* Close introduction when clicking on overlay layer? 是否允使点击空白的地方退出*/
      exitOnOverlayClick: true,
      /* Show step numbers in introduction? 是否显示说明的数据步骤*/
      showStepNumbers: true,
      /* Let user use keyboard to navigate the tour? 是否允许使用键盘来操作*/
      keyboardNavigation: true,
      /* Show tour control buttons?使用按纽操作 */
      showButtons: true,
      /* Show tour bullets? */
      showBullets: true,
      /* Scroll to highlighted element? */
      scrollToElement: true,
      /* Set the overlay opacity 设置弹出层的透明度*/
      overlayOpacity: 0.8
    };
  }

理解上面的设置后,你就能创建出绚丽的分步指南效果。

猜你喜欢
标签 : js
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/172.html,谢谢。
  • 评论
  • 赞助本站