资讯频道 → Web前端
阅读更多

13顶
0踩

Web前端

原创新闻 11 个超棒的 jQuery 分步指引插件

2013-04-23 14:49 by 资深记者 jforever 评论(4) 有62890人浏览
jquery 插件 导航 css

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

当一个网站或者一个Web应用推出新功能时，为了让用户了解你的站点（或应用）如何操作，往往都会在站点（应用）中添加一个分步指引的效果。然而这样的效果，对于不懂原生JS的同学来说，是件很头痛的事情。

下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件，你可以根据自己需求定制，它们都具有一个时尚的外观，而且简单易用。

1.  Intro.js

Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性。支持键盘+鼠标的导航方式。



2.  aSimpleTour

aSimpleTour 使用JSON数据进行存储配置和内容。一个浮动窗帮助管理重点元素的浏览、工具提示（可以定位）。



3.  Pageguide.js

PageGuide.js 是一个利用jQuery 与 CSS3实现的交互式可视化网页向导组件，通过 PageGuide.js 可制作出友好的帮助提示。



4.  Joyride

Joyride是一个jQuery插件，可以利用它来创建一个引导用户如何操作网站功能的向导。通过定义一个操作步骤顺序，这个插件会在需要操作的HTML元素旁边显示一个帮助说明的Tooltips。



5.  Website Tour

一个简单但实用的插件。所有明细和内容都定义在JS中。它还提供选项来定义tooltips的位置和颜色。



6.  Bootstro.js

这个是Intro.js的Bootstrap版本。



7.  Bootstrap Tour

这个jQuery网站导航在Bootstrap Popovers中加载内容。导航步骤和内容都定义在JavaScript中，它拥有许多的选项来定义其行为。



8.  jQuery Site Tour

这个插件拥有许多的选项来定外观和步骤之间的延迟，设置要初始显示的项目，等等。



9.  jQuery TourBus

这个插件采用CoffeeScript+Less + CSS开发，非常易于定制，可手动显示其他步骤或自动播放。可通过函数来获得当前的步骤，或者显示特定的一个步骤。



10.  Trip.js

所有用引导的步骤和内容都定义在JS中，它拥有一个完整的API，支持callbacks、keyboard，并允许自定义外观。



11.  Crumble

Crumble采用冒泡的界面，所有的步骤定义在一个有序的列表。

  • 大小: 11.6 KB
  • 大小: 20 KB
  • 大小: 16.9 KB
  • 大小: 21.3 KB
  • 大小: 12 KB
  • 大小: 16.2 KB
  • 大小: 16.7 KB
  • 大小: 14.3 KB
  • 大小: 15.1 KB
  • 大小: 8.6 KB
  • 大小: 13 KB
来自: Open资讯
13
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 renyiqiu 2013-12-24 15:14
大赞~~~~
3 楼 Bactryki 2013-10-30 09:24
太棒咯！！！
2 楼 yongquan812 2013-05-22 13:31
 
1 楼 cooltange 2013-05-08 11:06
mark 一下

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 11个超棒的 jQuery 分步指引插件(转)

    当一个网站或者一个Web应用推出新...下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件，你可以根据自己需求定制，它们都具有一个时尚的外观，而且简单易用。 1. Intro.js Intro.js 使用一种引导式的...

  • vue 中使用driver.js来进行页面分步引导

    Driver.js 推荐15款最佳的 jQuery 分步引导插件 11 个超棒的 jQuery 分步指引插件 转载于:https://www.cnblogs.com/aidixie/p/10242788.html

  • 我很喜欢研究这些比较酷的效果

    jquery抽奖商品方格子排列单个单个格子闪过抽奖活动代码https://www.mk2048.com/demo/demo_target_desc.php?id=1cjcaih2j抽奖活动代码Jquery日历表格每日行程安排事项...应用范围很广，很多网站平台上都使用，像QQ邮箱...

  • 收藏书签

    带给你灵感：30个超棒的 SVG 动画展示【上篇】 - 梦想天空（山边小溪） - 博客园 Web前端性能优化 - 笔记 - 前端网（QDFuns） 前端性能优化之更平滑的动画 | w3cTrain 如何让box-shadow动画有更平滑的表现 ...

  • 网址收录

    jQuery 插件 1、 10款jQuery图片左右滚动插件  http://www.i7758.com/archives/2334.html 2、 10个超赞的jQuery图片滑块动画  ...3、 11 个超棒的 jQuery 分步指引

  • 【java毕业设计】智慧社区教育服务门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上

  • 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip

    【资源说明】 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 【java毕业设计】智慧社区宠物管理系统（源代码+论文+PPT模板）.zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

  • 免费下载：Civil War (Stuart Moore)_xVBgd.zip

    免费下载：Civil War (Stuart Moore)_xVBgd.zip

  • JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文)(2024pw).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

  • 免费下载：Spider-Man (Stefan Petrucha)_2pBuA.zip

    免费下载：Spider-Man (Stefan Petrucha)_2pBuA.zip

  • jj视频合并程序代码QZQ.txt

    jj视频合并程序代码QZQ

  • 【java毕业设计】智慧社区会员等级提升系统（源代码+论文+PPT模板）.zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

  • jsp医院病区管理系统(论文+中期检查表+任务书+综合材料）(20242g).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

  • 基于卷积神经网络的通信调制方式识别详细文档+全部资料+优秀项目+源码.zip

    【资源说明】 基于卷积神经网络的通信调制方式识别详细文档+全部资料+优秀项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 计算机网络学习之旅.pptx

    理层、数据链路层、网络层、传输层和应用层的功能、技术和协议。同时，对网络安全、无线网络、网络管理和网络新技术进行了深入剖析。通过案例分析帮助学习者更好地理解实际应用，推荐学习资源助力深入学习。最后总结要点并展望未来网络发展趋势，为计算机网络学习者提供了丰富的知识和实用的指导。

  • 51单片机控制的智能小车.7z

    51单片机控制的智能小车.7z

  • 计算结构体变量的内存大小1.cpp

    计算结构体变量的内存大小1.cpp

  • 基于多智能体深度强化学习的车联网通信资源分配优化详细文档+全部资料+源码.zip

    【资源说明】 基于多智能体深度强化学习的车联网通信资源分配优化详细文档+全部资料+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

Global site tag (gtag.js) - Google Analytics