项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动)
html代码
要给这个标签绑定click方法
点击以后,显示这个页面
显示页面
一定要注意js,js必须这样放
js代码
注意:这个方法要有地方触发
function showMean() {
layui.use('layer',function () {
var $ = layui.jquery, layer = layui.layer;
//触发事件,这个相当于设置参数
var active = {
offset: function(othis){
var type = othis.data('type')
,text = othis.text();
layer.open({
title:"数据关联",
type: 1,
offset: type, //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
id: 'LAY_demo'+type, //防止重复弹出
content: $("#con-no-ma"), //在页面新定义,然后通过id绑定到这
btn: '关闭全部',
area: ['1000px', '500px'],
btnAlign: 'c', //按钮居中
shade: 0, //不显示遮罩
//btn的方法
yes: function(){
layer.closeAll();
},
//右上角关闭按钮的方法
cancel: function(){
layer.closeAll();
}
});
}
};
//给指定标签绑定click事件
$(' .showMean').on('click', function(){
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
})
}
利用layui前端框架实现对不同文件夹的多文件上传
利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...
layui前端框架实例(修复官网数据接口异常问题)
layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...
layui前端框架之分页
框架环境:SSM框架 为了保证效果,此次演示也用到了jQuery ui框架,大家最好也引入进来 一.去layui官网下载包,解压后,然后导入文件中,最好放再main/webapp文件夹下 官网地址如下 ...
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题)
form.on('submit(mySearch)', function(data){ table.reload('userTable', {//就会读取后台数据,重新加载: page: { curr ...
用layui前端框架弹出form表单以及提交
第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...
整合X-Admin前端框架改造ABP
“站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...
分享一个登录页面(前端框架layui)-20200318
效果图 对该页面的总结: 1.前端框架layui layui官网:https://www.layui.com/,下载之后,简单配置就可使用 2.layui模块引用与使用的方式
Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...
H5前端框架推荐合集 (转)
Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...
随机推荐
jQuery 1.9 .live() is not a function
jquery中的live()方法在jquery1.9及以上的版本中已被废弃了,如果使用,会抛出TypeError: $(...).live is not a function错误. 解决方法: 之前的 ...
(转载博文)VC++API速查
窗口处理 2.1 窗口简介 2.2.1 创建普通窗口(CreateWindow.CreateWindowEx) 2.2.2 关闭窗口(CloseWindow) 2.2.3 销毁窗口(DestroyWi ...
【Bootstrap3.0建站笔记二】button可下拉弹出层
1.button可下拉弹出层: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400 ...
ThinkPhp框架:父类及表单验证
这个知识点,就可以通过"登录"和"注册"的页面来学习这个知识点了首先先做一个"登录"功能一.登录功能(父类)(1)登录的控制器在我的控制器文 ...
python列表很聪明,支持负数索引
python列表很聪明,支持负数索引
学习笔记——SM2算法原理及实现
RSA算法的危机在于其存在亚指数算法,对ECC算法而言一般没有亚指数攻击算法 SM2椭圆曲线公钥密码算法:我国自主知识产权的商用密码算法,是ECC(Elliptic Curve Cryptosyste ...
用 bottle.py 写了个简单的升级包上传
可以当作一个 demo 来玩吧,在这里分享一下.里面涉及的内容包含了文件上传,cookie 设置和读取,重定向(redirect). from bottle import run, post, get ...
〖Android〗简单隐藏Android虚拟键盘的方法
在Android使用 input 输入文本时,不期望出现虚拟键盘: 一般情况下,大家会把键盘给卸载,不过也有简单的方法: 就是下载一个 com.wparam.nullkeyboard (NullKey ...
Nodejs学习笔记(四)—与MySQL交互(felixge/node-mysql)
简介和安装 Node.js与MySQL交互操作有很多库,具体可以在 https://www.npmjs.org/search?q=mysql 查看. 我选择了felixge/node-mysql,用 ...
【BZOJ 4035】 4035: [HAOI2015]数组游戏 (博弈)
4035: [HAOI2015]数组游戏 Time Limit: 15 Sec Memory Limit: 32 MBSubmit: 181 Solved: 89 Description 有一个长 ...