引导插件工具对于提高你的网站的整体用户体验真正有用,将引导您轻松创建网站的指引功能。比如网站的新手引导、业务提示、功能提示,使用也非常简单。
Intro.js 作为一个网站功能操作分布引导插件,支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键退出指南。
将intro.js 跟introjs.css 引入到你的网页中
页面分布引导的元素设置:添加 data-intro 和 data-step 到HTML 元素中.
例如:
<div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right"> 这里出现第一步引导 </div> <div id="demo" data-step="2" data-intro="这里是分布引导的内容2……" data-position="right"> 这里出现第二步引导 </div>
data-intro 表示显示的内容,data-step 表示步骤顺序, data-position 表示文本框的相对位置(可选:top
,left
,right
,bottom
,bottom-left-aligned
,bottom-middle-aligned
,bottom-right-aligned
。默认为 bottom
)
就这样从 data-step从1 到最后,该插件会自动为访客一步步引导下去。
当然,最不能缺少的一步是激活引导插件:
<script type="text/javascript"> introJs().start(); </script>
以上是最基本的实现方法,还有其他高级功能(进度条效果、多页面引导等等)DEMO里面都有就不一一介绍了
1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。