layui如何让弹出来的页面,左右边框可拉动
时间: 2023-12-13 10:02:41 浏览: 62
可以使用 `resize` 方法来实现弹出页面左右边框可拉动的效果。具体操作如下:
1. 在弹出页面中添加左右两个容器,分别用于放置左右两部分内容。
2. 给左右两个容器设置 `position: absolute` 和 `width: 50%`,并分别设置 `left: 0` 和 `right: 0` 或者 `margin-left: -50%` 和 `margin-right: 50%`。
3. 给左右两个容器添加 `resize` 事件,当容器大小发生变化时,调用 `resize()` 方法重新计算左右两个容器的宽度和位置。
下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可拉动弹出页面</title>
<link rel="stylesheet" href="//cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<style>
.container {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
}
.left {
left: 0;
width: 50%;
margin-right: 1px;
background-color: #f2f2f2;
}
.right {
right: 0;
width: 50%;
margin-left: 1px;
background-color: #fff;
}
</style>
</head>
<body>
<button class="layui-btn layui-btn-normal" id="btn">弹出页面</button>
<script src="//cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use('layer', function(){
var layer = layui.layer;
var index = null;
var leftWidth = null;
// 弹出页面
$('#btn').on('click', function() {
index = layer.open({
type: 1,
title: '可拉动弹出页面',
area: ['600px', '400px'],
content: $('#popup')
});
// 获取左侧容器宽度
leftWidth = $('.left').width();
// 左右容器大小可调整
$('.left').on('resize', resize);
$('.right').on('resize', resize);
});
// 调整容器大小
function resize() {
var containerWidth = $('.container').width();
var leftWidthPercent = leftWidth / containerWidth * 100;
var rightWidthPercent = 100 - leftWidthPercent;
$('.left').css({
width: leftWidthPercent + '%'
});
$('.right').css({
width: rightWidthPercent + '%'
});
}
});
</script>
<div id="popup" style="display: none;">
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
</div>
</body>
</html>
```
在该示例中,我们使用了 layui 弹出层组件来实现弹出页面,并在页面中添加了左右两个容器。当用户拉动容器边框时,会触发 `resize` 事件,调用 `resize()` 方法重新计算左右两个容器的宽度和位置,从而实现左右边框可拉动的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)