本帖最后由 xiaomiwujiecao 于 2015-9-23 05:11 编辑
1.说在前面：本开源项目是为了使用流浪男的AUI框架快速布局，方便大家用sublime3工具开发APP， 2.AUI框架源文件见附件 二.下载安装说明： 下载软件安装包，解压之后将文件夹放到你的安装目录下面 这个文件夹 例如：
xxx\Sublime Text\Data\Packages\ ，就放到这个目录下面； 二.使用方法： 输入'aui-'命令(不包含引号)加上下列对应的命令，接着按下Tab键 例如： 1.输入 aui-content --> 再按下Tab键 2.输出内容为:*********************** <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell"></li> </ul> </div> *********************************** 补充说明：一般情况下，直接在html5页面直接调用，JS部分快速功能实现，只能在JS部分使用，以后能会慢慢封装好的方法进来 以下就是对应的命令----- ---页面布局类----- desc aui框架使用说明; content aui内容布局普通; content-padded 内容布局增加了10px的内边距 col-xs-3 格栅四等分 col-xs-6 格栅二等分 col-xs-2 格栅六等分 text-l 文本左对齐 text-r 文本右对齐 text-m 文本居中对齐 pull-l 元素左对齐 pull-r 元素右对齐 --------按钮和按钮颜色类--------- btn-dea 普通按钮灰色 btn-info 普通按钮天蓝色 btn-pri 普通按钮墨绿色 btn-suc 普通按钮草绿色 btn-war 普通按钮橙黄色 btn-red 普通按钮暗红色 block-dea 块按钮灰色 block-info 块按钮天蓝色 block-pri 块按钮墨绿色 block-suc 块按钮草绿色 block-war 块按钮橙黄色 block-red 块按钮暗红色 -------------字体大小类--------------------- h1 H1标题18px h2 H2标题17px h3 H3标题16px h4 H4标题16px h5 H5标题14px -------------列表文本颜色类----------------------- text-info 文本天蓝色 text-pri 文本墨绿色 text-suc 文本草绿色 text-war 文本橙黄色 text-red 文本暗红色 -------------背景颜色类----------------------- bg-info 背景天蓝色 bg-pri 背景墨绿色 bg-suc 背景草绿色 bg-war 背景橙黄色 bg-red 背景暗红色 -------------列表角标颜色类----------------------- badge-info 角标天蓝色 badge-pri 角标墨绿色 badge-suc 角标绿色 badge-war 角标橙黄色 badge-red 角标暗红色 -------------标签颜色类----------------------- label-dea 标签背景灰色 label-info 标签 背景天蓝色 label-pri 标签背景墨绿色 label-suc 标签背景草绿色 label-war 标签背景橙黄色 label-red 标签背景暗红色 ------------头部导航类--------------- hnav-desc 头部导航说明 hnav-dark 普通顶部导航栏 hnav-fdark fixStatusBar效果 hnav-t 带文字提示效果 hnav-pri 墨绿色顶部导航栏 hnav-info 翠绿色顶部导航栏 hnav-red 暗红色顶部导航栏 hnav-war 橙黄色图标顶部导航栏 ----------------底部导航栏-------------------- fnav-desc 底部导航栏说明 fnav-dark 底部导航栏暗色 fnav-pri 底部导航栏墨绿色 fnav-info 底部导航栏翠绿色 fnav-red 底部导航栏暗红色 fnav-suc 底部导航栏天蓝色 fnav-rbtn *底部导航切换JS部分** ------------------列表----------------------- list-con 单行列表标题效果 list-card 卡片式单行列表标题效果 list-arrow 箭头式单行列表标题效果 list-badge 角标箭头列表 list-img 缩略图列表 list-grid 图片列表 list-count 计数列表 list-contact 联系人列表 -------------九宫格、十六宫格------------------ grid-nine 九宫格 grid-sixteen 十六宫格 ----------------tab菜单------------------------- tab-line 下划线样式 tab-bar 边框样式 -------------------表单---------------------- form 表单 -------------------多选框------------------------ checkbox 多选框 ----------------单选框------------------------- radio 单选框 -------------------switch开关-------------------------- switch-dea 灰色默认switch开关 switch-pri 墨绿色默认switch开关 switch-info 翠绿色switch开关 switch-red 暗红switch开关 switch-suc 天蓝色switch开关 ---------------------聊天对话框------------------------ chat-sender 聊天发送者 chat-receiver 聊天接收者 chat-con 默认聊天页面 ------------------------图标------------------------------ 图标直接参照app里面定义的使用
-----------------------个性loading*JS部分*------------------------------ load-hide 隐藏效果 load-show 展示效果 load-con 全部代码
| 
发表于 2015-9-23 05:11:06
收藏
