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

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