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 移动端弹出列表选择框的更多相关文章

  1. iOS开发——UI篇&下拉弹出列表选择项效果

    下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod  ...

  2. android 弹出日期选择框

    DatePickerDialog 在很多时候需要用户去设定时间,不可能让用户去在一个文本框中去输入时间,所以就需要有个日期弹出选择框,而这个框就是DatePickerDialog. 1.在API中的D ...

  3. layui文件上传中如何先判断后再弹出文件选择框

    前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...

  4. MUI 底部弹出的选择框

    大致是这样: 第一种方法:这种方法是使用5+的nativeUI原生动画 1)引入:mui.css或者mui.min.css mui.js或者mui.min.js也行 mui.picker.min.js ...

  5. js点击某个图标或按钮弹出文件选择框

    <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...

  6. iOS通过UIAlertController弹出底部选择框来调用相机或者相册

    UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:nil message:nil preferredSt ...

  7. ionicPopup弹出列表选择对话框

    //显示vm.selectWarehouse = function() { vm.popupForWarehouse = $ionicPopup.show({ template: '<div c ...

  8. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  9. 解决PL/SQL Dev连接Oracle弹出空白提示框

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...

随机推荐

  1. JZ-049-把字符串转换成整数

    把字符串转换成整数 题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串,包括数字字母符号,可以为空 返 ...

  2. LeetCode-095-不同的二叉搜索树 II

    不同的二叉搜索树 II 题目描述:给你一个整数 n ,请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 .可以按 任意顺序 返回答案. 二叉搜索树(Binary ...

  3. Ajax结合THymeleaf使用

    <script type="text/javascript"> //通过$("标签"),也可以使用id的点击事件 $("a"). ...

  4. 4、mysql的存储引擎

    存储引擎 存储引擎是负责对表中的数据进行提取和写入工作的,我们可以为不同的表设置不同的存储引擎,也就是说不同的表可以有不同的物理存储结构,不同的提取和写入方式. 1.1 InnoDB 引擎:具备外键支 ...

  5. Applied-Social-Network-Analysis-in-Python 相关笔记4

    模型数据越多,Average系数就越小. perferential attachment model 有比较小的平均路径长度,但有着小的cc. rewire:重新连接 如果仅看这个共同的邻居数的话,数 ...

  6. PHP命令执行集锦

    前言 代码审计总要遇到命令执行或者说RCE,打CTF的过程中难免不会碰见,毕竟PHP是世界上最好的语言,总结一下 命令执行函数 E.g.1 <?php error_reporting(0); s ...

  7. Linux-timedatectl使用

    Linux下使用timedatectl命令时间时区操作详解 timedatectl命令对于RHEL / CentOS 7和基于Fedora 21+的分布式系统来说,是一个新工具,它作为systemd系 ...

  8. [SPDK/NVMe存储技术分析]002 - SPDK官方介绍

    Introduction to the Storage Performance Development Kit (SPDK) | SPDK概述 By Jonathan S. (Intel), Upda ...

  9. 74cms v4.2.1-v4.2.129-后台getshell漏洞复现

    0x00 影响范围 v4.2.1-v4.2.129 0x01 环境搭建 1. 先去官网下载 骑士人才系统基础版(安装包) 2.将下载好的包进行安装 0x02 复现过程 当前版本v4.2.111 点加工 ...

  10. Android 12(S) 图形显示系统 - Surface 一点补充知识(十二)

    必读: Android 12(S) 图形显示系统 - 开篇 一.前言 因为个人工作主要是Android多媒体播放的内容,在工作中查看源码或设计程序经常会遇到调用API: static inline i ...