力軟靈活架構內建布局插件（ce-layout）

最近用力軟的架構覺得架構在布局這塊不是很友好特别是對像css不是很好的程式員來說，大部分大家都是後端程式員。

是以決定內建一個和力軟靈活架構風格比較一緻的布局插件進來

插件ce-layout ，下載下傳位址https://gitee.com/program_cat/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 标題

插件比較簡單，還支援嵌套。