浮动【电梯】或【回到底部】的小插件ielevator.js

2024年1月22日 110次阅读 来源: singsong
iElevator.js是一个jquery小插件，使用简单，兼容IE6，支持UMD和3种配置方式，比锚点更灵活。
Default Options

    _defaults = {
        floors: null,
        btns: null,
        backtop: null,
        selected: '',
        visible: {isHide: 'no', numShow: 0},
        speed: 400,
        show: function (me) {
            me.element.show();
        },
        hide: function (me) {
            me.element.hide();
        }
      }

  • floors:用于获取页面中对于floor模块的引用

  • btns: 获取焦点图引用

  • backtop: 获取回到顶部按钮的引用

  • selected: 用于焦点图在进行滚动或单击时，选中样式

  • visible: 用于控制【电梯】是显示与隐藏，当srollTop值大于numShow是就显示，小于就隐藏

  • speed: 控制滑条的滚动速度

  • show: 可以重新该函数，来定制elevator的显示方式

  • hide: 可以重新该函数，来定制elevator的隐藏方式

安装

npm install ielevator or bower install ielevator

使用

1. back to top 【回到底部】

——————————————————————————-example

HTML:


<div class="elevator elevator-backtop" id="backtop" >
    <a href="javascript:;" class="js-backtop">TOP</a>
</div>

Javascript:


$('#backtop').ielevator({
    backtop: $('#backtop .js-backtop')
});

只需获取backtop引用即可，就这么简单！

2. simulate elelvator

——————————————————————————-example

HTML structure:


<div class="elevator" id="elevator" data-elevator-options='{"selected": "custome-selected"}'>
    <ul>
        <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
        <li><a href="javascript:;" class="js-btn">floor2</a></li>
        <li><a href="javascript:;" class="js-btn">floor3</a></li>
        <li><a href="javascript:;" class="js-btn">floor4</a></li>
        <li><a href="javascript:;" class="js-btn">floor5</a></li>
        <li><a href="javascript:;" class="js-btn">floor6</a></li>
        <li><a href="javascript:;" class="js-btn">floor7</a></li>
    </ul>
</div>

Javascript:


    $('#elevator').ielevator({
        floors: $('.js-floor'),
        btns: $('#elevator .js-btn'),
        selected: 'selected',
        visible: {isHide: 'yes', numShow: 400},
        show: function() {
            $('#elevator').slideDown(400);
        },
        hide: function() {
            $('#elevator').slideUp(400);
        }
    });

注意： data-ielevator-options='{"selected": "custome-selected"} 配置的优先级是最高的

3. simulate elevator + back to top

——————————————————————————-expample

HTML structure:

<div class="elevator" id="elevator" data-elevator-options=''>
    <ul>
        <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
        <li><a href="javascript:;" class="js-btn">floor2</a></li>
        <li><a href="javascript:;" class="js-btn">floor3</a></li>
        <li><a href="javascript:;" class="js-btn">floor4</a></li>
        <li><a href="javascript:;" class="js-btn">floor5</a></li>
        <li><a href="javascript:;" class="js-btn">floor6</a></li>
        <li><a href="javascript:;" class="js-btn">floor7</a></li>
        <li><a href="javascript:;" class="js-backtop">TOP</a></li>
    </ul>
</div>

Javascript:


$('#elevator').ielevator({
    floors: $('.js-floor'),
    btns: $('#elevator .js-btn'),
    backtop: $('#elevator .js-backtop'),
    selected: 'selected',
    visible: {isHide: 'yes', numShow: 400},
    show: function() {
        $('#elevator').slideDown(400);
    },
    hide: function() {
        $('#elevator').slideUp(400);
    }
});

4. require.js example

这是一个require.js的实例

————————————————————————demo_AMD
    原文作者：singsong
    原文地址: https://segmentfault.com/a/1190000004219721
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞