浮動【電梯】或【回到底部】的小插件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