layUI实现可选项 弹框
需求描述:点击插入,会让选择,插入的类型,选择之后,点击确定,执行后续的一些操作。先摆效果图。

代码:
//html代码
<style>
#imp{
display: none;
}
</style> <div class="btn-group">
<div class="btn-group">
<button class="btn sbold blue" id="insert" onclick=""><span class="ladda-label">插入</span></button>
</div>
</div>
<div id="imp" style="text-align:center;">
<button class="btn sbold default" id="pz" onclick="insertImg('examFile');" style=" margin-top: 50px" >
<span class="ladda-label">插入图片</span>
</button>
<input type="hidden" value="" id="flag" />
<button class="btn sbold default" id="" onclick="insertMus('excamFile')" style="margin-top: 50px">
<span class="ladda-label">插入音乐</span>
</button>
</div>
<div class="form-group">
<div>
<input id="examFile" name="examFile" type="file" multiple="multiple"/>
</div>
</div>
//js代码
function initUpload(ctrlName) {
$('#flag').val('1');
$('#flag').text(ctrlName);
}
function pzUpload(ctrlName) {
$('#flag').val('2');
$('#flag').text(ctrlName);
} $("#insert").click(function (fun) {
var id= $("table input[type=checkbox]:checked").val()
var imp=$('#imp')
if (id != undefined && !id ==''){
var index= layer.open({
title:'请选择插入类型',
type: 1,
area: ['300px', '200px'],
content:imp,
btn: ['确定','返回'],
yes: function (index, layero) {
var ctrlName;
var control;
var url;
var title;
var searchServPath;
if ($('#flag').val() != '') {
if ($('#flag').val() == '1') {
ctrlName = $('#flag').text();
control = $('#' + ctrlName);
url = '/vraxx/exam/upload';
$('#title').text("插入图片")
}
$("#examFile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
//
//
//
});
layer.close(index);
} else {
layer.msg('请选择插入类型');
}
}
}); } })
说明:area可以用百分比值来表示比如说: area['70%', '30%'] 另外yes函数可以来写一些业务代码 最后就是 content内容,要注意,现在html中设计好,然后获取到div的节点,就可以展示了
总结:layUI有很多很多更加方便的一些内容,一点一点总结下来,进步ing。
layUI实现可选项 弹框的更多相关文章
- pc端弹框
pc弹框插件:http://aui.github.io/artDialog/doc/index.html#quickref-bubble PC端,手机端,layui很好用,分页啥的:http://ww ...
- 记一次layui弹框关闭问题
我在博客园记录过layui关于弹框关闭问题,文章为layui关闭弹出层,这次出现了特殊情况,之前是通过layer.closeAll()解决了这个问题,但是这次解决不了.而换成parent.layer. ...
- 解决 layui 弹出层(弹框)一闪而过就消失的问题 (转载)
转载: 原文链接:https://blog.csdn.net/qq_20594019/article/details/83956532 本人遇到问题:使用layer.open()弹出页面层,出现弹框闪 ...
- UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)
弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...
- layui layer弹框中表格的显示
场景描述:点击iframe里面的一个按钮,需要在父级弹出一个弹框表格. 问题描述:这个弹框的分页不能正常显示,如果把layer.open前面的parent去掉,就可以正常显示. 代码展示: paren ...
- layui子弹框调用父弹框方法
var thisFrame = parent.window.document.getElementById("LAY_layuiStampDuty1").getElementsBy ...
- vue移动端弹框组件,vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- layer弹框
官网http://layer.layui.com/ /!*如果是页面层*/layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的 ...
- maximo弹框设置新的功能测试总结
先介绍下弹框前的准备工作: 1.签名选项——定义系统中可授权的所有功能的唯一标识.定义签名选项是为了授权而已.定义的签名名要和相应的bean类中的方法一致. 2.签名选项中的功能实现,一般都在APPB ...
随机推荐
- ubuntu16.04 caffe 安装
所需环境 opencv3.x + cuda9.0 安装 caffe首先在你要安装的路径下 clone : git clone https://github.com/BVLC/caffe.git 进入 ...
- Mysql七种 JOIN 连接
内连接 SELECT <select_list> FROM TableA A INNER JOIN TableB B ON A.Key = B.Key 左外连接 SELECT <se ...
- [ffmpeg] 多输入滤波同步方式(framesync)
滤波也不总是单一的输入,也存在对多个输入流进行滤波的需求,最常见的就是对视频添加可视水印,水印的组成通常为原视频以及作为水印的图片或者小动画,在ffmpeg中可以使用overlay滤波器进行水印添加. ...
- x86/x64/x86_64/i386/ia32/ia64/amd/amd64 辨析
x64 = x86_64 = amd64 64位指令集,是对IA-32的扩展,由AMD提出,implemented by AMD,Intel.可兼容32位指令集(IA-32) 目前大部分64位计算机均 ...
- git学习02 - log查看&版本回退
1.查看更新记录 git log / git log --pretty=oneline D:\learn\git_test>git log commit a915e7b12076673d778 ...
- Mac下查看已安装的jdk版本及其安装目录
1.打开终端,输入:/usr/libexec/java_home -V 注意:输入命令参数区分大小写(-v是不对的,必须是-V) 2.如图:为输入命令: 当前Mac已安装jdk目录: Mac默认使用的 ...
- Idea查看并过滤某个接口或者类的实现
查看当前类的父类 会出现一个图 不过这个有点鸡肋,我们通常想看一个类的实现有哪些,虽然有个方法可以,但是没有图. 查看类的实现 在你想查看的类上 Ctrl+H(Ctrl+Alt+B是直接弹窗,不能过滤 ...
- eclipse Tomcat 容器已经启动 但右下角 progress 一直显示100%
今天在家里 遇到一个问题 先上图 我的默认超时时间 eclipse 默认的 45s 果然 到了时间 依旧是 显示超时 解决方法其实 很简单 我看到网上有人说是tomcat 或者 eclip ...
- 贝叶斯推断 && 概率编程初探
1. 写在之前的话 0x1:贝叶斯推断的思想 我们从一个例子开始我们本文的讨论.小明是一个编程老手,但是依然坚信bug仍有可能在代码中存在.于是,在实现了一段特别难的算法之后,他开始决定先来一个简单的 ...
- SpringCloud笔记六:Hystrix
目录 Hystrix是什么? Hystrix服务熔断 新建Hystrix项目 修改yml Maven的pom.xml添加hystrix引用 修改Controller Hystrix服务降级 修改api ...