LuLu UI中文文档和演示 » 使用与发布

一、资源获取

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

二、资源使用

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

如果是多人合作的正式项目，应当获取完整LuLu UI资源，也就是所有Sass，JS以及图片资源。

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

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

资源引入

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

CSS独立引入

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

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/*.css">

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

CSS完整引入

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

如果使用本地资源：

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

如果直接使用线上资源：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui.css">

JS独立引入

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

<script src="//qidian.gtimg.com/lulu/theme/peak/js/plugin/jquery.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/*.js"></script>

也可以是模块化加载，如：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/plugin/sea.js"></script>
<script>
seajs.config({
    base: "//qidian.gtimg.com/lulu/theme/peak/js",
    alias: {
        jquery: 'plugin/jquery'
    }
}).use(['common/ui/*'], function(*) {
    // *表示组件名称
    // 这里干嘛干嘛
});
</script>

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

<script src="https://qidian.gtimg.com/c/=/lulu/theme/peak/js/plugin/jquery.js,/lulu/theme/peak/js/common/ui/Follow.js,/lulu/theme/peak/js/common/ui/Keyboard.js,/lulu/theme/peak/js/common/ui/DateTime.js"></script>

JS完整引入

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

<script src="//qidian.gtimg.com/lulu/theme/peak/js/plugin/jquery.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/all.js"></script>

资源概览

基本目录结构如下：

js
 |--common
       |----ui
       |    |--Checkbox.js
       |    |--Color.js
       |    |--Datalist.js
       |    |--DateTime.js
       |    |--Dialog.js
       |    |--Drop.js
       |    |--DropList.js
       |    |--DropPanel.js
       |    |--Enhance.js
       |    |--ErrorTip.js
       |    |--Follow.js
       |    |--Keyboard.js
       |    |--LightTip.js
       |    |--Loading.js
       |    |--Paginaction.js
       |    |--Placeholder.js
       |    |--Radio.js
       |    |--Range.js
       |    |--Select.js
       |    |--Tab.js
       |    |--Tips.js
       |    |--Validate.js
       |
       |--comp
            |--Table.js
            |--Form.js

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

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

JS文件名	说明	依赖文件
Checkbox.js	模拟复选框效果，仅针对IE8浏览器，IE9+为CSS驱动，也就是如果项目无需兼容IE8，此JS可忽略。	Radio.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	下拉交互。支持鼠标点击以及鼠标经过等交互。下拉内容为相对窗体位置的绝对定位。	Follow.js
DropList.js	基于Drop.js扩展的下拉列表交互，和Select.js下拉区别在于元素标签使用更自由，下拉列表受布局影响的概率也小。	Drop.js
DropPanel.js	基于Drop.js扩展的轻交互面板，可以理解为与按钮交互更紧密的，同时视觉上更轻量的弹框。	Drop.js
Enhance.js	组件体系增强。包括键盘交互支持，以及API接口一致化。例如下拉，占位符，单复选框分页组件等更新都可以使用统一的`$().refresh()`方法。	Keyboard.js
ErrorTip.js	出错提示。多出现在输入框等表单控件上，带三角，默认为红色。	Follow.js
Follow.js	定位方法。	Enhance.js
Keyboard.js	键盘增强。作用是让lulu所有组件都能使用键盘无障碍访问。	-
LightTip.js	轻提示。3秒（可自定义）后自动消失。通常用在ajax交互提示中。	-
Loading.js	按钮，容器等loading交互控制。	-
Paginaction.js	分页。支持长分页和短分页两种模式。	-
Placeholder.js	输入框占位符。IE10+浏览器会忽略，此组件只对IE9及其以下浏览器生效。	-
Radio.js	模拟单选框效果，仅针对IE8浏览器，IE9+为CSS驱动，也就是如果项目无需兼容IE8，此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	列表解决方案。将列表的无刷新加载和分页等整合在一起。	Checkbox.js, Tips.js, DropList.js, Loading.js, Pagination.js
Form.js	表单解决方案。	LightTip.js, Loading.js, Validate.js, Select.js, Radio.js, Checkbox.js, Placeholder.js

三、资源的发布

跟着项目走。

LuLu UI组件中文文档 » 使用与发布

使用与发布