首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery网页指引插件 - Joyride

2012-09-09 
jQuery网页向导插件 - Joyride在网站中实现新功能向导介绍的效果,能让用户尽快熟悉网站的功能,是提高用户

jQuery网页向导插件 - Joyride

在网站中实现新功能向导介绍的效果,能让用户尽快熟悉网站的功能,是提高用户体验的有效方式。这篇文章给大家推荐的就是一个 jQuery 网页向导插件 - Joyride。

?

  Joyride 是一个很给力的 jQuery 网站功能向导插件,它能让你快速创建网站新功能向导介绍页面。它能将任意 HTML 元素设置为向导标记,并在其上显示向导信息。它的定制性也很高,可设置向导信息的位置、向导滚动速度、切换效果等等。除此之外,它还支持自动播放向导功能。

如何使用
  首先在HTML页面中添加 jQuery 框架和 Joyride 插件

<link rel="stylesheet" href="joyride-1.0.2.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.joyride-1.0.2.min.js"></script>

  创建向导所要经过的标记,如

<h3 id="test1"></h3>
<p id="test2">

  定义向导中显示的内容

<ol id="tip">
? /* data-id要和前面定义的标记id一样 'data-text'设置按钮中的文字*/
? <li data-id="test1" data-text="下一步">内容...</li>
? <li data-id="test2">内容...</li>
</ol>

  最后初始化插件

$(function () {
?? $(this).joyride();
});

?

热点排行