`
ti8989
  • 浏览: 26648 次
文章分类
社区版块
存档分类
最新评论

jQuery网页向导插件Joyride

阅读更多

转自[给力技术]:http://site518.net/jquery-website-tours-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();
});

   演示地址
分享到:
评论

相关推荐

    jQuery网页向导

    总之,"jQuery网页向导"借助于jQuery和Joyride插件,能够为用户提供一个直观、互动的多步骤导航体验,尤其是在介绍新功能时,能有效提高用户的理解和参与度。通过熟练掌握jQuery和Joyride的使用,开发者可以为网站...

    jquery.joyride页面功能分步指引插件一步步提示页面

    jQuery Joyride 是一款强大的JavaScript插件,用于创建分步骤的页面功能指引,帮助用户更好地理解和使用网页应用。它以其直观的提示和逐步导航功能,提升了用户体验,使得复杂的功能或流程变得易懂。本篇文章将深入...

    joyride:jQuery功能导览插件

    Joyride是用于的易于配置的站点浏览向导。 演示版 您可以在上试用Joyride。 安装 要安装Joyride,您可以使用NPM( )或直接下载文件。 npm start调用构建过程并在浏览器中打开演示。 npm test运行JavaScript测试...

    前端项目-joyride.zip

    Joyride作为一款jQuery插件,它利用JavaScript的强大功能和jQuery的易用性,为开发者提供了创建此类向导的简便方法。jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画等功能,使得开发过程更加...

    Foundation Joyride

    这段代码告诉jQuery等待页面加载完成,然后调用Foundation的Joyride插件并启动向导。 ### 自定义和扩展 除了基础配置,Joyride还提供了丰富的选项和回调函数,允许进行更深入的定制。例如,你可以设置: - `tip_...

Global site tag (gtag.js) - Google Analytics