响应式WEB页面布局插件——XMlayout.js

一、背景

最近一直在做B/S结构的MES系统的看板功能，包括生产看板、仓储看板、系统看板等。需求总结起来主要有以下三点：1，不同的看板展示的内容、图表数量均不一样，因此每个看板页面的布局不一样；2，看板分布在不同的功能模块中；3，看板需要有灵活的展示度，即每个图表都能放大、缩小、全屏等等，具备像操作windows的文件夹系统一样方便的用户交互体验；
基于上述需求，在茫茫的js插件库中找到了一款非常切合我需求的插件——XMlayout.js。
访问地址：http://www.xmlayout.com
网站提供API文档说明，并提供了Demo的在线展示和下载，简单好用。下面介绍一下这一款插件。

二、XMlayout.js简介

XMlayout.js是一款免费的Web页面布局插件。它可以方便地将页面按照横向、纵向进行划分，划分的容器可以通过拖拽调整大小。它为每个容器提供独立的右键菜单和工具栏，每个容器可以合并其它容器来调整大小，可以作为弹出框单独显示。它还提供容器的流水式动画展示功能( Ctrl + Q 启动/退出，方向键控制翻页、播放)。XMlayout依赖于jquery与jQuery UI，能够与bootstrap等插件结合使用，快速构建炫酷Web应用。
XMlayout.js兼容IE9+、chrome、Edge、Firefox、Opera、UC(phone)等主流浏览器。

官网截图
这里写图片描述

这里写图片描述

三、如何使用

XMlayout.js的使用非常简单，只要以以下三个步骤就能实现灵活的布局：

引入jquery，juqey-ui和xmlayout.js到Web页面中；

    <link href="../../plugs/jquery/jquery-ui.css" rel="stylesheet">
    <script src="../../plugs/jquery/jquery.js"></script>
    <script src="../../plugs/jquery/jquery-ui.js"></script>
    <script src="../../plugs/jquery-xmlayout/xmlayout.min.js"></script>

选择要布局的DIV容器

    <div id="panel" style="width:100%; height:80%"></div>
    <!-- div容器一定要指定其高度和宽度，负责xmlayout会报 XMlayout info: can't get the width and height of 'panel' 的异常 -->
    <!-- 高度和宽度可以设置为px数值，也可以设置为%百分比数值。如果是百分比数值，确保其集成的父容器的高、宽值有效 -->

利用XMlayout.js布局容器

    //创建XMlayout对象
    var xm = $.xmlayout.layout();

    //划分成2x3=6的布局
    var data = xm.element(10, true, true, null, [
            xm.element(1, true, true, null, null, [
                    xm.element(1, true, true, true),
                    xm.element(1, true, true, true)
                ]),
            xm.element(2, true, true, null, [
                    xm.element(1, true, true, null, null, [
                             xm.element(1, true, true, true),
                             xm.element(1, true, true, true)
                        ]),
                    xm.element(1, true, true, null, null, [
                             xm.element(1, true, true, true),
                             xm.element(1, true, true, true)
                        ])
                ])
        ]);

    //完成布局的初始化
    xm.init({
        data : data,
        panel : $("#panel"),//传入jquery对象
        drag_bar_unit : 5,
        timer : 2000
    });

    //获取划分完成后的6个子容器，每个容器都是一个div
    var panels = xm.getPanels();

    //为每一个子容器添加对应的内容，加载6个echarts图表
    panels[0].load("demo1/test1.html");
    panels[1].load("demo1/test2.html");
    panels[2].load("demo1/test3.html");
    panels[3].load("demo1/test4.html");
    panels[4].load("demo1/test5.html");
    panels[5].load("demo1/test6.html");

    $.xmlayout.xm = xm;

实现效果如下图：
这里写图片描述

四、总结

xmlayout的展示效果好，特别是具备和ppt一样的播放功能，从而为产品的介绍和交流提供了很好的展示方式；
代码简单，只需要短短的几十行代码就能实现WEB页面的复杂设计；
配置灵活，对于每一项功能基本上都能配置（详情见官网API），可以自定决定交互方式；
对于程序设计本身来说也是非常好的结构，可以将一个庞大复杂的页面分解成很多个小页面，有利于程序的维护、扩展；
在我们单位的多个项目中应用，稳定可靠。