基于 jQuery 的前端 UI 框架 LuLu UI

LuLu UI 是一个基于 jQuery，针对 PC 网站，兼容 IE8+ 或 IE7+ 的前端 UI 框架，包含 20+ 静态或动态 UI 组件。

上手简单

lulu整个项目就是提供一些UI组件的JS和CSS，很纯粹的JS和CSS，没有任何矫揉造作的“变身”处理。

因此，想要使用lulu ui，直接引入CSS和JS文件地址就可以使用了。HTML还是原来的HTML，CSS还是原来的CSS。什么Vue什么MV*什么高大上概念完全不需要掌握，参照文档，复制复制，粘贴粘贴，效果就出来了。

API文档参见：

使用场景广泛

lulu ui既保留了jQuery插件即插即用的特性，也支持适合多人合作的模块化加载方式，因此适用场景更加广泛。

• 单人完成的某个简单运营活动页，需要个弹框提示功能，可以直接引入lulu ui中的Dialog.js，就可以使用了。
• 某网站看中了lulu ui某一个组件，例如日期选择功能，想拿过来使用，<script>引入日期选择JS，然后就可以使用了。
• 对于多人合作大型项目，可以使用类似seajs这样的加载器进行模块化加载与开发。

成熟

lulu ui诞生到现在已经有好几年了，跟那些年轻的UI框架不同，lulu ui可是见过很多世面的，谦逊内敛不聒噪，没必要大肆鼓吹，口碑说话。

开源是件严肃的事情，lulu ui一直认为，如果组件还没有达到不动如山的境地，那就应该继续埋头打磨。这么多年过去了，经过对内对外多个大中小型项目的验证与打磨，无论是交互细节还是代码本身细节，lulu ui现在都已经可以做到不显山露水了。

体验

lulu ui支持retina视网膜，同时支持aria无障碍访问，以及keyboard键盘无障碍访问。

快速了解lulu项目目录结构

所有资源都在/theme/peak/目录下，分sass, css和js 3个目录，如果你不想要sass，那这个文件夹就不用管。

图片资源在css目录下。

组件分ui和comp两个目录，前者是UI组件，后者是基于UI组件整合的前端解决方案。

更具体信息可以参见：文档-使用与发布

其他说明

因为IE7大势已去，目前modern主题已停止维护。

使用与发布

一、资源获取

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

二、资源使用

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

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

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

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

1. 资源引入
2. JS和CSS资源都支持独立引入和批量引入。
3. CSS独立引入
4. 独立引入适用于轻量级的小页面，或者只想使用某一组件场景。类似下面：

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

1. 具体使用参见各个组件文档说明。
2. CSS完整引入
3. 如果用到LuLu UI多个组件，我们可以直接引入一个完整的ui.css文件就可以了，可能会有些许冗余，但成本较低，可以忽略。
4. 如果使用本地资源：

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

1. 如果直接使用线上资源：

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

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

<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>

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

<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>

1. 或者直接使用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>

1. JS完整引入
2. 所有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>

1. 资源概览
2. 基本目录结构如下：

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

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