ielevator/小插件.md

ielevator is quite useful for simulating elevator.

## 浮动【电梯】或【回到顶部】小插件：[iElevator.js](https://github.com/zhansingsong/iElevator.js)

#####[iElevator.js](https://github.com/zhansingsong/iElevator.js)是一个jquery小插件，使用简单，兼容IE6，支持UMD和3种配置方式，比锚点更灵活。

![](https://raw.githubusercontent.com/zhansingsong/iElevator.js/master/demo.gif)

#####Default Options
```javascript
var _defaults = {
        floors: null,
        btns: null,
        backtop: null,
        selected: '',
        sticky: -1,
        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 【回到顶部】  **[单击我看Demo效果](http://zhansingsong.github.io/back2top)**
HTML:
```javascript
    <div class="elevator elevator-backtop" id="backtop" >
        <a href="javascript:;" class="js-backtop">TOP</a>
    </div>
```
Javascript:
```javascript
    $('#backtop').ielevator({
        backtop: $('#backtop .js-backtop')
    });
```
只需获取`backtop`引用即可，就这么简单！

#### 2. simulate elelvator  **[单击我看Demo效果](http://zhansingsong.github.io/iElevator)**
HTML structure:  

```javascript
    <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:
```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);
        }
    });
```
 #####<font color=#d22> 注意：  `data-ielevator-options='{"selected": "custome-selected"}` 配置的优先级是最高的</font>

#### 3. simulate elevator + back to top  **[单击我看Demo效果](http://zhansingsong.github.io/iElevator-back2top)**
HTML structure:
```javascript
    <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:
```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 **[单击我看Demo效果](http://zhansingsong.github.io/demoAMD)**
这是一个require.js的实例 

#### 5. 模拟segmentfault文章导航 **[单击我看Demo效果](http://zhansingsong.github.io/segmentfault)**
Javascript:
```javascript
    // 获取Markdown中的标题
    var $demo = $('#demo'),
        $titles = $('h2'),
        $nav = $demo.find('.list'),
        $highlight = $demo.find('.highlight'),
        STR = '';
    // 填充标题
    $titles.each(function(){
        STR += '<li><a>'+ $(this).text() +'</a></li>';
    });
    $nav.html(STR);
    // 调用ielevator
    $demo.ielevator({
        floors: $titles,
        btns: $('#demo li'),
        sticky: 10,
        selected: $highlight
    });
```