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 }) // 刷新
pushbutton 移动端弹出列表选择框的更多相关文章
- iOS开发——UI篇&下拉弹出列表选择项效果
下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod ...
- android 弹出日期选择框
DatePickerDialog 在很多时候需要用户去设定时间,不可能让用户去在一个文本框中去输入时间,所以就需要有个日期弹出选择框,而这个框就是DatePickerDialog. 1.在API中的D ...
- layui文件上传中如何先判断后再弹出文件选择框
前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...
- MUI 底部弹出的选择框
大致是这样: 第一种方法:这种方法是使用5+的nativeUI原生动画 1)引入:mui.css或者mui.min.css mui.js或者mui.min.js也行 mui.picker.min.js ...
- js点击某个图标或按钮弹出文件选择框
<HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...
- iOS通过UIAlertController弹出底部选择框来调用相机或者相册
UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:nil message:nil preferredSt ...
- ionicPopup弹出列表选择对话框
//显示vm.selectWarehouse = function() { vm.popupForWarehouse = $ionicPopup.show({ template: '<div c ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- 解决PL/SQL Dev连接Oracle弹出空白提示框
第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...
随机推荐
- Visual Studio双击打开项目而不是项目属性文件
从VS2019版本就默认勾选了这个,每次打开都是到属性文件,这个根本用不到,点击小三角又比较麻烦,不知道为啥微软给了这个默认功能 VS2022 Preview也是,默认勾选 勾选如下即可:
- Flume介绍安装使用
APache Flume官网:http://flume.apache.org/releases/content/1.9.0/FlumeUserGuide.html#memory-channel 目录 ...
- LabVIEW,控件快捷菜单,温度转换
目前正在自学LabVIEW,深感困难重重,我将偶尔发表一些自己的收获,自认为算是干货了, 搜到这篇随笔的朋友们或多或少遇到了些许困难,希望这能帮助到你们. 内容:练习使用LabVIEW中的控件快捷菜单 ...
- react 也就这么回事 05 —— 组件 & Props
什么是组件:用来实现局部功能的可复用代码片段 比如很多界面会用到"分页"功能,因此可以将它封装成独立的组件 这样用到分页的界面只需引入该组件而不必重新写代码 1 定义组件 在 Re ...
- 28 面向对象编程 instanceof 代码 小结 父类引用指向子类对象
instanceof 代码 // main // Object > Person >Student Object object = new Student(); // 提取公式:XY之间是 ...
- 那些年踩过的坑---java篇
事务 Transaction rolled back because it has been marked as rollback-only 问题描述:项目使用的是springboot,在代码中未使用 ...
- git同步代码到另一分支
将dev分支的代码同步到master 方法一:用git命令 1.git checkout master 2.git merge dev 3.git push --set-upstream origin ...
- H3C三层交换机之IRF虚拟化技术详解及配置
一.IRF是什么? 目前,网络中主要存在两种结构的通信设备,固定盒式设备和模块框式分布式设备. 固定盒式设备成本低廉,但没有高可用性支持:模块框式分布式设备具有高可用性.高性能.高端口密度的优点,但投 ...
- 一步一步迁移ASP.NET Core 6.0-Part2
.NET 6 发布后,我们现有的应用会逐步升级到这个版本,首当其冲的是原因的ASP.NET Core的工程,如果一步一步升级到ASP.NET Core 6.0. 上一篇博文中,跟大家详细介绍了中间件. ...
- php——新闻项目改写
主要思路:遵守java开发规范,保持接口一致性 如何保持接口的一致性: (1).url的一致性:使用@RequestingMapping注解 (2).参数的一致性: 使用@ReuqestParam注解 ...