pushbutton 移動端彈出列表選擇框

pushbutton 移動端彈出列表選擇框

移動端從下往上推進畫效果端彈出列表選擇框，適應全部主流移動端機型，支持Node引入，require引入;若有用得不爽能夠隨時提意見，謝謝。

demo地址: https://gtdalp.github.io/widg...

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

npm安裝

npm install pushbuttonjs
使用方法以下：

一、html結構

<section id="pushbutton"></section>
二、須要引入的js

<script src="../src/jslib/zepto.min.js"></script> <script src="../build/pushbutton.min.js"></script>
三、調用

new Pushbutton('#pushbutton', {

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

} refresh.onclick = function () { pub.refresh({

data: [{text: '1321321321'}]
});

}
效果圖 demo1.png

四、API

4.1 options.data 數據

options.data = [

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

]

4.2 options.onClick 點擊回調 返回true 則不隱藏彈出框

options.onClick = function( e ) { console.log(e); // 返回主要有用數據 // e.target 當前dom節點 // e.data 當前點擊的data // e.index 當前點擊的選擇是第幾個 return true;
}
4.3 maxHeight 默認顯示的高度

options.maxHeight = 100 // 默認顯示的高度
4.4 isShow 默認是否顯示

options.isShow = false // 默認是否顯示 默認不顯示
4.5 show 顯示

Pushbutton.show() // 顯示
4.6 hide 隱藏

Pushbutton.hide() // 隱藏
4.7 refresh 刷新

Pushbutton.refresh({

.. // options 能夠傳options }) // 刷新