本人是服务端程序员，同时需要兼职前端开发。常用的就是原生态的HTML、Javascript，也用过ExtJS、Layui。可是ExtJS变公司后非常难用。Layui上手还行，用过一段时间，会觉得html+css+js的混杂编程感觉很乱。所以想寻找纯Javascript UI框架。搜了半天，终于发现Webix这款成熟度比较高的框架，所以就这么开始了踩坑。
Webix是个Javascript UI框架，官方网站在：https://webix.com/。
官方的入门demo是：
入门文档在这里：https://docs.webix.com/desktop__getting_started.html。
可是这个入门演示是跑不起来的，缺少了必备代码data array，也不知道作者搞这么个坑，有什么意思。
所以咱们就把48小时踩坑之旅分享出来，分为两篇文章。带大家成功开发一个管理后台，并展现出如何从入门到吐槽的过程。先看看效果图如下：
这是一个很简陋的管理后台，左侧导航菜单，右侧iframe加载外部页面。功能包括了：
把上面的技术走一遍之后，10分钟就能够让大家完全掌握Webix，并一起加入吐槽行列。
<html> <head> <link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" type="text/css"> <script src="//cdn.webix.com/edge/webix.js" type="text/javascript"></script> </head> <body> <script type="text/javascript" charset="utf-8"> webix.ui({ rows: [ { view: "template" }, { cols: [ { view: "template" }, { view: "template" } ] } ] }); </script> </body> </html>
布局的思路是从上到下添加行，再从左到右每行添加列，其实一个大括号就可以了，这里方便演示，加入了view的属性，表示这个大括号使用了什么组件（见下文）。效果如下：
webix本质就是个代码生成器，他把我们常用的后台功能封装成了组件，用JS方式组装，并通过ID调用。
我们整理下布局，把后台基本结构完成，代码如下（接下来我们都会只展示JS部分，大家替换下到Html就好）：
webix.ui({ rows: [ { id: "toolbar", view: "toolbar", elements: [ { view: 'label', label: '辰同学的Webix入门讲解' }, {}, // 这个很重要，让控件左右对齐 { view: 'label', label: '辰同学', width: 200, align: 'right' }, { view: 'button', label: '退出', width: 80, }, ] }, { cols: [ { gravity: 0.2, template: '导航栏' }, { template: '窗口栏' } ] } ] });
效果图如下：
代码解释：
现在我们有了头部工具条、左侧导航列表，右侧子窗口界面。具体让我们解释下红色高亮代码：
Toolbar的更多属性文档在这里：https://docs.webix.com/desktop__toolbar.html。以后大家想用什么控件，直接可以点击，左侧选择后，看api、sample。
接下来我们使用ajax方式加载菜单，并显示到界面，代码如下：
webix.ui({ rows: [ { id: "toolbar", view: "toolbar", elements: [ { view: 'label', label: '辰同学的Webix入门讲解' }, {}, // 这个很重要，让控件左右对齐 { view: 'label', label: '辰同学', width: 200, align: 'right' }, { view: 'button', label: '退出', width: 80, }, ] }, { cols: [ { gravity: 0.5, rows: [ { view: "accordion", type: "wide", rows: [ { header: "导航组1", body: { id: "menulist1", view: "list", template: "#id#. #title#", select: true, } }, { header: "导航组2", body: "content 2", collapsed: true, }, { header: "导航组3", body: "content 3", collapsed: true, }, ] } ] }, { template: '窗口栏' } ] } ] }); webix.ready(function () { webix.ajax().get('menu.json', {}).then(function (data) { console.log(data); var menulist = $$('menulist1'); menulist.parse(data.json(), 'json'); }); });
外部数据menu.json如下，和页面放在同一个目录：
[{"id":1,"title":"菜单1"},{"id":2,"title":"菜单2"},{"id":3,"title":"菜单3"},{"id":4,"title":"菜单4"},{"id":5,"title":"菜单5"},{"id":6,"title":"菜单6"}]
效果如下：
代码解释：
代码如下：
webix.ui({ rows: [ { id: "toolbar", view: "toolbar", elements: [ { view: 'label', label: '辰同学的Webix入门讲解' }, {}, // 这个很重要，让控件左右对齐 { view: 'label', label: '辰同学', width: 200, align: 'right' }, { view: 'button', label: '退出', width: 80, }, ] }, { cols: [ { gravity: 0.5, rows: [ { view: "accordion", type: "wide", rows: [ { header: "导航组1", body: { id: "menulist1", view: "list", template: "#id#. #title#", select: true, } }, { header: "导航组2", body: "content 2", collapsed: true, }, { header: "导航组3", body: "content 3", collapsed: true, }, ] } ] }, { rows: [{ id: "tabs", view: "tabbar", close: true, optionWidth: 200, height: 30, multiview: true, options: [ { value: '标签1' } ], }, { id: "views", animate: false, keepViews: true, cells: [ { view: 'template', template: '子窗口1' } ] }] }, ] } ] }); webix.ready(function () { webix.ajax().get('menu.json', {}).then(function (data) { console.log(data); var menulist = $$('menulist1'); menulist.parse(data.json(), 'json'); }); });
效果如下：
代码解释：
终于到了最后了！这里实现了点击菜单，动态加载iframe的复杂逻辑，代码如下：
webix.ui({ rows: [ { id: "toolbar", view: "toolbar", elements: [ { view: 'label', label: '辰同学的Webix入门讲解' }, {}, // 这个很重要，让控件左右对齐 { view: 'label', label: '辰同学', width: 200, align: 'right' }, { view: 'button', label: '退出', width: 80, }, ] }, { cols: [ { gravity: 0.5, rows: [ { view: "accordion", type: "wide", rows: [ { header: "导航组1", body: { id: "menulist1", view: "list", template: "#id#. #title#", select: true, } }, { header: "导航组2", body: "content 2", collapsed: true, }, { header: "导航组3", body: "content 3", collapsed: true, }, ] } ] }, { rows: [{ id: "tabs", view: "tabbar", close: true, optionWidth: 200, height: 30, multiview: true, options: [], }, { id: "views", animate: false, keepViews: true, cells: [{}] }] }, ] } ] }); webix.ready(function () { webix.ajax().get('menu.json', {}).then(function (data) { console.log(data); var menulist = $$('menulist1'); menulist.parse(data.json(), 'json'); }); }); $$("menulist1").attachEvent("onAfterSelect", function (id) { var item = $$('menulist1').getItem(id); if (!$$(item.id)) { $$("views").addView({ view: "iframe", id: item.id, src: "./subpage.html" }); $$("tabs").addOption(item.id, item.title, true); } else { $$("tabs").setValue(item.id); } }); $$("tabs").attachEvent('onBeforeTabClose', function (id) { $$('tabs').removeOption(id); $$('views').removeView(id); });
新建一个subpage.html，内容随便，放在同目录下。
最终效果如下：
代码解释：
到现在，我们就实现了一个功能非常完成的管理后台了，虽然很简单，但是只要灵活结合控件和css的皮肤，就能够做的漂亮。
本文所有代码在这里可以下载：
链接: https://pan.baidu.com/s/1Cv0tNRVUVVhkZbTC-6l4rw
提取码: 97y8
也欢迎大家关注咱们公众号：辰同学技术 微信公众号，同样会分享各种技术10分钟从入门到吐槽：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。