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 ...
随机推荐
- 【NLP】BLEU值满分是100分吗?
为了解决这个问题,首先需要知道BLEU值是如何计算出来的. BLEU全称是Bilingual Evaulation Understudy.其意思是双语评估替补.所谓Understudy(替补),意思是 ...
- 【算法】欧几里得算法与青蛙约会oj
欧几里得和扩展欧几里得算法 题目: poj 1061 poj 2142 双六 扩展欧几里得算法详解 先说欧几里得算法:欧几里得算法辗转相除求\(gcd\).求\(a.b\)的\(gcd\),则利用的性 ...
- 数据分析三剑客之pandas
Pandas 引入 前面一篇文章我们介绍了numpy,但numpy的特长并不是在于数据处理,而是在它能非常方便地实现科学计算,所以我们日常对数据进行处理时用的numpy情况并不是很多,我们需要处理的数 ...
- 洛谷P1512伊甸园的日历游戏题解
题目 因为可能要参加qbxt的数论考试,所以最近要开始猛刷数论题了. 这是第一道,不过看样子并不想数论题啊,只是一个博弈论. 思路 一位著名老师说过,数学就是转化和化简,所以先考虑化简,先考虑化简年份 ...
- mysql varcahr转int类型
cast(yysid as SIGNED INTEGER)
- 江西财经大学第二届程序设计竞赛同步赛 H大时钟 (扩展欧几里得)
链接:https://ac.nowcoder.com/acm/contest/635/H来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...
- Codeforces Round #554 (Div. 2) B. Neko Performs Cat Furrier Transform(思维题+log2求解二进制位数的小技巧)
传送门 题意: 给出一个数x,有两个操作: ①:x ^= 2k-1; ②:x++; 每次操作都是从①开始,紧接着是② ①②操作循环进行,问经过多少步操作后,x可以变为2p-1的格式? 最多操作40次, ...
- 博弈论中的Nim博弈
瞎扯 \(orzorz\) \(cdx\) 聚聚给我们讲了博弈论.我要没学上了,祝各位新年快乐.现在让我讲课我都不知道讲什么,我会的东西大家都会,太菜了太菜了. 马上就要回去上文化课了,今明还是收下尾 ...
- .NET常用开发框架汇总
分布式缓存框架:Microsoft Velocity:微软自家分布式缓存服务框架.Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度.Redis:是一个高性能的KV数据 ...
- .NET框架 - NETCORE部署IIS
.NET框架 - NETCORE部署IIS 1. 发布NETCORE项目. 2. 发布IIS 添加 网站 修改对应的程序池 为 ”无托管代码“. 3. 浏览网站. IIS 需提前安装好 .netcor ...