layui前端框架

时间:2022-01-20 15:18:54

项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动)

html代码

要给这个标签绑定click方法

 <a href='javascript:;' data-method='offset' data-type='auto' class='showMean'>显示</a>

点击以后,显示这个页面

 <div class="con-no-ma displayNo" id="con-no-ma">
显示页面
</div>

一定要注意js,js必须这样放

<link rel="stylesheet" href="../js/layui/css/layui.css">
<script src="../js/layui/layui.js" charset="utf-8"></script>

layui前端框架

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) : '';
});
})
}

参考地址:http://www.layui.com/demo/layer.html

下载地址:http://www.layui.com/