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

2024年4月28日 179次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞