jQuery蒙层引导页插件pagewalkthrough.js

所属分类:UI,其他-工具提示,独立的部件

 52254  463  查看评论 (7)
分享到微信朋友圈
X
jQuery蒙层引导页插件pagewalkthrough.js ie兼容10

首先引入jQuery库和pagewalkthrough插件。

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

然后我们在#walkthrough-content加入隐藏引导内容,就是每一步展示的内容,等会用pagewalkthrough插件调用。

<div class="main">
<div class="w1"></div>
      
    <div class="w2"></div>
    <div id="walkthrough-2">
                    jQuery插件库LOGO,点击这里可以跳转到网站首页。
     </div>
    <div class="w3"></div>
    <div id="walkthrough-3">
                    第二部演示
     </div>
    <div class="w4"></div>
    <div id="walkthrough-4">
                    第三部演示
    </div>    
    <div id="walkthrough-5">
                    第四部演示
    </div>
  
    <img src="img/jq22.jpg">
</div>

jQuery

pagewalkthrough插件中steps是一个数组,定义每一步引导调用的内容,下面我们讲解这几个参数。

$(function() {
    // 设置参数
    $('body').pagewalkthrough({
        name: 'introduction',
        steps: [{
            popup: { //定义弹出提示引导层
                content: '#walkthrough-1',
                type: 'modal'
            }
        },
        {
            wrapper: '.w1',
            //当前引导对应的元素位置
            popup: {
                content: '#walkthrough-2',
                //关联的内容元素
                type: 'tooltip',
                //弹出方式(tooltip和modal以及nohighlight)
                position: 'bottom' //弹出层位置(top,left, right or bottom)
            }
        },
        {
            wrapper: '.w2',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            }
        },
        {
            wrapper: '.w3',
            popup: {
                content: '#walkthrough-4',
                type: 'tooltip',
                position: 'top'
            }
        },
        {
            wrapper: '.w4',
            popup: {
                content: '#walkthrough-5',
                type: 'tooltip',
                position: 'top'
            }
        }]
    });

    // 一步一步显示引导页
    $('body').pagewalkthrough('show');
});

pagewalkthrough.js参数配置。

参数描述默认值
popup弹出提示引导层

wrapper
当前引导对应的元素位置

type
弹出方式(tooltip和modal以及nohighlight)
tooltip
position
弹出层位置(top,left, right or bottom)
bottom
offsetHorizontal
是否水平显示
0
offsetVertical
是否垂直显示
0
width
弹出层宽度
320
contentRotation
是否跳过 默认不跳过
0
autoScroll
是否自动滚动
true
scrollSpeed
滚动速度 单位毫秒
1000
lockScrolling
是否锁定滚动 默认不锁
false
onEnter
当按enter回调
null
onLeave
当结束回调
null


相关插件-工具提示,独立的部件

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 37732  450

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 30196  343

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 33280  394

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 39319  435

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    崔海波 0
    2023/11/3 15:00:48
    懒王 0
    2017/11/22 11:16:37

    点击下一步或者上一步怎么不随步骤滑动啊

    回复
    何必浮夸° 0
    2017/8/7 15:39:27

    手机端可以用吗?

    回复
    取个名字真难a 0
    2016/12/20 16:12:58

    这个插件好像不兼容手机哦!烦~~~

    回复
    阿西吧到底 0
    2016/10/20 10:10:40
    这个插件的兼容性能调吗 回复
    丶丶 0
    2016/10/14 14:10:00
    最后一步,点击完成 怎么执行函数啊 回复
    深爱之人 0
    2016/8/23 17:08:47
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复