layui设置按钮不可点击_layui upload 模块点击选择文件按钮的禁用与启用功能
要求使用场景:在不刷新页面的情况下根据动态逻辑条件判断点击选择文件按钮时是否起作用,如果符合条件,点击按钮时系统就弹出选择文件框,如果不符合点击时就没反应。
经过分析与实现总结如下:
而实际上 upload 模块没有这种功能,只能在打开或刷新页面时进行判断 render() 不 render(),这么着并不是很灵活。
禁用:也就是 ’按钮节点对象‘.off();(基于 jq),这样的话,由 upload.render() 初始化时绑定的 click、dragleave、dragover、drop、upload 事件都会被解绑,所以再点按钮也无用,就相当于禁用。
启用:经分析源码发现,作者为了防止重复绑定事件就在 render() 的 events 事件方法中给按钮节点上设置了 data 属性,key 是 haveEvents 值是 true,当重新 render() 的时候,会判断按钮节点上 haveEvents 的值如果为真就 return 了,不再执行 on click、dragleave、dragover、drop 这几个事件了。
总结:所以重新启用的方法是,在禁用或启用的逻辑里把按钮节点的 data haveEvents 值设置成 false 就ok了。
先分析源码:(片断)
//手动触发上传
options.bindAction.off('upload.action').on('upload.action', function() {
that.upload();
});
//防止事件重复绑定
if (options.elem.data('haveEvents')) return;
that.elemFile.on('change', function() {
$(this).trigger('upload.change');
});
options.elem.on('click', function() {
if (that.isFile()) return;
$(this).trigger('upload.start');
});
if (options.drag) {
options.elem.on('dragover', function(e) {
e.preventDefault();
$(this).trigger('upload.over');
}).on('dragleave', function(e) {
$(this).trigger('upload.leave');
}).on('drop', function(e) {
e.preventDefault();
$(this).trigger('upload.drop', e);
});
}
options.bindAction.on('click', function() {
$(this).trigger('upload.action');
});
options.elem.data('haveEvents', true);
重点是这 if (options.elem.data('haveEvents')) return; 句..,options.elem 是 render() 时所绑定的按钮节点,所以以下解决方法:
if(true){
//启用(实际就是重新渲染)
upload.render({...})
} else {
//禁用
$('.uploadButton').off().data('haveEvents', false);
}
再判断的时候条件如果为真,再渲染的话,因为 haveEvents 的值变成了 false,所以下面的代码会执行,click 事件什么就会重新绑定(不是重复),所以就实现了启用与禁用。
layui设置按钮不可点击_layui upload 模块点击选择文件按钮的禁用与启用功能相关推荐
- file input 点击没反应_解决input file按钮要点击两次才弹出选择文件窗口
相信很多人都碰到过这个问题,文件上传控件透明后有的要点击两次才能弹出选择文件窗口,这里将将介绍如何避免要双击,只需要单击是可以实现的. 本来一直无心留意这个图片上传file按钮的BUG,因为有时候为了 ...
- webuploader在bootstrap模态对话框中选择文件按钮无效的问题
搜了很多,网上主要的说法是 当一个元素是hidden时,addbutton绑定是会失败的,所以单击选择文件按钮就无效了 而bootstrap模态框一开始是隐藏的,因此必须在其显示完毕后才可以初始化we ...
- php按钮打开文件选择框,在Select file(选择)页面单击Select file(选择文件)按钮
第1步,运行WordFix,并单击"Start(开始)"按钮,如图所示. 第2步,进入Word文档恢复向导,在"Select file(选择)"页面单击&quo ...
- 修改选择文件按钮,变成自己设置的样式
1.所达到的效果: 2.思想: (1)将选择文件的按钮与自己写的按钮重合:此处关键在于fileop的float:left;和left:40px; (2)将选择文件的按钮设置透明化. <style ...
- html选择文件按钮美化,css input[type=file] 样式美化,input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
- 关于Watir的upload file不能自动选择文件的解决方案
今天用watir上传文件的附件时,按照http://wiki.openqa.org/display/WTR/File+Uploads的说明怎么都上传不了总是卡在选择文件的那块,在http://stac ...
- 定制jQuery File Upload为微博式单文件上传
原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个 ...
- layui使按钮居中_layui——layer模块
介绍 功能强大的弹层组件,可以以内置模块来引用,也可以作为独立模块引用:独立模块见:http://layer.layui.com/ 1 使用场景 a 作为独立模块使用 如果你只是单独想使用 layer ...
- onlyoffice报错,这份文件无法保存。请检查连接设置或联系您的管理员当你点击“OK“按钮,系统将提示您下载文档。
1.英文报错内容:The document could not be saved. Please check connection settings or contact your administr ...
- angular点击按钮弹出页面_Axure RP8:如何做出点击按钮切换页面效果?
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
最新文章
- 实现首字母或拼音检索-sql语句方式
- JavaScript 是如何工作的:解析、抽象语法树(AST)+ 提升编译速度5个技巧
- wxWidgets:从互联网下载文件
- android webview卡顿检测_Android webview隐藏后跳转新页面input输入卡顿与白屏渲染慢的问题说明及修复方案...
- Office web app server2013详细的安装和部署
- go-文件读写-db
- js工作笔记004---加载数据延迟导致的不确定问题的解决_setTimeout和window_onload
- 李菲菲贡献_贡献,贡献,贡献!
- golang 获取当前年月日
- (已更新)外卖侠3.10.27版本外卖+售卖影票+任务功能微擎版本程序源码下载
- Q学习(Q-learning)入门小例子及python实现
- power BI电商案例分析
- Mybatis缓存实现原理
- 智协云店通+BitCOO加入4WiN.io全球互贸链 | 翼次元空间+Fund++
- 股市基础知识、主力战法【一】
- Mushroom Classification(蘑菇分类数据集)
- 【渝粤教育】电大中专电子商务网站建设与维护 (6)作业 题库
- 视频全屏非全屏切换,状态栏动态显示隐藏兼容性解决
- 用伪类添加翘边阴影::before和::after
- 将SSH多次登录失败的IP加入黑名单
热门文章
- 时间或许从未流逝,而人在氧化新陈代谢与日升日落中,以自己为坐标,定义了时间!...
- 《卡拉马佐夫兄弟》:父子五人性格概述
- SVN更新报the working copy needs to be upgraded解决办法
- IPtables中SNAT、DNAT和MASQUERADE的含义 (转)
- WSJ在隐私是否真的那么可怕
- wps阶梯表格怎么做?wps阶梯表格制作教程
- windows cmd 批处理将文件名改为大写:https://blog.csdn.net/llq108/article/details/47185279
- 解决“桌面右键单击文件夹鼠标一直转圈”
- python曲线拟合预测_python曲线拟合
- Safari插件机制研究(一)