pushbutton

弹出列表选择框
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 国产
投 递 者 袁琪
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

pushbutton 移动端弹出列表选择框

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

demo地址: https://gtdalp.github.io/widget/pushbutton/demos/pushbutton.html

github地址:https://github.com/gtdalp/pushbutton

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 }) // 刷新
  • tableWidget中插入PushButton 当在tableWidget中插入PushButton时,如果table中的数据是动态变化的直接传入row,col不会得到想要的结果,这种方式只能在回调函数中获取row,col最后一次的取值。 所以需要采用如下方式: index = QtCore.QPersistentModelIndex(self.tableWidget.model().index

  • 使用clicked(bool);首先需要设置pushButton的setCheckable属性,不设置的话pushButton就像手机的屏幕开关,按一下屏幕亮,再按一下屏幕灭;设置后pushButton就像常见的灯的开关,按下面是开,按上面是关。 默认是不设置的 ui->pushButtonPortSwitch->setCheckable(true); 再根据bool变量操作即可了 /*按钮槽函

  • xx.cpp // 设置二态按钮 参考https://qtguide.ustclug.org/ ui->pushButton->setCheckable(true); connect(ui->pushButton, SIGNAL(clicked(bool )), this, SLOT(slot_on_pushButton_clicked(bool ))); void slot_on_push

  • 在Qt里按钮控件默认对应一个on_pushButton_clicked()成员,如果想用点击信号,在代码中实现on_pushButton_clicked()成员即可。 最近看了一段代码,里面并没有connect函数,只定义了pushbutton,也没有看到调用on_pushButton_clicked()的语句,那么难道说只要点了button,就会自动调用on_pushButton_clicked

  • 我的需求: 首先,我做了一个登陆界面,输入密码后点击屏幕上"登录"按钮就可以实现界面跳转,但是一开始触发事件只能使用鼠标点击屏幕上的按钮才能触发这个按钮,我想到习惯性的登录动作是先用键盘输入密码,然后直接潇洒的重击一下回车键,又解压又有效!!! 我的解决思路: 要给这个"登录"的pushButton绑定键盘事件,首先想到的是利用setShortcut属性给pushButton设置一个快捷键,但是几

  • 记录下今天出现的一个坑,但不一定对。 QMetaObject::connectSlotsByName: No matching signal for on_pushButton_clicked()的解决   软件启动就出现这样的问题,看网上说是因为我一开始建立了信号与槽的连接后改变了按钮的名字导致的,但是我连槽函数的名字也改变了,还是会出现这样的一个问题,后来查看代码的时候发现是我更改了目录,两个

  • 声明了一个多余无用的函数,没有定义这个函数 在.h文件中删除void on_pushButton_clicked();就好了。 经常该来该去就会有这个问题,考虑还浪费时间,记录一下记忆深刻一些。

  • 功能:鼠标弹起并在按键区域内时,按键响应。并实现normal、hover、pressed效果,PushButton大小默认为传入图片大小。 PushButton的normal、hover、pressed效果没有使用QSS实现,因为重写mouseReleaseEvent后,qss的hover效果混乱。 用法: [cpp] view plain copy loginButton = new PushB

 相关资料
  • import { PopupPicker } from 'feui'; components: { [PopupPicker.name]: PopupPicker, }, data() { return { }; } methods: { } 代码演示 单列PopupPicker <fe-group title="单列"> <popup-picker :ti

  • Since 8.2 actionSheet 提供一种供选择选项的列表,它会dock在屏幕的下边沿 使用方法 AlipayJSBridge.call('actionSheet', { 'title': '标题', 'btns': ['第一个按钮', '第二个按钮', '第三个按钮'], 'cancelBtn': '取消', 'destructiveBtnIndex': 2 }, fu

  • 介绍 (Introduction) PushButton小部件表示具有自定义样式的标准按钮。 Class 声明 (Class Declaration) 以下是com.google.gwt.user.client.ui.PushButton类的声明 - public class PushButton extends CustomButton CSS样式规则 (CSS Style Rules)

  • pushbutton引擎是一个开源的,flash游戏引擎,它所设计的框架结构提供了一种新的游戏形成机制。Pushbutton引擎集合了非常多的现存的制作flash游戏的库和组件。花很少的时间写代码,更多的时间用在制作有趣的游戏上面。

  • AutoHotKey2如何弹出菜单 选择后SendText这个选择?

  • 问题内容: 如果我只需要2/3列,而是查询而不是在select查询中提供这些列,那么关于更多/更少I / O或内存的性能是否会有所下降? 如果我确实选择了*,则可能会出现网络开销。 但是在选择操作中,数据库引擎是否总是从磁盘中提取原子元组,还是仅提取在选择操作中请求的那些列? 如果它总是拉一个元组,则I / O开销是相同的。 同时,如果它拉出一个元组,从元组中剥离请求的列可能会占用内存。 因此,在