摘要:移动端弹出列表选择框移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持引入,引入如有用得不爽可以随时提意见,谢谢。
pushbutton 移动端弹出列表选择框
移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢。
demo地址: https://gtdalp.github.io/widg...
github地址:https://github.com/gtdalp/pus...
npm安装
npm install pushbuttonjs
使用方法如下:
1、html结构
2、需要引入的js
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 }) // 刷新
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80764.html
摘要:该组件有两个版本,用于显示整数与单精度浮点数,则是双精度浮点数,有两个特殊参数,参数是在前方加入特殊符号,而则是在后方加入特殊符号。QT 是一个跨平台C++图形界面开发库,利用QT可以快速开发跨平台窗体应用程序,在QT中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率。目前,QT开发中常用的基础组件有以下几种:PushButton 按钮组件LineEdit ...
摘要:工具可以直接使用方式安装和的环境配置使用集成开发工具的小白,在安装库以后,还要对和进行环境配置,将其集成到中。如果小白的或安装在其他路径下,则从对应的目录找到,或者在资源管理器中搜索文件找到安装路径。 ...
摘要:本文主要用于自我整理总结,方便后续参考,如果恰好帮助到你,也是件值得高兴的事先展示下这次实现的具体功能具体程序如下导入设计界面设计的弹窗窗体的大小宽,高我是弹窗窗体的标题显示窗口标题栏这样写出来要什么,就可以将右上 ...
阅读 968·2023-04-25 14:20
阅读 1818·2021-11-24 10:20
阅读 3729·2021-11-11 16:55
阅读 2740·2021-10-14 09:42
阅读 3435·2019-08-30 15:56
阅读 1057·2019-08-30 15:55
阅读 1019·2019-08-30 15:44
阅读 730·2019-08-29 11:28