pushbutto移动端弹出列表选择框
移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢。
demo地址: https://gtdalp.github.io/widget/pushbutto/demos/pushbutto.html
github地址:https://github.com/gtdalp/pushbutto
pm安装pm istall pushbuttojs使用方法如下:1、html结构<sectio id="pushbutto"></sectio>2、需要引入的js<script src="../src/jslib/zepto.mi.js"></script> <script src="../build/pushbutto.mi.js"></script>3、调用ew Pushbutto('#pushbutto', { data: [ {text:'拍照', cls: 'photo', attr: {'data-key': 'photo'} }, {text:'录像', attr: [ {key1: 'video2'}, {key2: 'video2'} ]}, {text:'语音录入'} ], // 点击回调 返回true 则不隐藏弹出框 oClick: fuctio( e ) { cosole.log(e); // 返回主要有用数据 // e.target 当前dom节点 // e.data 当前点击的data // e.idex 当前点击的选择是第几个 retur true; }, // maxHeight: 100, // 默认显示的高度 isShow: true // 默认是否显示 }); var dom = documet.getElemetById("pushbuttoClick"); var refresh = documet.getElemetById("refresh"); dom.oclick = fuctio () { pub.show();} refresh.oclick = fuctio () { pub.refresh({ data: [{text: '1321321321'}] });}效果图:
4、API4.1optios.data数据optios.data = [ {text:'拍照', cls: 'photo', attr: {'data-key': 'photo'} }, {text:'录像', attr: [ {key1: 'video2'}, {key2: 'video2'} ]}, {text:'语音录入'}]4.2optios.oClick点击回调返回true则不隐藏弹出框optios.oClick = fuctio( e ) { cosole.log(e); // 返回主要有用数据 // e.target 当前dom节点 // e.data 当前点击的data // e.idex 当前点击的选择是第几个 retur true;}4.3maxHeight默认显示的高度optios.maxHeight = 100 // 默认显示的高度4.4isShow默认是否显示optios.isShow = false // 默认是否显示 默认不显示4.5show显示Pushbutto.show() // 显示4.6hide隐藏Pushbutto.hide() // 隐藏4.7refresh刷新Pushbutto.refresh({ .. // optios 可以传optios }) // 刷新
评论