pushbutton彈出列表選擇框

pushbutton 移動(dòng)端彈出列表選擇框

移動(dòng)端從下往上推動(dòng)畫效果端彈出列表選擇框，適應(yīng)所有主流移動(dòng)端機(jī)型，支持Node引入，require引入;如有用得不爽可以隨時(shí)提意見，謝謝。

demo地址: https://gtdalp.github.io/widget/pushbutton/demos/pushbutton.html

github地址:https://github.com/gtdalp/pushbutton

npm安裝

npm install pushbuttonjs

使用方法如下：

1、html結(jié)構(gòu)

<section id="pushbutton"></section>

2、需要引入的js

<script src="../src/jslib/zepto.min.js"></script> <script src="../build/pushbutton.min.js"></script>

3、調(diào)用

new Pushbutton('#pushbutton', {
    data: [
        {text:'拍照', cls: 'photo', attr: {'data-key': 'photo'} },
        {text:'錄像', attr: [
            {key1: 'video2'},
            {key2: 'video2'}
        ]},
        {text:'語音錄入'}
    ], // 點(diǎn)擊回調(diào) 返回true 則不隱藏彈出框 onClick: function( e ) { console.log(e); // 返回主要有用數(shù)據(jù) // e.target  當(dāng)前dom節(jié)點(diǎn) // e.data  當(dāng)前點(diǎn)擊的data // e.index  當(dāng)前點(diǎn)擊的選擇是第幾個(gè) return true;
    }, // maxHeight: 100,  // 默認(rèn)顯示的高度 isShow: true // 默認(rèn)是否顯示 }); var dom = document.getElementById("pushbuttonClick"); var refresh = document.getElementById("refresh"); dom.onclick = function () { pub.show();
} refresh.onclick = function () { pub.refresh({
        data: [{text: '1321321321'}]
    });
}

    效果圖：

4、API

4.1 options.data 數(shù)據(jù)

options.data = [
    {text:'拍照', cls: 'photo', attr: {'data-key': 'photo'} },
    {text:'錄像', attr: [
        {key1: 'video2'},
        {key2: 'video2'}
    ]},
    {text:'語音錄入'}
]

4.2 options.onClick 點(diǎn)擊回調(diào) 返回true 則不隱藏彈出框

options.onClick = function( e ) { console.log(e); // 返回主要有用數(shù)據(jù) // e.target  當(dāng)前dom節(jié)點(diǎn) // e.data  當(dāng)前點(diǎn)擊的data // e.index  當(dāng)前點(diǎn)擊的選擇是第幾個(gè) return true;
}

4.3 maxHeight 默認(rèn)顯示的高度

options.maxHeight = 100 // 默認(rèn)顯示的高度

4.4 isShow 默認(rèn)是否顯示

options.isShow = false // 默認(rèn)是否顯示  默認(rèn)不顯示

4.5 show 顯示

Pushbutton.show() // 顯示

4.6 hide 隱藏

Pushbutton.hide() // 隱藏

4.7 refresh 刷新

Pushbutton.refresh({
    .. // options 可以傳options }) // 刷新