11 个超棒的 jQuery 分步指引插件
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果。然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情。
下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件,你可以根据自己需求定制,它们都具有一个时尚的外观,而且简单易用。
1. Intro.js
Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性。支持键盘+鼠标的导航方式。
![](http://dl.iteye.com/upload/attachment/0083/5293/0bf3a423-4a1b-3a58-bb0d-d4de2965f464.gif)
2. aSimpleTour
aSimpleTour 使用JSON数据进行存储配置和内容。一个浮动窗帮助管理重点元素的浏览、工具提示(可以定位)。
![](http://dl.iteye.com/upload/attachment/0083/5295/ba1b323f-ec35-3502-af89-d337794b81fe.jpg)
3. Pageguide.js
PageGuide.js 是一个利用jQuery 与 CSS3实现的交互式可视化网页向导组件,通过 PageGuide.js 可制作出友好的帮助提示。
![](http://dl.iteye.com/upload/attachment/0083/5297/df664baf-9695-36fa-bde1-1c8255eaa0dd.jpg)
4. Joyride
Joyride是一个jQuery插件,可以利用它来创建一个引导用户如何操作网站功能的向导。通过定义一个操作步骤顺序,这个插件会在需要操作的HTML元素旁边显示一个帮助说明的Tooltips。
![](http://dl.iteye.com/upload/attachment/0083/5298/7226eceb-a1d9-3dba-970a-5bb2bebfd6ac.jpg)
5. Website Tour
一个简单但实用的插件。所有明细和内容都定义在JS中。它还提供选项来定义tooltips的位置和颜色。
![](http://dl.iteye.com/upload/attachment/0083/5303/4f028cf0-630b-3563-9eeb-ec32f7d030a3.jpg)
6. Bootstro.js
这个是Intro.js的Bootstrap版本。
![](http://dl.iteye.com/upload/attachment/0083/5301/576775e1-85a0-30c0-b9a5-429335eae613.jpg)
这个jQuery网站导航在Bootstrap Popovers中加载内容。导航步骤和内容都定义在JavaScript中,它拥有许多的选项来定义其行为。
![](http://dl.iteye.com/upload/attachment/0083/5305/9f37e88b-f548-389b-b5c3-ee4e2b1637f9.jpg)
这个插件拥有许多的选项来定外观和步骤之间的延迟,设置要初始显示的项目,等等。
![](http://dl.iteye.com/upload/attachment/0083/5307/0b4d77e3-195c-3b64-9d69-c64b0d4a907e.gif)
这个插件采用CoffeeScript+Less + CSS开发,非常易于定制,可手动显示其他步骤或自动播放。可通过函数来获得当前的步骤,或者显示特定的一个步骤。
![](http://dl.iteye.com/upload/attachment/0083/5309/9fdf1877-031a-3167-a967-1d6e4a7291dd.jpg)
10. Trip.js
所有用引导的步骤和内容都定义在JS中,它拥有一个完整的API,支持callbacks、keyboard,并允许自定义外观。
![](http://dl.iteye.com/upload/attachment/0083/5311/8ecce8ed-976a-344c-b773-6bff77829131.gif)
11. Crumble
Crumble采用冒泡的界面,所有的步骤定义在一个有序的列表。
![](http://dl.iteye.com/upload/attachment/0083/5313/150c6c19-a0b0-3634-94f1-ee00ed0ba926.gif)
11 个超棒的 jQuery 分步指引插件的更多相关文章
- 11个超棒的 jQuery 分步指引插件(转)
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
- 四款超棒的jQuery数字化签名插件
在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! ...
- 推荐10个超棒的jQuery工具 提示插件
脚本之家 http://www.jb51.net/article/28525.htm
- 30 个最棒的 jQuery 的拖放插件
jQuery 允许用户为任意 DOM 元素添加可拖放的功能,通过 jQuery 的拖放插件你可以轻松实现网页上任意元素的拖拽操作.在本文中我们向你推荐 30 个最棒的 jQuery 的拖放插件. 点击 ...
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示 本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- jQuery 分步引导 插件
转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往 ...
- 20 个非常棒的jQuery内容滑动插件
Wow Slider WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
- 一款超炫的jquery图片播放插件[Cloud Carousel]
今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...
随机推荐
- Activiti6-数据库配置-dbconfig(学习笔记)
常用数据连接池种类: 不一样的地方在于filters过滤器,设置了统计.和记录 avtiviti支持的数据库有: <?xml version="1.0" encoding=& ...
- 记一次innobackupex备份恢复数据库过程
简介:以前备份都是通过mysqldump备份数据库的,由于是逻辑备份,所以采用这种备份方式数据是很安全的,跨平台.版本都很容易.凡事有利必有弊,逻辑备份在你数据库比较大时,备份.恢复数据所耗费的时间也 ...
- deepin配置Oracle JDK
这里记录一下入手deepin后,安装JDK的过程,和之前的CentOS有些不同 本篇参考了两篇博客 1 2 第一篇有些问题,在第二篇中找到了解决方案 接下来是操作过程: 检查本机自带的OpenJDK, ...
- Python——Flask框架——电子邮件
一.框架(Flask-Mail) 安装 : pip install flask-mail 二.SMTP服务器的配置 配置 默认值 说明 MAIL_SERVER locallhost 电子邮件服务器的主 ...
- WebViewClient 与 WebChromeClient
WebViewClient帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”.常用的shouldOverrideUrlLoading就是该类的一个方法,比如: on ...
- OperationCenter Docker容器启动脚本
docker rm -f OperationCenter rm -f /root/webapps/logs/* image_name="harbor.gfstack.geo/geostack ...
- supervisor进程管理的使用
介绍 Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动重启.它是通过fork/exec的方式把这些被管理 ...
- CF55D Beautiful numbers
题目链接 题意 定义一个数字\(x\)是\(beautiful\ number\)当且仅当\(x\)可以被其十进制表示下所有非\(0\)位置的数整除. 例如\(24\)是一个\(beautiful\ ...
- 20175221 实验一《Java开发环境的熟悉》实验报告
20175221 实验一<Java开发环境的熟悉>实验报告 (一)Linux运行结果 (二)IDEA下Java程序开发.调试:学会通过调试(Debug)来定位逻辑错误 试验IDEA是否 ...
- django系列8:优化vote页面,使用通用视图降低代码冗余
修改detail.html,将它变为一个可用的投票页面 <h1>{{ question.question_text }}</h1> {% if error_message %} ...