欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

力软敏捷框架集成布局插件(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>

效果

力软敏捷框架集成布局插件(ce-layout)

 

 

参数说明

首先需要html写上你需要的布局块,分上下左右和中间

中间块是必须的,其他的随意

然后在js里初始化一下

参数主要有四个

height (支持百分比和px)只对 上下块起作用

width(支持百分比和px)只对 左右块起作用

resizable 是否可拖动 只对 上下左右块起作用

title 标题

插件比较简单,还支持嵌套。