新手指引
开发者文档
- 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中。
1.Intro.js
4.更好的介绍网站和功,以便逐步为您指导项目。
2.容易使用
包括js和css文件, 调价"data-step" 和 "data-intro" 到你的代码。
3.键盘 + 鼠标 控制
用鼠标, 或键盘 "←"控制后退, "→"控制前进, "ENTER" 和 "ESC" 控制退出.
5.快 & 小
仅需4 KB JavaScript 和 2.5 KB CSS (gzip).
6.跨浏览器兼容性
它兼容最近版本的火狐,Chrome和IE8,更好的兼容性需要进一步开发。
- <h1 data-step="1" data-intro="Hello all! :) 第一步:This project's called Intro.js." style="text-align:center">1.Intro.js</h1>
- <p data-step="4" data-intro="第四步:Let's try it. It's free and open-source." class="lead">4.更好的介绍网站和功,以便逐步为您指导项目。</p>
- <div class="introjs-content">
- <div data-step="2" data-intro="第二步:Ok, wasn't that fun?" data-position="right" class="divcont">
- <h4>2.容易使用</h4>
- <p>包括js和css文件, 调价"data-step" 和 "data-intro" 到你的代码。</p>
- </div>
- <div data-step="3" data-intro="第三步:More features, more fun." data-position="left" class="divcont">
- <h4>3.键盘 + 鼠标 控制 </h4>
- <p>用鼠标, 或键盘 "←"控制后退, "→"控制前进, "ENTER" 和 "ESC" 控制退出.</p>
- </div>
- <div data-step="5" data-intro="第五步:Get it, use it." class="divcont">
- <h4>5.快 & 小</h4>
- <p>仅需4 KB JavaScript 和 2.5 KB CSS (gzip).</p>
- </div>
- <div data-step="6" data-intro="第六步:Last step." class="divcont">
- <h4>6.跨浏览器兼容性</h4>
- <p>它兼容最近版本的火狐,Chrome和IE8,更好的兼容性需要进一步开发。</p>
- </div><a href="javascript:void(0);" class="sui-btn btn-xlarge btn-primary">展示操作</a>
- </div>
- <script>
- $(".btn-primary").click(function(){
- $.introJs().start();
- })
- </script>
备注:插件参考第三方来源:http://usablica.github.io/intro.js/
1.在标签里加属性"data-step"标示是第几步;加"data-intro"添加提示语句;"data-position"控制提示框出现位置,可选left、right、top、bottom-middle-aligned、bottom-right-aligned,不写默认为下方。
2.可用鼠标控制,也可以用键盘控制:"←", "→","ENTER" 和 "ESC"控制。
3.调用"$.introJs().start();"可触发新手指引。
可通过introJs传入改变的参数
名称 | 默认值 | 说明 |
---|---|---|
nextLabel | 下一步 | 下一步按钮上的显示文字 |
prevLabel | 上一步 | 上一步按钮上的显示文字 |
skipLabel | 退出 | 退出按钮上的显示文字 |
doneLabel | 结束 | 结束按钮上的显示文字 |
tooltipPosition | bottom | data-position初始值 |
exitOnEsc | true | 是否可用ESC键退出 |
showStepNumbers | true | 是否显示步骤数 |
exitOnOverlayClick | true | 是否可点击背景退出 |
keyboardNavigation | true | 是否可用键盘控制 |
showButtons | true | 是否限制控制按钮 |
showBullets | true | 是否显示点点 |
scrollToElement | true | 是否滚动到下一步骤 |
overlayOpacity | 0.8 | 背景透明值 |
可通过introJs调用的方法
名称 | 说明 | |
---|---|---|
clone | 下一步 | 下一步按钮上的显示文字 |
prevLabel | 上一步 | 上一步按钮上的显示文字 |
skipLabel | 退出 | 退出按钮上的显示文字 |
doneLabel | 结束 | 结束按钮上的显示文字 |
tooltipPosition | bottom | data-position初始值 |
- 复制代码代码已复制