现在要写一个后台UI界面，要学的东西越来越多了。各种新的前端框架，让人应接不暇，而一些已有的CSS框架，需要额外写的组件逻辑又太多。有没有一个能够开箱即用，通过配置化的方式，就能实现美观的后台界面的UI框架呢？EAdmin，这个精心打磨的后台UI框架，或许能为你的开发带来更多便利。
EAdmin框架
简介
EAdmin，是 suruibuas 在 Github 上开源的后台UI框架，项目位于 https://github.com/suruibuas/eadmin，并在码云上有镜像 https://gitee.com/suruibuas/eadmin。EAdmin 是一个开箱即用的后台UI框架，无需学习前端框架，无需打包环境，一行代码即可开始使用，文件使用异步加载，加载高效快速，且学习门槛低，半小时即可上手。
EAdmin文档
安装
EAdmin 开箱即用，无需安装，在 HTML 文件中引用发布的 CSS 样式文件，以及Javascript 文件即可，然后进行框架配置后，就可以使用对应的组件进行开发。
<link href="./css/eadmin.min.css" rel="stylesheet">
<script src="./js/core/al.load.min.js" init="./js/core/al.init.min.js">script>本地开发也可以使用 gulp 进行运行：
git clone https://github.com/suruibuas/eadmin.git
npm install
gulp run
Github项目
示例
EAdmin 使用配置化的方式，在入口文件进行框架的配置，方式可以参考项目中 dist/index.html，主配置包括：
- conf：全局配置，包括主页、弹窗默认高度、消息默认时长等参数
- framework：加载的依赖库，包括 jquery、axios 等，可根据自身需求选择
- data：全局数据，可以在框架全局使用的数据
- lib：加载的组件库，包括 form、button、chart 等，可以按需加载
EAdmin 的主色调以暗色为主，同时前景色调较为鲜艳，符合流行的大数据平台的配色需求：
EAdmin颜色
最基本的UI组件之一就是按钮，EAdmin提供了美观的按钮，包括不同的尺寸、图标和状态等：
<button>默认按钮button>
<button class="middle">中等按钮button>
<button class="highlight">高亮按钮button>
<button disabled>禁用按钮button>
<button data-icon="fa-cog">配置button>
<button data-loading="上报中..." data-do="updateData">
上报数据
button>
EAdmin按钮
可以很方便地配置回调函数：
EAdmin 也提供了丰富的表单组件，包括文本框、文本域、单选框、文件上传、穿梭框、评分等。以文本框为例，包括了状态、图标、数字、前后缀等：
<input type="text" placeholder="请输入你需要的内容">
<input type="text" placeholder="请输入你需要的内容" disabled>
<input type="text" placeholder="可以指定文本框的图标" data-icon="fa-user">
<input class="num-input" type="text" value="0" data-min="0" data-max="10" data-step="1">
<input data-model="success" type="text" placeholder="输入正确" value="输入正确">
<input data-model="error" type="text" placeholder="输入错误" value="输入错误">
<input data-model="notice" type="text" placeholder="输入提醒" value="输入提醒">
EAdmin文本框
EAdmin 还提供了基于 quill 编辑器封装的富文本编辑器：
EAdmin文本编辑器
表格当然也是不可缺少的：
EAdmin表格
表格通过 EAdmin.table 进行初始化，在配置中进行数据源、按钮、分页等配置：
<div id="p1">div>
<script>
(function(){
Eadmin.table(\'#p1\', {
// 表格配置
config : {
// 按钮工具
button : [
...
],
// 分页配置，设置为 false 则表示不需要分页
page : {
...
},
// 表格字段（列）配置
column : [
...
],
// 数据源接口地址
data : \'table.php\'
}
});
})();
script>除了基本的UI组件以外，EAdmin还提供了一些复杂的组合组件，可以使用不同场景使用：
EAdmin自定义分页
总结
EAdmin 作为一个后台UI框架，开箱即用，无需配置环境，且最大程度的提供了组件逻辑的实现，使用配置化的方法，就能实现插件的引入、组件的创建、以及数据的传递等，使用起来对于后端开发人员比较友好。作为一个精心打磨的UI框架，EAdmin 目前仍处于活跃开发阶段，项目作者维护积极性高，且代码有较大的参考价值，值得前端开发人员进行学习参考。
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/10439.html
微信扫一扫
支付宝扫一扫
相关推荐
-
支付宝新版发布：回归初心，做一个安静钱包
今年初，支付宝表示要回归商业和金融，做一个“安静”且更懂用户的支付宝。 今天，支付宝发布新版，当中出现了两大更新，明显体现出了这一战略意图。 一是：对首屏头部位置的“卡包”进行了大…
-
平面设计行业就业前景分析
平面设计与商业活动紧密结合，在国内的就业范围非常广泛，与各行业密切相关，同时也是其它各设计门类（诸如：网页设计、展览展示设计、三维设计、影视动画等）的基石。 平面设计师的薪金待遇处位于国内高收入职位的前十名之列。目前，一名优秀的平面设计师的平均月薪在3000－4000元左右，若有能力胜任更高的职位，如设计部门主管、创意部门总监等，其平均月薪一般不会低于6000－8000元人民币。如果你厌倦了为别人打工的生活，那么，一旦具备了作为一位优秀平面设计师应有的素质和技能，只需配备基本的电脑设备就可以成立自己的设计工作室，这对于向往自由生活空间的人来说，不但是一条个人创业的捷径，而且是一种令人向往的生活方式。
-
大神级别的新拟物风格APP界面欣赏
今天给大家分享一些新拟物化风格的APP设计作品。新拟物化风格是类似于浮雕的效果，相对于扁平风来说更能让用户产生耳目一新的感觉。 下面一起来看看这30组精选的新拟物化风格APP设计，…
-
利用HTML5新特性美化表单
对表单感兴趣的人并不多，但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 …
-
高大上的档案管理系统界面是如何设计的？答案在这里
档案管理是非常重要的一项工作，尤其对一些注重保密的企业来说，更是需要设立专门的档案管理员，来负责档案的收集、整理、保管、鉴定、统计和提供利用等工作。随着互联网时代的到来，我们的生活…
-
Skeleton.css源码解读，一个只有419行代码的CSS库
本文介绍 Skeleton 源码一共只有 419 行（加上注释和换行），非常适合用来学习。 本文是根据我的学习过程来编写的，几乎每个章节都包含 使用方法 和 源码分析。 虽然现在大…
-
中西方电商网站设计的不同处
作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。用户群从国内用户变成欧美用户，一开始固执地保留着很多“中式”设计方式，导致我屡屡碰壁。 其实中西方电商网站在体验设…
-
网站导航设计中常用的方法
导航是网页设计的重点，我们在设计一个网站的时候，常常从导航入手，不夸张的说，导航的设计甚至决定了整个网站的风格。这就需要我们平常多留心收集 优秀的案例，在需要的时候才能手到擒来。在前文中我们已经为大家介绍了120个优秀的水平导航设计 ，今天我们汇总了更多优秀的导航设计案例，千万不要错过哦！1.三维导航设计：网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航。
-
关于制作网站时CSS 中对背景图的定位问题
如今的网站都是用css来控制外观的，里面一些按照之类的图片都是直接在这里设置，通过设置position的位置来定位要的图片，但如何才能精确定位到想要的图标上呢？答案很简单，用ps打开那些背景图，再打开ps的“信息”面板，你只要移动鼠标到你想要定位的地方，就可以在“信息”面板上看到坐标了。