介绍
第一、了解与下载
全课云UI，是由bootstrap3.0基础上搭建的前端应用项目框架，统一html布局规范和css基础样式，模块化js;
快速了解bootstrap3.0：
点这里了解bootstrap3.0
pc端UI框架初始文件项目下载;
直接下载：(因为做了项目之间的对接，可以做到一处迭代全体更换，所以取消了直接下载功能，下载请到github下载包吧!)
github clone/下载地址:https://github.com/zawet/QKYUI-dist.git 转到2.0演示地址 转到1.4演示地址 微校UI设计框架下载; 直接下载：微校UI框架下载
github clone/下载地址:https://github.com/zawet/QKYUI-dist.git 转到2.0演示地址 转到1.4演示地址 微校UI设计框架下载; 直接下载：微校UI框架下载
第二、文件结构
pc端UI框架初始化项目包2.0下载后，解压包后会得到如下文件系统:
QKYUI_dist2.0 （项目名，命名规则为QKYUI_+项目名拼音简写）
pc端UI框架初始化项目包1.4下载后，解压包后会得到如下文件系统:
QKYUI_dist1.4 （项目名，命名规则为QKYUI_+项目名拼音简写）
微校UI框架下载后，解压包后会得到如下文件系统:
- css （存放所有的css文件）
-
dist （重要的文件，存放bootstrap，seajs和初始化数据，以及所有引用的第三方插件）
- jq （jquery总成）
- bootstrap （bs总成）
- comjs （存放每个项目都需要用的js模块）
- define （存放公共初始化数据）
- echarts （插件：数据图表插件，官网http://echarts.baidu.com/）
- flatpickr （插件：高级日历插件（不支持ie10-），官网：http://www.jq22.com/jquery-info9859）
- laydate （插件：普通日历插件（服役中），官网：http://laydate.layui.com/）
- swiper （插件：滚动插件，官网：http://www.swiper.com.cn/）
- sea.js （seajs主体）
- seaconfig.js （seajs设置）
- iconfont （存放所有图标字体库，使用方法，查看api）
- images （存放图片数据）
- js （存放自主编写的js模块）
- index.html （默认主页，此版本在主页上提供了一些模板demo）
- appcenter.html （应用中心页面）
- newscenter.html （消息中心页面）
- account_settings.html （账号设置）
- login.html （默认登录页）
- reset_password.html （重置密码页）
- switch_user.html （人员选择）
- qky2.ico
第三、开始使用
1、设置头部导航条；
下载后打开模拟数据库qkydata.js,进行头部导航数据初始化的修改，修改成自己项目要呈现的内容,数据设置如下图，可点击放大
目前到2.0版本所有头部可设置的参数如下表：
参数也可以在页面上进行覆盖更改，覆盖后再次执行下就ok了！
2、排布好整体布局；打开文件项目里的"index.html",在
里按照bootstrap3.0的栅格系统来编写所有模块的布局。
bs栅格系统传送门
3、逐个模块细节雕刻；在规划的布局里进行各模块的编写；
目前到2.0版本所有头部可设置的参数如下表：
| 基础部分 | |||||
| 参数名 | 用途 | 默认值 | 类型 | 从属关系 | 版本支持 |
|---|---|---|---|---|---|
| htmlsrc | 头部模板获取异步地址 | "mould_html/qkynav2.0.html" | String | 否 | 1.4+ |
| logosrc | 头部logo来源路径 | "images/nav_logo/qky-logo.png" | String | 否 | 1.2+ |
| pjname | 应用名 | "初始页面2.0版本" | String | 否 | 1.0+ |
| theme | 头部主题选择（navbar-default或者navbar-default） | "navbar-defau" | String | 否 | 2.0+ |
| themetype | 主题个性化设置 | / | josn | 是 | 2.0+ |
| themetype.pjnameColor | 应用名颜色 | "#27b0f2"（蓝色） | String（色彩值，16进制或者rgba代码） | themetype子类 | 2.0+ |
| themetype.navactiveColor | 头部主导航激活后颜色背景 | "#27b0f2"（蓝色） | String（色彩值，16进制或者rgba代码） | themetype子类 | 2.0+ |
| distclass | 头部框架默认使用class | ["navbar", "navbar-fixed-top", "headernav"] | Array | 否 | 2.0+ |
| 主导航部分 | |||||
| 参数名 | 用途 | 默认值 | 类型 | 从属关系 | 版本支持 |
| navli_j | 头部主导航列表数据 | / | josn | 是 | 2.0+ |
| navli_j.name | 头部主导航列表名 | "导航X" | String | navli_j子类 | 2.0+ |
| navli_j.attrcont | 头部主导航列表外加属性 | ""href='#'" | String | navli_j子类 | 2.0+ |
| navli_j.isactive | 头部主导航列表是否为激活 | 默认第一个选中激活 | String | navli_j子类 | 2.0+ |
| 左侧汉堡包点击后部分 | |||||
| 参数名 | 用途 | 默认值 | 类型 | 从属关系 | 版本支持 |
| morebtn | 是否显示更多按钮（最左汉堡包图标） | true | boolen | 否 | 1.4+ |
| common | 更多菜单中的常用应用列表数据 | 后台调用 | Array | 否 | 1.4+ |
| lately | 更多菜单中的最近应用列表数据 | 后台调用 | Array | 否 | 1.4+ |
| appcenter_link | 应用中心链接地址 | 2.0:"default_html/appcenter.htm, 1.4:"appcenter.html" | String | 否 | 1.4+ |
| allapp | 更多菜单中所有应用数据 | 后台调用 | String | 否 | 1.4+ |
| 右侧个人信息部分 | |||||
| 参数名 | 用途 | 默认值 | 类型 | 从属关系 | 版本支持 |
| isinfo | 是否显示个人信息 | true | boolen | 否 | 1.4+ |
| tea_info | 个人信息数据 | / | josn | 是 | 1.4+ |
| tea_info.name | 个人信息名字 | ”张晓明“ | String | tea_info子类 | 1.4+ |
| tea_info.isphoto | 个人信息是否显示头像 | false | String | tea_info子类 | 1.4+ |
| tea_info.photo | 个人信息头像 | "images/tx01.png" | String | tea_info子类 | 1.4+ |
| otherli | 更多设置下拉信息 | 默认设置好了 | Array | 否 | 1.4+ |
| 右铃铛信息部分 | |||||
| 参数名 | 用途 | 默认值 | 类型 | 从属关系 | 版本支持 |
| isnews | 是否显示信息铃铛 | true | boolen | 否 | 1.4+ |
| newsimgsrc | 应用图标的来源路径 | "images/appicon/" | String | 否 | 1.4+ |
| newscenter_link | 消息中心页面链接 | 2.0:"default_html/newscenter.htm, 1.4:"newscenter.html" | String | 否 | 1.4+ |
| news_analogdata | 推送消息模拟数据 | / | <josn | 是 | 1.4+ |
| news_analogdata.appname | 推送消息的应用名 | 后台调用 | String | news_analogdata子类 | 1.4+ |
| news_analogdata.newsname | 推送消息名字 | 后台调用 | String | news_analogdata子类 | 1.4+ |
| news_analogdata.newsgettime | 推送消息时间 | 后台调用 | String | news_analogdata子类 | 1.4+ |
| news_analogdata.newscont | 推送消息内容 | 后台调用 | String | news_analogdata子类 | 1.4+ |
| 回调函数部分 | |||||
| 参数名 | 用途 | 默认值 | 类型 | 从属关系 | 版本支持 |
| setup | 常用设置按钮点击回调 | / | obj.function() | 否 | 1.4+ |
| qkynavafter | 整个头部渲染完后执行回调 | / | obj.function() | 否 | 1.4+ |
| navclick | 主导航列表点击后回调 | / | obj.function(t)返回当前 | 否 | 2.0+ |
| navhoverin | 主导航列表悬停进时回调 | / | obj.function(t)返回当前 | 否 | 2.0+ |
| navhoverout | 主导航列表悬停出时回调 | / | obj.function(t)返回当前 | 否 | 2.0+ |
模块编写要求为色彩统一，基础ui统一，基础交互统一！比如几个模块间的所有按钮，风格同一，交互一致！
基础ui（按钮，表单元素，表格，列表，导航，弹窗，分页，进度条等）复制bootstrap3.0的组件来进行个性定义！ bootstrap样式基础传送门
第四、CSS注意事项
1、基础的css由bs提供，需要覆盖bs的基础css在，qkybase.css里写并注明覆盖点。
2、自由css，或者特殊模块编写，另起一个css文件或者直接在qkybase.css下写并注明模块名，命名规范为：[模块功能点名英文_xxx],如，信息列表模块就infolist_xxx，每个模块的css前缀要保持一致。
3、类似的模块，写成一个模块css，不要在一个模块里用其他模块的css。
第五、示例查看
示例下载地址：https://github.com/zawet/qkyuibs；
特别声明，示例代码只能拿那些特殊模块的html+css+js模块，公用的html+css+js模块，请依照上面提供的初始化文件项目为准,避免公用模块混乱！
第六、js引用和编写
1、原始普通引用，纯js或者jquery；
在没有引用seajs的情况下，头部导航的初始化，要先引用comjs里的nav_add_nosea.js和iconfont.js，并在加载完页面后运行$(id).qkynav(opt);如图：
在这情况下，引用js文件只要直接原始引用方式就可以了，但要注意js之间的冲突！使用原生javascript或者引用jquery来进行脚本编写，或者用其他的库或者js框架来写，只要你喜欢！
2、推荐使用seajs来进行js引用；
在这情况下，引用js文件只要直接原始引用方式就可以了，但要注意js之间的冲突！使用原生javascript或者引用jquery来进行脚本编写，或者用其他的库或者js框架来写，只要你喜欢！
2、推荐使用seajs来进行js引用；
这里只是推荐使用seajs进行模块化js的引用和模块写法，不使用也是可以的！推荐使用是因为seajs能很好的整理整个项目，使项目看上去整洁有序！
了解js模块化
点这里了解什么是seajs
进阶seajs（后台开发引用其他js库或者模板必看）
1、要引用的js库或者插件，放置在dist文件夹里，命名按照插件的名字，里面要有版本区分。
2、引用js库或者插件，用seacofig的简化路径功能先简化路径，如下：
seajs.config({
// 别名配置
alias: {
'bs': 'bootstrap/3.3.0/js/bootstrap.min',//引用bootstrap前端框架
'nav': 'comjs/nav_add1.4',//引用整体头部
/****插件***/
'cal_fp':'flatpickr/flatpickr',//日历插件fp
'ec':'echarts/3.0/echarts.common.min',//数据视图插件ec
},
// 路径配置
paths: {
/****数据路径***/
'datas':'define',//默认数据存放路径
/****模块js路径***/
'com':'./js/common_cadr',//公用模块js存放路径
'sc1': './js/special_cadr1_1',//版本1特殊模块js存放路径
'sc2': './js/special_cadr1_2',//版本2特殊模块js存放路径
},
// 变量配置
vars: {
'locale': 'zh-cn'
}
});
然后在html文档底下进行调用，调用方式为：
seajs.use(["bs","nav"],function(){$("#qkynav").qkynav();});
默认加载后执行导航条生成函数$("#qkynav").qkynav();qkynav函数可以进行josn数据opt进行数据更改。
3、js模块写法，按照seajs建议的AMD框架写，用define闭包封装起来，避免污染全局！具体看下图示例：
/****
特殊模块功能点说明
****/
define(function(require,exports) {//dedine闭包
exports.havevalue = function() { //exports是让函数暴露在全局里，全局可以调用此模板后进行调用此函数
//dosomething...
};
exports.havevalue();//可以设置成自运行（加载模块时就执行模块执行体也就是构造函数）
});