pushbutton 移动端弹出列表选择框

dongxiawu 发布于2019-08-20 12:02 / 3503人阅读

摘要：移动端弹出列表选择框移动端从下往上推动画效果端弹出列表选择框，适应所有主流移动端机型，支持引入，引入如有用得不爽可以随时提意见，谢谢。

移动端从下往上推动画效果端弹出列表选择框，适应所有主流移动端机型，支持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

C/C++ Qt 基础通用组件应用

摘要：该组件有两个版本，用于显示整数与单精度浮点数，则是双精度浮点数，有两个特殊参数，参数是在前方加入特殊符号，而则是在后方加入特殊符号。QT 是一个跨平台C++图形界面开发库，利用QT可以快速开发跨平台窗体应用程序，在QT中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率。目前，QT开发中常用的基础组件有以下几种：PushButton 按钮组件LineEdit ...

YPHP 2021-11-23 09:51 评论0 收藏0
Python 小白的 PyQt5 项目实战（1）安装与环境配置

摘要：工具可以直接使用方式安装和的环境配置使用集成开发工具的小白，在安装库以后，还要对和进行环境配置，将其集成到中。如果小白的或安装在其他路径下，则从对应的目录找到，或者在资源管理器中搜索文件找到安装路径。 ...

Chao 2021-10-08 10:04 评论0 收藏0
Windows环境下使用Python设计应用软件——【6】pyqt通过勾选框选择对TableWidg

摘要：本文主要用于自我整理总结，方便后续参考，如果恰好帮助到你，也是件值得高兴的事先展示下这次实现的具体功能具体程序如下导入设计界面设计的弹窗窗体的大小宽，高我是弹窗窗体的标题显示窗口标题栏这样写出来要什么，就可以将右上 ...

stefan 2021-11-22 09:34 评论0 收藏0