力软敏捷框架集成布局插件(ce-layout)
程序员文章站
2022-07-02 09:30:49
最近用力软的框架觉得框架在布局这块不是很友好特别是对像css不是很好的程序员来说,大部分大家都是后端程序员。 所以决定集成一个和力软敏捷框架风格比较一致的布局插件进来 插件ce-layout ,下载地址https://gitee.com/program_cat/ce-layout @{ ViewDa ......
最近用力软的框架觉得框架在布局这块不是很友好特别是对像css不是很好的程序员来说,大部分大家都是后端程序员。
所以决定集成一个和力软敏捷框架风格比较一致的布局插件进来
插件ce-layout ,下载地址
@{
viewdata["title"] = "index";
layout = "~/views/shared/_index.cshtml";
}
<link href="~/lib/ce/layout/layout.css" rel="stylesheet" />
<script src="~/lib/ce/layout/layout.js"></script>
<div class="lr-rblock" style="padding:8px; ">
<div id="layout2" class="lr-rblock" style="background-color:#fff;">
<div data-type="left">
</div>
<div data-type="top">
</div>
<div data-type="center">
<div id="layout3">
<div data-type="left">
</div>
<div data-type="top"></div>
<div data-type="center"></div>
<div data-type="right"></div>
<div data-type="bottom"></div>
</div>
</div>
<div data-type="right"></div>
<div data-type="bottom"></div>
</div>
</div>
<script>
var bootstrap = function ($, learun) {
"use strict";
$('#layout2').celayout({
left: {
width: "20%",
resizable: true,
title: '左'
},
right: {
width: 200,
resizable: true,
title: '右'
},
top: {
height: 100,
resizable: true,
title: '上'
},
bottom: {
height: 200,
resizable: true,
title: '下'
}
})
$('#layout3').celayout()
}
</script>
效果
参数说明
首先需要html写上你需要的布局块,分上下左右和中间
中间块是必须的,其他的随意
然后在js里初始化一下
参数主要有四个
height (支持百分比和px)只对 上下块起作用
width(支持百分比和px)只对 左右块起作用
resizable 是否可拖动 只对 上下左右块起作用
title 标题
插件比较简单,还支持嵌套。