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

使用与发布

一、资源获取

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

二、资源使用

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

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

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

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

  1. 资源引入

    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的多种引入方式

    对于JS资源,按需加载还是一次性引入看实际需求和使用场景。

    从技术层面讲,LuLu UI支持多种加载模式。可以是模块化加载,如:

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

    也可以直接引入,非模块化调用,例如:

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

    对于一些简单项目,也可以直接使用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>

    或者浏览器打开上面地址再下载到本地使用。

  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
    

    其中,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

三、资源的发布

跟着项目走。

Fork Me 返回顶部