前言

本人是服务端程序员,同时需要兼职前端开发。常用的就是原生态的HTML、Javascript,也用过ExtJS、Layui。可是ExtJS变公司后非常难用。Layui上手还行,用过一段时间,会觉得html+css+js的混杂编程感觉很乱。所以想寻找纯Javascript UI框架。搜了半天,终于发现Webix这款成熟度比较高的框架,所以就这么开始了踩坑。

Webix 入门

Webix是个Javascript UI框架,官方网站在:https://webix.com/。

官方的入门demo是:

入门文档在这里:https://docs.webix.com/desktop__getting_started.html。

可是这个入门演示是跑不起来的,缺少了必备代码data array,也不知道作者搞这么个坑,有什么意思。

所以咱们就把48小时踩坑之旅分享出来,分为两篇文章。带大家成功开发一个管理后台,并展现出如何从入门到吐槽的过程。先看看效果图如下:

这是一个很简陋的管理后台,左侧导航菜单,右侧iframe加载外部页面。功能包括了:

  • 后台框架部分:

    • Accordion+List:左侧导航折叠与展开
    • Multiview:点击导航,新建Tab子页面,加载外部html页面。
    • Ajax:加载服务器数据
  • 子页面部分:
    • Form:表单输入提交
    • Uploader:文件上传
    • Datatable:表单显示
    • Pager:分页控件使用

把上面的技术走一遍之后,10分钟就能够让大家完全掌握Webix,并一起加入吐槽行列。

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 添加 UI Widget / UI Control 组件

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: '窗口栏' }
]
}
]
});

效果图如下:

代码解释:

现在我们有了头部工具条、左侧导航列表,右侧子窗口界面。具体让我们解释下红色高亮代码:

  • view:"toolbar":表示我使用了Toolbar这个自带widget,效果是一条窄工具条界面。
  • Toolbar默认使用了列布局,elements等同于cols属性。
  • 在Toolbar里面,我们在列中,增加了个空括号{},让控件实现左右对齐布局。
  • 在第二行列布局,有个很晦涩的属性“gravity”,本质是列布局各个控件的宽度比例。默认值是1。我设置了0.2,表示左右两个列的比例关系是 0.2 : 1,实现了左边更窄的效果。

Toolbar的更多属性文档在这里:https://docs.webix.com/desktop__toolbar.html。以后大家想用什么控件,直接可以点击,左侧选择后,看api、sample。

Webix Accordion + List 组件的使用

接下来我们使用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"}]

效果如下:

代码解释:

  • 使用了Accordion控件,效果就是能够折叠。布局是行布局。
  • 折叠面板里面,使用List控件,属性select表示是单选,默认是无选中效果。
  • 使用了ajax方式加载外部数据
  • 使用$$两个美元符号,id的方式获取界面配置的List
  • 使用了parse方法把加载的数据显示到界面。

Webix Tab 组件的使用

代码如下:

        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');
});
});

效果如下:

代码解释:

  • 使用了个Tabbar组件,就是标签页。
  • tabbar的close属性,表示可点击关闭;multiview属性,表示显示多个子窗口(enables switching between multiview cells)
  • 下面的view默认就是个multivew了,animate属性,表示不要花里胡哨的左右横移切换,keepViews属性,表示切换标签的时候,页面不会重新加载。这个属性太重要了。

webix iframe的动态加载

终于到了最后了!这里实现了点击菜单,动态加载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,内容随便,放在同目录下。

最终效果如下:

代码解释:

  • 首先,我们移除上面例子中tabs的options和views的cells模拟数据。不过cells要保留一个空括号,表示没有标签的底板。
  • 然后使用attachEvent,对左侧导航添加点击事件onAfterSelect
    • 这里是个非常讨厌的地方,webix不支持class选择,只支持id选择,所以如果有多个list,要一个个对他们绑定相同的事件。
  • $$(item.id)的方式,判断标签是否已经创建了。
    • 这里又是个非常取巧讨厌的地方,你特么不能好好的给个getView之类的接口吗?非要全局id判断,所以我们为view添加id的时候,要注意唯一性了。
  • 用addView和addOption方式,添加标签和子窗口。
  • 添加了一个iframe的子窗口,加载了src目录的页面。这个页面我们会在第二篇文章分享,大家可以自己随便写个子页面,放在同一个目录下。
  • 同样对tab添加监听onBeforeTabClose,里面添加了对标签和子窗口的移除。

到现在,我们就实现了一个功能非常完成的管理后台了,虽然很简单,但是只要灵活结合控件和css的皮肤,就能够做的漂亮。

本文所有代码在这里可以下载:

链接: https://pan.baidu.com/s/1Cv0tNRVUVVhkZbTC-6l4rw

提取码: 97y8

也欢迎大家关注咱们公众号:辰同学技术 微信公众号,同样会分享各种技术10分钟从入门到吐槽:

[入门到吐槽系列] Webix 10分钟入门 一 管理后台制作的更多相关文章

  1. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  2. HTML--HTML入门篇(我想10分钟入门HTML,可以,交给我吧)

    我要正经的讲一节课,咳咳! HTML简介(废话) HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整 ...

  3. Apache Shiro系列三,概述 —— 10分钟入门

     一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...

  4. kafka原理和实践(一)原理:10分钟入门

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

  5. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  6. Markdown - Typora 10分钟入门 - 精简归纳

    Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...

  7. Django从Models 10分钟定制一个Admin后台

    目录 Django从Models 10分钟建立一套RestfulApi Django从Models 10分钟定制一个Admin后台 简介 Django自带一个Admin后台, 支持用户创建,权限配置和 ...

  8. [入门到吐槽系列] 微信小程序 敏感违规图片检测 mediaCheckAsync,客服接口 消息推送 的各种坑分享!

    前言: 最近需要做个用户上传图片,服务端校验图片问题的需求.需要使用小程序消息推送,异步接受腾讯的图片验证回调.实在太多坑了. 相信10分钟看完本文的朋友,可以非常顺利避坑. 前期准备: 首先需要一个 ...

  9. UWP开发入门(十九)——10分钟学会在VS2015中使用Git

    写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开 ...

随机推荐

  1. JPA与hibernate-------JPA01

    ORM概述 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数据库 ...

  2. [µC/GUI 学习]µC/GUI移植

    一.什么是µC/GUI µC/GUI为任何需要图形显示器的嵌入式应用提供了一种灵活的图形用户界面(GUI).µC/GUI允许软件工程师在使用了LCD显示器的产品上增加美轮美奂的用户界面,从简单的2D黑 ...

  3. 2月4日 体温APP开发记录

    1.阅读构建之法 现代软件工程(第三版) 2.观看Android开发视频教程最新版 Android Studio开发 3.数据库链接,,数据传输功能测试

  4. 【笔记】thanos receiver的router模式

  5. NOIP2020 排水系统

    几度欲写,却望高精而却步,今习得__int128,君子报仇,一年不晚. NOIP2020 排水系统 DAG图,拓扑就好,核心难点在于毒瘤的分数的操作,毕竟只是T!只有分数相加,就很简单了. a/b + ...

  6. 淘系工程师讲解的使用Spring特性优雅书写业务代码

    使用Spring特性优雅书写业务代码   大家在日常业务开发工作中相信多多少少遇到过下面这样的几个场景: 当某一个特定事件或动作发生以后,需要执行很多联动动作,如果串行去执行的话太耗时,如果引入消息中 ...

  7. (转引)数据库索引(MySQL)

    数据结构和算法基础 索引的本质:数据结构,帮助高效获取数据 数据库的查询:最基本的查询算法当然是顺序查找(linear search).二分查找(binary search).二叉树查找(binary ...

  8. IEEE754浮点数表示法

    IEEE二进制浮点数算术标准(ANSI/IEEE Std 754-1985)是一套规定如何用二进制表示浮点数的标准.就像"补码规则"建立了二进制位和正负数的一一对应关系一样,IEE ...

  9. Android开发----Button组件的使用与练习

    Button 学习目标: 文字大小.颜色 自定义背景形状 自定义按压效果 点击事件 创建一个新的Activity以增加控件 1.文字大小.颜色 直接在xml文件中定义即可 <Button and ...

  10. kubernetes之添加删除node

    添加node 1.master生成token [root@node-01 ~]# kubeadm token create --print-join-command kubeadm join 172. ...