pushbutton 移动端弹出列表选择框
pushbutton 移动端弹出列表选择框
移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢。
demo地址: https://gtdalp.github.io/widg...
github地址:https://github.com/gtdalp/pus...
npm安装
npm install pushbuttonjs
使用方法如下:
1、html结构
<section id="pushbutton"></section>
2、需要引入的js
<script src="../src/jslib/zepto.min.js"></script> <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'}]
});
}
效果图 demo1.png
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 }) // 刷新
最新文章
- 思达index网站
- wordpress如何批量关闭旧日志留言功能
- linux云主机怎么安装WDCP
- HDU 4045 Machine scheduling --第二类Strling数
- pm 2.5
- (整理)FORM:Oracle EBS客制化Form的菜单栏用法说明
- Mysql 索引的基础(上)
- flask-script 安装问题
- 去除express.js 3.5中报connect.multipart() will be removed in connect 3.0的警告
- 深入React组件生命周期
- Docker- 创建支持SSH服务的容器镜像
- Nuget安装nupkg文件
- PHP判断客户端是否使用代理服务器及其匿名级别
- SpringCloud第二弹(高可用Eureka+Ribbon负载均衡)
- orz gzy
- spring入门——applicationContext与BeanFactory的区别
- 进阶系列(10)—— C#元数据和动态编程
- Linux内核编译技巧
- mongodb-脏数据问题
- conda与pip的关系