layuit 框架_layui前端框架

项目中需要弹出层效果，使用了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 有一个长 ...