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

Question

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

特点

简洁的 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();

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

使用方法

前期准备：

git、nodejs、grunt-cli 与 edp

获取源码：

$ 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

相关链接

• 项目地址：http://ecomfe.github.io/moye/
• 中文文档：https://www.wenjiangs.com/docs/moye