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

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

—-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>