网站引导页插件intro.js 的用法
intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar
1.在需要的页面添加引用
intro.js
introjs.css
这两个文件已经足够,但是文件夹themes中是不同的样式,如果需要也可以引入喜欢的样式
文件夹example中是demo,大家也可以照葫芦画瓢
2.参数说明
- this._options = {
- /* 下一步按钮的显示名称 */
- nextLabel: 'Next →',
- /* 上一步按钮的显示名称 */
- prevLabel: '← Back',
- /* 跳过按钮的显示名称 */
- skipLabel: 'Skip',
- /* 结束按钮的显示名称 */
- doneLabel: 'Done',
- /* 引导说明框相对高亮说明区域的位置 */
- tooltipPosition: 'bottom',
- /* 引导说明文本框的样式 */
- tooltipClass: '',
- /* 说明高亮区域的样式 */
- highlightClass: '',
- /* 是否使用键盘Esc退出 */
- exitOnEsc: true,
- /* 是否允许点击空白处退出 */
- exitOnOverlayClick: true,
- /* 是否显示说明的数据步骤*/
- showStepNumbers: true,
- /* 是否允许键盘来操作 */
- keyboardNavigation: true,
- /* 是否按键来操作 */
- showButtons: true,
- /* 是否使用点点点显示进度 */
- showBullets: true,
- /* 是否显示进度条 */
- showProgress: false,
- /* 是否滑动到高亮的区域 */
- scrollToElement: true,
- /* 遮罩层的透明度 */
- overlayOpacity: 0.8,
- /* 当位置选择自动的时候,位置排列的优先级 */
- positionPrecedence: ["bottom", "top", "right", "left"],
- /* 是否禁止与元素的相互关联 */
- disableInteraction: false,
- /* 默认提示位置 */
- hintPosition: 'top-middle',
- /* 默认提示内容 */
- hintButtonLabel: 'Got it'
- };
只需要在需要引导说明的标签上加入如下属性,插件就自动将当前标签区域高亮选中,另外附加说明
- <div data-step="1" data-intro="这里是步骤1!"></div>
- <div data-step="2" data-intro="这里是步骤2!"></div>
- <div data-step="3" data-intro="这里是步骤3!"></div>
另外还有两个比较有用的方法
oncomplete 选中“跳过”按钮回调方法
onexit选中“结束”按钮回调方法
一般在页面加载时调用即可:
- //访问引导页
- function guide() {
- introJs().setOptions({
- prevLabel: "上一步",
- nextLabel: "下一步",
- skipLabel: "跳过",
- doneLabel: "结束"
- }).oncomplete(function () {
- //点击跳过按钮后执行的事件
- }).onexit(function () {
- //点击结束按钮后, 执行的事件
- }).start();
- }
效果如下:
网站引导页插件intro.js 的用法的更多相关文章
- html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
- 网站引导页flash动画跳转js脚本
if (getCookie("guidance") == null) { document.cookie = "guidance=true"; window.l ...
- 移动端翻页插件dropload.js(支持Zepto和jQuery)
一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服 ...
- jQuery插件实现的页面功能介绍引导页效果
新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前 ...
- 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航
插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...
- Js用户引导插件intro
1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...
- intro.js 页面引导简单用法
下载地址:http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343 <!DOCTYPE HTML PUBLIC & ...
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...
- Intro.js 网站演示
Intro.js 为您的网站和项目提供一步一步的.更好的介绍 使用简单 引入 js 和 css,然后在代码中加入步骤和介绍. 快速小巧 7 KB 的 JavaScript 和 3 KB CSS,就是全 ...
随机推荐
- Underscore.js 函数节流简单测试
函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js 本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...
- react-redux知识点
1.定义组件: 2.定义action: 3.定义Reducer:reducer1(state,action): 4.定义store:store(reducer1): 5.定义mapStateToPro ...
- Restfull API 示例
什么是Restfull API Restfull API 从字面就可以知道,他是rest式的接口,所以就要先了解什么是rest rest 不是一个技术,也不是一个协议 rest 指的是一组架构约束条件 ...
- C# ASP.NET基类,常用类库及源代码
http://code1.okbase.net/codefile/SerializeHelper.cs_2012122018724_118.htm
- 数据导出至Excel文件--好库编程网http://code1.okbase.net/codefile/SerializeHelper.cs_2012122018724_118.htm
using System; using System.IO; using System.Data; using System.Collections; using System.Data.OleDb; ...
- [你必须知道的.NET]第一回:恩怨情仇:is和as
本文将介绍以下内 容: • 类型转换 • is/as操作符小议 1. 引言 类型安全是.NET设计之初重点考虑 的内容之一,对于程序设计者来说,完全把握系统数据的类型安全,经常是力不从心的问题.现在, ...
- mysql的text的类型注意
不要以为text就只有一种类型! Text也分为四种类型:TINYTEXT.TEXT.MEDIUMTEXT和LONGTEXT 其中 TINYTEXT 256 bytes TEXT 65,535 byt ...
- css布局实践总结(part2)
一.总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫 ...
- LintCode "Binary Representation"
Not hard to think of a solution. But the key is all details. class Solution { public: /** *@param n: ...
- sqlite3移植到arm linux
1,环境: 软件:linux:2.6.38 硬件:6410 交叉编译工具:arm-linux-gcc 也适用于其他linux平台. 2,步骤: 1>下载sqlite3源码包: http://ww ...