LuLu UI pure版中文文档 » 使用与发布
Fork Me

使用与发布

资源获取

Git地址：https://github.com/yued-fe/lulu

设计资源：LULU 提供 Figma UI 组件库设计资源文件，来帮助业务快速设计出高质量的产品原型。新窗口预览点我，当前页预览点我，下载点我。使用过程有任何疑问或者需要帮助点我反馈问题。

资源使用

本文档所有样式源代码均使用的是在线资源，但大家实际开发的时候，无论项目大小，建议下载并整合到本地项目资源中。因为线上的LuLu一直迭代，所以如果直接使用线上资源，可能会影响本地使用。

如果是多人合作的正式项目，应当获取完整LuLu UI资源。

如果是比较小型的项目，例如静态运营活动，可以按需下载需要的CSS和JS资源到本地，无需全部都下载到本地。

当然，如果目的是为了学习如何使用LuLu，也是可以直接使用线上资源的。

资源引入

JS和CSS资源都支持独立引入和批量引入。

CSS独立引入

独立引入适用于轻量级的小页面，或者只想使用某一组件场景。类似下面：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/*.css">

具体使用参见各个组件文档说明。

CSS完整引入推荐

如果用到LuLu UI多个组件，我们可以直接引入一个完整的ui.css文件就可以了，可能会有些许冗余，但成本较低，可以忽略。

如果使用本地资源：

<link rel="stylesheet" href="/css/common/ui.css">

如果直接使用线上资源：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui.css">
JS独立引入

独立引入适用于轻量级的小页面，或者只想使用某一组件场景。方法有很多，可以直连：

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/*.js"></script>

或者直接使用combo的资源，例如：

<script src="https://qidian.gtimg.com/c/=/lulu/pure/js/common/ui/Follow.js,/lulu/pure/js/common/ui/Keyboard.js,/lulu/pure/js/common/ui/DateTime.js"></script>
JS完整引入推荐

所有JS都整合在一个JS中，如今流量不值钱，完整引入反而省心。。

<script src="https://qidian.gtimg.com/lulu/pure/js/common/all.js"></script>

all.js中并不包括polyfill.js，如果你的项目还需要兼容IE浏览器，则还需要下面这段代码：

<script src="https://qidian.gtimg.com/lulu/pure/js/common/polyfill.js"></script>

资源概览

基本目录结构如下：

js
 |--common
       |----ui
       |    |--Color.js
       |    |--Datalist.js
       |    |--DateTime.js
       |    |--Dialog.js
       |    |--Drop.js
       |    |--ErrorTip.js
       |    |--Follow.js
       |    |--Keyboard.js
       |    |--LightTip.js
       |    |--Loading.js
       |    |--Pagination.js
       |    |--Range.js
       |    |--Select.js
       |    |--Tab.js
       |    |--Tips.js
       |    |--Validate.js
       |
       |--comp
       |    |--Table.js
       |    |--Form.js
       |
       |--all.js         // build by running 'node run'
       |--polyfill.js    // for IE

其中，ui文件夹下为具体每一个小的ui组件；comp文件夹为components缩写，指整合多个ui组件实现的常用解决方案。

各个JS具体作用参见下表：

JS文件名 说明 依赖文件
Color.js 颜色选择器。基于原生的color类型输入框生成。 Follow.js
Datalist.js 数据下拉。支持本地Autocomplete，Ajax Autocomplete，支持邮箱@匹配等各种输入匹配。 Follow.js
DateTime.js 支持日期选择器，年份选择器，月份选择器，时间选择器以及日期范围和月范围选择器。 Follow.js
Dialog.js 弹框。带有黑色半透明遮罩的弹框。内置alert和confirm等常用提示弹框。支持ajax异步加载弹框内容。 Loading.js
Drop.js 下拉交互。支持点击以及鼠标经过等交互。下拉内容绝对定位。内置列表和面板两种Drop类型 Follow.js
ErrorTip.js 出错提示。多出现在输入框等表单控件上，带三角，默认为红色。 Follow.js
Follow.js 定位方法。 -
Keyboard.js 键盘增强。作用是让lulu所有组件都能使用键盘无障碍访问。 -
LightTip.js 轻提示。3秒（可自定义）后自动消失。通常用在ajax交互提示中。 -
Loading.js 按钮，容器等loading交互控制。 -
Pagination.js 分页。支持长分页和短分页两种模式。 -
Range.js 区域范围选择。基于原生的range类型输入框生成。 Tips.js
Select.js 自定义下拉。基于原生<select>生成，通常用在表单交互中。 -
Tab.js 选项卡。 -
Tips.js 带小尖角的黑色提示效果。支持多种访问，支持CSS提示和JS提示。 Follow.js
Validate.js 表单验证。采用和原生浏览器表单验证类似的交互方式，同时验证规则基于原生HTML5属性和方法。 ErrorTip.js
JS文件名 说明 依赖文件
Table.js 列表解决方案。将列表的无刷新加载和分页等整合在一起。 -
Form.js 表单解决方案。 LightTip.js, Validate.js

关于polyfill.js

LuLu UI pure主题走polyfill机制，采用比较新的API原生开发，对于不支持的浏览器，例如IE，采用polyfill使其也支持，目前支持的API如下：

  • Element.classList for IE9
  • Element.matches() for IE9
  • Element.closest() for IE
  • Element.before()/after()/append()/prepend()/replaceWith()/remove() for IE
  • URL()/URLSearchParams() for IE
  • document.scrollingElement for IE
  • console for IE9-IE10
  • CustomEvent for IE
  • NodeList.forEach() for IE
  • Object.assign() for IE
  • requestAnimationFrame for IE9

资源的发布

跟着项目走。

本页贡献者：

zhangxinxu