增加用户友好性的jquery向导提示操作插件

[复制链接]
查看: 432|回复: 0

11

主题

11

帖子

45

积分

新手上路

Rank: 1

积分
45
发表于 2019-11-12 23:18:22 | 显示全部楼层 |阅读模式
源码分类
按用途分: 提示框/浮动层/弹出层特效
按程序分: jQuery源码
按行业分: 网页特效
增加用户友好性的jquery向导提示操作插件 尊托云数推荐

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

使用方法:
第一步:在head区域引入joyride-1.0.5.css。例外,如果您想要这个jquery想到兼容手机版,需要引入mobile.css。

第二步:在需要出现引导的地方从第一步开始依次加入ID="numero数字"。引导需要多少步,就加多少个,参数数字递增。

第三步:设置提示显示的位置以及内容:
  1. <ol id="joyRideTipContent">
  2. <li data-id="numero1" data-text="下一步" class="custom">
  3. <h2>Stop #1</h2>
  4. <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
  5. </li>
  6. <li data-id="numero2" data-text="下一步" data-options="tipLocation:top;tipAnimation:fade">
  7. <h2>Stop #2</h2>
  8. <p>Get the details right by styling Joyride with a custom stylesheet!</p>
  9. </li>
  10. <li data-id="numero3" data-text="下一步" data-options="tipLocation:top left;">
  11. <h2>Stop #3</h2>
  12. <p>It works right aligned.</p>
  13. </li>
  14. <li data-id="numero4" data-text="下一步">
  15. <h2>Stop #4</h2>
  16. <p>It works when tips run off the viewport.</p>
  17. </li>
  18. <li data-id="numero5" data-text="结束">
  19. <h2>Stop #5</h2>
  20. <p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
  21. </li>
  22. </ol>
复制代码

这里的类似于data-id="numero1"等与第二步里面的ID="numero1"等一一对应。
"data-text"为按钮上显示的文字,如“下一步”、“结束”等等。
"data-options"为提示文字。

第四步:调用jquery提示向导插件:在</body>前插入下面的代码
  1. <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
  2. <script type="text/javascript" src="jquery.cookie.js"></script>
  3. <script type="text/javascript" src="modernizr.mq.js"></script>
  4. <script type="text/javascript" src="jquery.joyride-1.0.5.js"></script>
  5. <script type="text/javascript">
  6. $(window).load(function() {
  7. $(this).joyride();
  8. });
  9. </script>
复制代码


更多网站特效插件欢迎访问:http://www.9i0i.com/forum-49-1.html


1.jpg


点此演示            点此下载


提取码:
游客,如果您要查看本帖隐藏内容请回复

腾讯云
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文



在线客服(工作时间:9:00-22:00)
400-600-6565

内容导航

微信客服

Copyright   ©2015-2019  云服务器社区  Powered by©Discuz!  技术支持:尊托网络     ( 湘ICP备15009499号-1 )