MOYE 知心组件库 一个轻便的 UI 组件库 - 文章教程

MOYE 知心组件库 一个轻便的 UI 组件库

发布于 2020-05-15 字数 3352 浏览 1052 评论 0

Moye 是 ECOM UI 1.1 规范的一个轻量级实现。

MOYE 知心组件库 一个轻便的 UI 组件库

特点

简洁的 HTML

Moye 使用非常简洁易懂的语言来命名类名,并且脱离了标签的束缚。

<div class="ui-button">按钮1</div>
<a class="ui-button">按钮2</a>
<button class="ui-button">按钮3</button>

支持 Smarty 渲染

Moye 提供了多种控件的 smarty 模板,帮助您生成统一的 html 代码,节省编写复杂的 html 结构的时间。

{%Select data={"datasource":[
  {"value": 0,"name": "不限"},
  {"value": 1,"name": "中关村、上地"},
  {"value": 2,"name": "公主坟商圈"},
  {"value": 3,"name": "劲松潘家园"},
  {"value": 4,"name": "亚运村"},
  {"value": 5,"name": "北京南站商圈超长"}
]}%}

直观的 JavaScript

Moye 的所有控件和插件都提供了统一的接口,用户只需要修改配置参数,就可以得到想要的功能。

javascript

var Tab = require('moye/Tab');
new Tab({
  main: $('#tab')
}).render();

html

{%Tab data={"datasource": [{"text": "昨日"},{"text": "近1周"},{"text": "近1月"}]}%}

多样的主题

Moye 提供了多种多样的主题,用一套相同的代码,可以添加多重样式

var Pager = require('moye/Pager');
new Pager({
  main: $('#pager1'),
  total: 10
}).render();
new Pager({
  main: $('#pager2'),
  skin: 'qiche',
  total: 10
}).render();
new Pager({
  main: $('#pager3'),
  skin: 'jiaoyu',
  total: 10
}).render();
new Pager({
  main: $('#pager4'),
  skin: 'youxi',
  total: 10
}).render();

MOYE 知心组件库 一个轻便的 UI 组件库

性能优 – 最全的网页控件,最小的传输体积
功能全 – 100+样式变量,多达20余种插件支持
可扩展 – Free Open Source,灵活的自定义扩展

使用方法

前期准备:

gitnodejsgrunt-cliedp

获取源码:

$ git clone git://github.com/ecomfe/moye.git
$ cd moye

安装依赖:

$ npm install

生成 API 文档:

$ grunt jsdoc
$ open doc/api/index.html

单元测试:

$ grunt test

或者:

$ edp test

代码覆盖率:

$ grunt cover
$ open test/coverage/ui/index.html

或者:

$ edp test

查看可用任务:

$ grunt --help

目前实现的组件

  • 农历控件 Lunar
  • 日历控件 Calendar
  • 日历扩展 CalendarExtension
  • 城市选择 City
  • 分页控件 Pager
  • 浮层提示 Tip
  • 点击统计 Log
  • 条件过滤 Filter
  • 下拉选项 Select
  • 延迟加载 Lazy
  • 选 项 卡 Tabs
  • 对 话 框 Dialog
  • 浮动提示 FloatTip
  • 图片上传 PicUploader
  • 星号评级 Rating
  • 滚 动 条 ScrollBar
  • 图片轮播 Slider

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3