使用Intro.js - data-intro

时间:2013-12-12 03:35:42

标签: html5 popup html5-audio intro.js

我目前正在为我的网站使用Intro.js,代码工作在这里

<h2 data-step="1" data-intro="Welcome message!">Welcome back</h2>

我想将此音频播放按钮放在data-intro标签内,我该怎么办?

<a onclick="this.firstChild.play()" ><audio src="Audio/WelcomeBack.wav"></audio>▸ </a>

我尝试过像

这样的事情
 <h2 data-step="1" data-intro="Welcome message! <a onclick="this.firstChild.play()" ><audio src="Audio/WelcomeBack.wav"></audio>▸ </a>">Welcome back</h2>

但它没有读取标签。

对不起,我还是个新手,需要帮助:)

1 个答案:

答案 0 :(得分:2)

为了完成这项工作,您必须使用使用JSON的编程定义。

例如:

    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: '#step1',
            intro: "This is a <b>bold</b> tooltip."
          },
          {
            element: '#step2',
            intro: "Ok, <i>wasn't</i> that fun?",
            position: 'right'
          },
          {
            element: '#step3',
            intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
            position: 'left'
          },
          {
            element: '#step4',
            intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
            position: 'bottom'
          },
          {
            element: '#step5',
            intro: '<strong>Get</strong> it, <strong>use</strong> it.'
          }
        ]
      });

      intro.start();

有关详细信息,请参阅此示例:http://usablica.github.io/intro.js/example/html-tooltip/index.html