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

  • Z时代
  • 2024-01-10
  • 分类：IT

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，灵活的自定义扩展

使用方法

前期准备：

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

以上是 MOYE 知心组件库 一个轻便的 UI 组件库 的全部内容， 来源链接： utcz.com/p/232544.html

回到顶部