apicloud apicloud

注册
查看: 9267|回复: 14

[案例源码] 【分享】AUI框架-Sublime-Sniippet快速APP布局开源项目

主题:
21
帖子:
160
云币:
1553

APICloud粉丝一周年

[案例源码] 【分享】AUI框架-Sublime-Sniippet快速APP布局开源项目

9267 14 | 发表于 2015-9-23 05:11:06 |阅读模式 | |
本帖最后由 xiaomiwujiecao 于 2015-9-23 05:11 编辑

1.说在前面:本开源项目是为了使用流浪男的AUI框架快速布局,方便大家用sublime3工具开发APP,
2.AUI框架源文件见附件
3.如果有问题、BUG或者建议,请联系我 邮箱:1410200695@qq.com,我是小米无节操,我为自己带盐!!!!!!
二.下载安装说明
下载软件安装包,解压之后将文件夹放到你的安装目录下面
这个文件夹
例如:

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                                全部代码


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

新手上路

UID:121106

主题:
3
帖子:
121
云币:
568
发表于 2015-9-23 07:40:23 |
超感謝這樣好效果~要來學習

新手上路

UID:100919

主题:
0
帖子:
53
云币:
555
发表于 2015-9-23 09:03:00 |
膜拜楼主,非常感谢!

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-9-23 09:09:49 |
感谢分享

主题:
3
帖子:
9
云币:
30
发表于 2015-9-23 09:13:25 |
楼主辛苦了

实习司机

UID:83019

主题:
19
帖子:
161
云币:
661

一周年

发表于 2015-9-25 16:31:51 |
记框架,不如我自己写 布局

驾校小白

UID:214150

主题:
1
帖子:
7
云币:
11
发表于 2015-12-17 22:41:33 |
给楼主100个赞!

马路杀手

UID:229848

主题:
97
帖子:
289
云币:
544
发表于 2015-12-30 12:47:41 |
留标识,非常感谢,学习中

驾校小白

UID:103432

主题:
0
帖子:
3
云币:
5
发表于 2016-1-4 17:10:11 |
先插个个眼在这儿,一会儿来看

主题:
32
帖子:
228
云币:
327
发表于 2016-1-7 18:41:36 |
非常不错!
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表