弹出列表选择框 https://gtdalp.github.
移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;
demo地址: https://gtdalp.github.io/widget/pushbutton/demos/pushbutton.html
###npm安装
npm install pushbuttonjs 使用方法如下:
###1、html结构
<section id="pushbutton"></section>
###2、需要引入的js
<script src="../build/pushbutton.min.js"></script>
###3、调用
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'}] }); }
效果图
###4、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 }) // 刷新
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。