AUI为一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。

在目前市场上的UI框架中,大多数的框架以JS来实现过多的功能和布局。当然并不是否定JS在一个移动前端框架中的作用性,既然是前端框架侧重点要更多的考虑框架本身在一个项目中的资源消耗问题及如何提高用户的体验度。鉴于APICloud多窗口结构及原生模块的拼装,所以在移动端项目中AUI强调更多的是快速布局、灵活布局的实现,结合APICloud本身特性,提高开发效率及用户体验。

最新版本为v1.2.1

aui所有的样式均有aui-前缀。在布局app样式时,为了确保绘制和缩放的效果需要在<head>标签中添加 viewport 元数据标签
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
同时添加format-detection
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
加载上aui.css样式表,享受编程之美。
<link rel="stylesheet" type="text/css" href="../css/aui.css" />

注意,在win窗口中如果没有特别的处理,建议使用aui-win.css或aui-win.min.css

更新说明:版本号V1.2.1

一、轮播组件优化更新
新增当前页返回及获取总页数接口,方便用户扩展
二、基于轮播组件新增引导页
三、优化列表右滑菜单
四、全屏滑动组件优化重构
全屏滑动组件重新架构,提高流畅度,js文件为aui-slider-full.js,原js已弃用,具体使用方法参考官方文档
五、日历组件重新架构
对日历组件重新做了架构,具体使用方法参考官方文档
一、轮播组件优化更新
新增当前页返回及获取总页数接口,方便用户扩展
二、基于轮播组件新增引导页
三、优化列表右滑菜单
四、全屏滑动组件优化重构
全屏滑动组件重新架构,提高流畅度,js文件为aui-slider-full.js,原js已弃用,具体使用方法参考官方文档
五、日历组件重新架构
对日历组件重新做了架构,具体使用方法参考官方文档


更新说明:版本号 V 1.2.0

一、将aui.css字体图标样式分离
aui.css图标样式分离为aui-iconfont.css,该样式表在aui.css中已被默认加载,不需要二次引入。方便用户后期对字体图标的扩展管理

二、新增两套下拉刷新组件
推出了两套不同样式的下拉刷新组件,用户可自由扩展和二次开放,更方便前端人员的设计。

三、轮播组件
从引导页到幻灯片,AUI轮播组件轻松搞定,自定义分页样式,控制播放时间,循环,自动播放等

四、列表项滑动菜单
期待已久的列表项滑动显示菜单也终于发布了,用户可根据需求自定义按钮及样式,支持aui所有的布局列表嵌套

五、手风琴折叠面板
折叠面板控件也来了,这个就不多介绍了,可以嵌套任何组件

六、新增一套仿QQ游戏中心首页模板

七、AUI Flex优化,兼容安卓4.2

八、索引列表优化

九、喜欢AUI,就赶快分享吧


---v1.1.9 更新说明---

一、AUI Flex框架发布
二、aui.css新增边框样式
三、新增索引列表
script/aui-indexed-list.js  css/aui-indexed-list.css
四、aui-calendar.css优化
修复一处touch造成的bug

AUI Flex(aui-flex.css)采用12个栅格进行布局,与aui-col-xs-*相比更灵活性,可以快速布局出自己所需要的框架结构。结合aui.css,能彻底解决布局+样式的问题。

在AUI Flex中,使用了aui-flex-col(横向)和aui-flex-row(纵向)两种容器,只需要把栅格放入容器中即可。AUI Flex所有类支持嵌套布局,可任意进行排列。

使用AUI Flex可以方便解决垂直居中,多栏等高,等宽布局,任意对齐等。

(在安卓4.2及以下,由于对flex的支持度不高,需要手动调节子元素属性)

语法详解:

A.容器类

.aui-flex-col 横向排列
.aui-flex-row 纵向排列

B.栅格类

.aui-flex-item-*   *为从1-12数字,默认将屏幕进行12等分进行排列
.aui-flex-offset-*   *为从1-12数字,向左偏移量
.aui-flex-auto  自动填充宽度

C.对齐类

.aui-flex-top 顶端对齐
.aui-flex-bottom 底部对齐
.aui-flex-left 左对齐
.aui-flex-right 右对齐
.aui-flex-middle 垂直居中
.aui-flex-center 水平居中
.aui-flex-between 等宽对齐

代码片段

<div class="aui-flex-col aui-flex-center aui-border-tb">
    <div class="aui-flex-item-4 aui-flex-row aui-flex-middle aui-padded-10">
        <h3 class="aui-text-danger">淘抢购</h3>
        <p>可爱的你会喜欢</p>
        <img src="../image/f0.png">
    </div>
    <div class="aui-flex-item-8 aui-flex-col aui-border-l">
        <div class="aui-flex-item-12 aui-padded-10 aui-border-b">
            <div class="aui-flex-col">
                <div class="aui-flex-item-9">
                    <h3 class="aui-text-info">有好货</h3>
                    <p>好品味从挑剔开始</p>
                </div>
                <div class="aui-flex-item-3 aui-text-right"><img src="../image/f3.png"></div>
            </div>
        </div>
        <div class="aui-flex-item-6 aui-padded-10">
            <h5 class="aui-text-warning">爱逛街</h5>
            <p>疯狂赛车来袭</p>
            <img src="../image/f1.png">
        </div>
        <div class="aui-flex-item-6 aui-padded-10 aui-border-l">
            <h5 class="aui-text-success">必买清单</h5>
            <p>都帮你整理好啦</p>
            <img src="../image/f2.png">
        </div>
    </div>
</div>
<p class="aui-padded-10 aui-text-center">AUI Flex语法详解:</p>
<div class="aui-line-x"></div>
<div class="aui-content-padded" style="padding-top: 15px;">
    <p class="aui-text-danger">A.容器类</p>
    <p><mark>.aui-flex-col</mark> 横向排列</p>
    <p><mark>.aui-flex-row</mark> 纵向排列</p>
    <p class="aui-text-danger">B.栅格类</p>
    <p><mark>.aui-flex-item-*</mark>   *为从1-12数字,默认将屏幕进行12等分进行排列</p>
    <p><mark>.aui-flex-offset-*</mark>   *为从1-12数字,向左偏移量</p>
    <p><mark>.aui-flex-auto</mark>  自动填充宽度</p>
    <p class="aui-text-danger">C.对齐类</p>
    <p><mark>.aui-flex-top</mark> 顶端对齐</p>
    <p><mark>.aui-flex-bottom</mark> 底部对齐</p>
    <p><mark>.aui-flex-left</mark> 左对齐</p>
    <p><mark>.aui-flex-right</mark> 右对齐</p>
    <p><mark>.aui-flex-middle</mark> 垂直居中</p>
    <p><mark>.aui-flex-center</mark> 水平居中</p>
    <p><mark>.aui-flex-between</mark> 等宽对齐</p>
</div>
<p class="aui-padded-10 aui-text-center">其他案例样式(一)图片排列</p>
<div class="aui-line-x"></div>
<div class="aui-content">
    <div class="aui-flex-col img-list">
        <div class="aui-flex-item-4">
            <img src="../image/demo1.png">
        </div>
        <div class="aui-flex-item-4">
            <img src="../image/demo2.png">
        </div>
        <div class="aui-flex-item-4">
            <img src="../image/demo3.png">
        </div>
        <div class="aui-flex-item-4">
            <img src="../image/demo4.png">
        </div>
        <div class="aui-flex-item-4">
            <img src="../image/demo5.png">
        </div>
        <div class="aui-flex-item-4">
            <img src="../image/demo6.png">
        </div>
    </div>
</div>
<p class="aui-padded-10 aui-text-center">其他案例样式(二)</p>
<div class="aui-line-x"></div>
<div class="aui-content">
    <div class="aui-flex-col">
        <div class="aui-flex-item-3 aui-border-r">
            <ul class="aui-list-view demo-box" style="margin-bottom: 0;">
                <li class="aui-list-view-cell">分类一</li>
                <li class="aui-list-view-cell">分类二</li>
                <li class="aui-list-view-cell">分类三</li>
                <li class="aui-list-view-cell">分类四</li>
                <li class="aui-list-view-cell">分类五</li>
                <li class="aui-list-view-cell">分类六</li>
                <li class="aui-list-view-cell">分类七</li>
                <li class="aui-list-view-cell">分类八</li>
                <li class="aui-list-view-cell">分类九</li>
                <li class="aui-list-view-cell">分类十</li>
            </ul>
        </div>
        <div class="aui-flex-item-9">
            <ul class="aui-list-view demo-box" style="margin-bottom: 0;">
                <li class="aui-list-view-cell aui-img">
                    <img class="aui-img-object aui-pull-left" src="../image/demo2.png">
                    <div class="aui-img-body">
                        图文列表
                        <p>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img">
                    <img class="aui-img-object aui-pull-left" src="../image/demo5.png">
                    <div class="aui-img-body">
                        图文列表
                        <p class='aui-ellipsis-2'>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img">
                    <div class="aui-img-body">
                        图文列表
                        <p class='aui-ellipsis-2'>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img">
                    <img class="aui-img-object aui-pull-left" src="../image/demo6.png">
                    <div class="aui-img-body">
                        图文列表
                        <p class='aui-ellipsis-2'>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

在v.1.2.1版本中对全屏滑动组件做了重新架构,js重新命名为aui-slider-full.js,css文件为aui-slider-full.css

开发者可以通过direction 来控制水平或垂直滑动方向

direction值为(只识别小写)

x  水平

y  垂直

代码片段

<link rel="stylesheet" href="../css/aui-slider-full.css" />
<script src="../script/aui-slider-full.js"></script>
<script type="text/javascript">
    var sliderFull = new auiSliderFull({
        direction:'x'
    });
</script>

QQ交流群:519956746  344869952


下载 讨论

AUI的布局容器有两种.aui-content、.aui-card和.aui-content-padded;用户可以根据实际情况来定义。.aui-content-padded为增加了10px的内边距。

.aui-card为圆角卡片式容器。

代码片段

<div class="aui-content">...</div>
<div class="aui-content-padded">...</div>
<div class="aui-card">...</div>
<div class="aui-content">
<ul class="aui-list-view">
<li class="aui-list-view-cell"></li>
</ul>
</div>

AUI的柵格同样是采用12等分的形式,.aui-col-xs-*

例如,如果对容器进行6等分,<div class="aui-col-xs-2"></div>

文字类对齐

.aui-text-left

.aui-text-center

.aui-text-right


元素对齐

.aui-pull-left

.aui-pull-right

代码片段

<div class="aui-content">
  <div class="aui-col-xs-3 aui-bg-primary">aui-col-xs-3</div>
  <div class="aui-col-xs-3 aui-bg-info">aui-col-xs-3</div>
  <div class="aui-col-xs-3 aui-bg-danger">aui-col-xs-3</div>
  <div class="aui-col-xs-3 aui-bg-warning">aui-col-xs-3</div>
</div>
<div class="aui-content">
  <div class="aui-col-xs-3 aui-bg-primary">aui-col-xs-3</div>
  <div class="aui-col-xs-6 aui-bg-info">aui-col-xs-6</div>
  <div class="aui-col-xs-3 aui-bg-warning">aui-col-xs-3</div>
</div>
AUI支持为<a><button><input><div>增加.auibtn来使用按钮效果。使用.aui-btn-*来选择使用AUI提供的样式

在app中建议不要使用<button>标签来定义按钮

代码片段

/*普通按钮*/
<div class="aui-btn">默认按钮(default)</div>
<div class="aui-btn aui-btn-primary" onclick="demo();">默认按钮(primary)</div>
<div class="aui-btn aui-btn-success">默认按钮(success)</div>
<div class="aui-btn aui-btn-info">默认按钮(info)</div>
<div class="aui-btn aui-btn-warning">默认按钮(warning)</div>
<div class="aui-btn aui-btn-danger">默认按钮(danger)</div>
<div class="aui-btn aui-btn-info"><span class="aui-iconfont aui-icon-roundcheck"></span>图标按钮</div>
<div class="aui-btn aui-btn-info">图标按钮<span class="aui-badge aui-badge-warning">12</span></div>
/*块按钮类*/
<div class="aui-btn aui-btn-block">默认按钮(default)</div>
<div class="aui-btn aui-btn-primary aui-btn-block">默认按钮(primary)</div>
<div class="aui-btn aui-btn-success aui-btn-block">默认按钮(success)</div>
<div class="aui-btn aui-btn-info aui-btn-block">默认按钮(info)</div>
<div class="aui-btn aui-btn-warning aui-btn-block">默认按钮(warning)</div>
<div class="aui-btn aui-btn-danger aui-btn-block">默认按钮(danger)</div>
/*块按钮类 - 默认增加10px底部外边距*/
<div class="aui-btn aui-btn-block aui-btn-outlined">默认按钮(default)</div>
<div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined">默认按钮(primary)</div>
<div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined">默认按钮(success)</div>
<div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">默认按钮(info)</div>
<div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined">默认按钮(warning)</div>
<div class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined">默认按钮(danger)</div>

AUI对文字除了在颜色做了简单处理外,对于单标签的文字定义也处理了一下。

h1 —— 18px

h2 —— 17px

h3 —— 16px

h4 —— 16px

h5 —— 14px (color:#8f8f94)

p —— 14px (color:#848f94)

a —— color:#0062cc

代码片段


新增两套下拉刷新组件,用户可自由进行扩展,具体案例样式可以下载app进行体验

一、aui-pull-refresh.css   aui-pull-refresh.js


二、aui-pull-refresh-2.css  aui-pull-refresh-2.js

使用时需要引入css样式及js,数据加载完成后调用cancelLoading()取消下拉加载,参考代码如下

代码片段

<script type="text/javascript">
var pullRefresh = new auiPullToRefresh({
callback: loadingCallback,//下拉成功后操作
textDown:'下拉刷新'
})
function loadingCallback(status) {
if(status=='success'){
setTimeout(function(){
var wrap = document.getElementById("list")
var lis = wrap.querySelectorAll('li');
for (var i = lis.length, length = i + 10; i < length; i++) {
var html = '<li class="aui-list-view-cell">新加载'+(i+1)+'</li>';
wrap.insertAdjacentHTML('afterbegin', html);
}
pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
},1500)
}
}
</script>
<script type="text/javascript">
var pullRefresh = new auiPullToRefresh({
container:          document.querySelector('.aui-load-container'),
"pullImage":        "../image/pull_refresh.png", //下拉时显示的图片,带旋转
"loadingImage":     "../image/pull_refresh_2.png", //加载中的图片
"triggerDistance":  '200', //下拉高度
"callback":         loadingCallback //刷新回调
});
var loadingCallback = function (status) {
if(status=='success'){
setTimeout(function(){
var wrap = document.getElementById("list")
var lis = wrap.querySelectorAll('li');
for (var i = lis.length, length = i + 10; i < length; i++) {
var html = '<li class="aui-list-view-cell">新加载'+(i+1)+'</li>';
wrap.insertAdjacentHTML('afterbegin', html);
}
pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
},1500)
}
}
</script>

AUI的色值采用目前算是比较主流的色调,字体、背景、按钮、角标、标签觉采用aui-*-warning的方式:

文字类:.aui-text-*

背景颜色:.aui-bg-*

按钮:.aui-btn-*

角标:.aui-badge-*

标签:.aui-label-*

色值对照:

.aui-*-primary —— #1abc9c

.aui-*-success —— #2ecc71

.aui-*-info —— #3498db

.aui-*-warning —— #f1c40f

.aui-*-danger —— #e74c3c

采用css3 column 进行的瀑布流样式布局,使用瀑布流布局时需引入api.js 和一个只有1kb大小的 aui-waterfall.js

代码片段

<script type="text/javascript" src="../script/aui-waterfall.js" ></script>
<script type="text/javascript">
$aui.waterfall($api.byId("aui-waterfall"),{
    col:2,//列数
    padding:10,//容器内边距
    space:10//列间距
});
</script>
<div class="aui-content">
<ul class="aui-waterfall" id="aui-waterfall"> 
    <li>
        <div class="aui-waterfall-header">
            <img src="../image/demo1.png" />
        </div>
       <div class="aui-waterfall-body">
            瀑布流的效果
        </div>
        <div class="aui-waterfall-footer"> 
            <span class="aui-text-info">
                流浪男
            </span>
            <span class="aui-pull-right">
                <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
            </span>
        </div>
    </li>
</ul>
</div>

提供了几个默认色值的小标签效果,用户可以根据自己的需要来对颜色进行自由配置。.aui-label来定义标签,.aui-label-*为样式。默认的样式有以下:

代码片段

<style>
.aui-label-default {background-color: #ecf0f1;color: #8f8f94;}
.aui-label-primary {background-color: #1abc9c;}
.aui-label-success {background-color: #2ecc71;}
.aui-label-info {background-color: #3498db;}
.aui-label-warning {background-color: #f1c40f;}
.aui-label-danger {background-color: #e74c3c;}
</style>
<span class="aui-label-default"></span>

AUI的顶部导航为6个色调(增加了.aui-bar-dark   color为#34495e),并对$api.fixStatusBar(el)做了兼容出来,在结合该属性使用时需要注意一点。

如果导航栏没有左右按钮时,必须要使用

<header class="aui-bar aui-bar-nav aui-bar-warning">AUI</header>

<header id="header"><div class="aui-bar aui-bar-nav"><div class="aui-title">名称</div></div></header>;

如果做有左右按钮可以直接:

<header id="header  class="aui-bar aui-bar-nav"><div class="aui-title">名称</div></header>;


代码片段

<header class="aui-bar aui-bar-nav aui-bar-dark">顶部导航栏</header>
<header class="aui-bar aui-bar-nav aui-bar-dark">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>返回
    </a>
    <div class="aui-title">顶部导航栏</div>
</header>

在1.1.9版本中新增了边框样式,aui-border-* 边框样式解决了移动端1px边框变粗问题。

新增边框样式分,四周边框,圆角边框,上边框,下边框,左边框,有边框,上下边框

.aui-border-t 上边框

.aui-border-b 下边框

.aui-border-tb 上下边框

.aui-border-l 左边框

.aui-border-r 右边框

.aui-border 边框

.aui-border.aui-border-radius  圆角边框

代码片段

<div class="aui-border-t">上边框</div>
<div class="aui-border-b">下边框</div>
<div class="aui-border-l">左边框</div>
<div class="aui-border-r">右边框</div>
<div class="aui-border-tb">上下边框</div>
<div class="aui-border">边框</div>
<div class="aui-border aui-border-radius">圆角边框</div>

底部工具栏进行了重写,可以结合api.openFrameGroup()完成切换

代码片段

<footer class="aui-nav" id="aui-footer">
    <ul class="aui-bar-tab">
        <li class="active-warning" id="tabbar1" onclick="randomSwitchBtn(this,'栏目1',0)">
            <span class="aui-iconfont aui-icon-favor"></span>
            <p>栏目1</p>
        </li>
        <li id="tabbar2" onclick="randomSwitchBtn(this,'栏目2',1)">
            <span class="aui-iconfont aui-icon-mark"></span>
            <p>栏目2</p>
        </li>
        <li id="tabbar3" onclick="randomSwitchBtn(this,'栏目3',2)">
            <span class="aui-iconfont aui-icon-like"></span>
            <p>栏目3</p>
        </li>
        <li id="tabbar4" onclick="randomSwitchBtn(this,'栏目4',3)">
            <span class="aui-iconfont aui-icon-my"></span>
            <p>栏目4</p>
        </li>
    </ul>
</footer>
<script type="text/javascript">
    apiready = function(){
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header); 
        var headerPos = $api.offset(header);
        var body_h = $api.offset($api.dom('body')).h;
        var footer_h = $api.offset($api.byId('aui-footer')).h;
        api.openFrameGroup ({
            name: 'footer_tab_demo',
            scrollEnabled:true,
            rect:{x:0, y:headerPos.h, w:'auto', h:body_h - headerPos.h - footer_h},
            index:0,
            preload:3,
            frames:
            [{
                name: 'footer_tab_1', 
                url: 'footer_tab_1.html', 
                bounces:false
            },{
                name: 'footer_tab_2', 
                url: 'footer_tab_2.html', 
                bounces:false
            },{
                name: 'footer_tab_3', 
                url: 'footer_tab_3.html', 
                bounces:false
            },{
                name: 'footer_tab_4', 
                url: 'footer_tab_4.html', 
                bounces:false
            }]
        }, function(ret, err){
            var footer = $api.byId('aui-footer');
            var footerAct = $api.dom(footer, '.aui-bar-tab li.active-warning');
            $api.removeCls(footerAct, 'active-warning');
            var name = ret.name;
            var index = ret.index;
            if(index==0){
                $api.text($api.byId('header-title'),'栏目1');
                $api.addCls($api.byId('tabbar1'), 'active-warning');
            }else if(index==1){
                $api.text($api.byId('header-title'),'栏目2');
                $api.addCls($api.byId('tabbar2'), 'active-warning');
            }else if(index==2){
                $api.text($api.byId('header-title'),'栏目3');
                $api.addCls($api.byId('tabbar3'), 'active-warning');
            }else if(index==3){
                $api.text($api.byId('header-title'),'栏目4');
                $api.addCls($api.byId('tabbar4'), 'active-warning');
            }
        });
        
        $api.addEvt($api.byId('back'), 'click', function(){
            api.closeWin();
        });
    };
    function randomSwitchBtn(obj, name, index) {
        $api.text($api.byId('header-title'),name);
        var footer = $api.byId('aui-footer');
        var footerAct = $api.dom(footer, '.aui-bar-tab li.active-warning');
        $api.removeCls(footerAct, 'active-warning');
        $api.addCls(obj, 'active-warning');
        api.setFrameGroupIndex({
            name: 'footer_tab_demo',
            index: index
        });
    }
</script>

根据首字母查询的索引列表

新增文件

aui-indexed-list.css

aui-indexed-list.js

代码片段

<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-indexed-list.css" />
<div class="aui-searchbar-wrap fixed" id="group-search">
    <div class="aui-searchbar aui-border-radius">
        <i class="aui-iconfont aui-icon-search"></i>
        <div class="aui-searchbar-text">输入首字母</div>
        <div class="aui-searchbar-input">
        <form action="javascript:search();">
        <input type="text" placeholder="输入首字母" id="aui-searchbar-input">
        </form>
        </div>
        <i class="aui-iconfont aui-icon-roundclosefill" id="aui-searchbar-clear"></i>
    </div>
    <div class="aui-searchbar-cancel aui-text-info" id="aui-searchbar-cancel">取消</div>
</div>
<div class="aui-indexed-list">
    <ul class="aui-list-view aui-indexed-list-view aui-in" id="group-*" data-group="*">
    <li class="aui-list-view-cell aui-indexed-list-view-group">
    <span class="aui-iconfont aui-icon-favorfill" data-value="*"></span>星标朋友
    </li>
        <li class="aui-list-view-cell">
            <i class="aui-iconfont aui-icon-myfill aui-bg-info"></i>张三
        </li>
        <li class="aui-list-view-cell">
            <i class="aui-iconfont aui-icon-myfill aui-bg-success"></i>李四
        </li>
        <li class="aui-list-view-cell">
            <i class="aui-iconfont aui-icon-myfill aui-bg-danger"></i>王五
        </li>
        <li class="aui-list-view-cell">
            <i class="aui-iconfont aui-icon-myfill aui-bg-warning"></i>张飞
        </li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-A" data-group="A">A</li>
<li class="aui-list-view-cell">阿拉善盟</li>
<li class="aui-list-view-cell">安庆</li>
<li class="aui-list-view-cell" data-tags="anyang">安阳</li>
<li class="aui-list-view-cell" data-tags="aba">阿坝藏族羌族自治州</li>
<li class="aui-list-view-cell" data-tags="anshun">安顺</li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-B" data-group="B">B</li>
<li class="aui-list-view-cell" data-tags="beijing">北京</li>
<li class="aui-list-view-cell" data-tags="baoding">保定</li>
<li class="aui-list-view-cell" data-tags="baotou">包头</li>
<li class="aui-list-view-cell" data-tags="benxi">本溪</li>
<li class="aui-list-view-cell" data-tags="baishan">白山</li>
<li class="aui-list-view-cell" data-tags="baicheng">白城</li>
<li class="aui-list-view-cell" data-tags="haozhou">毫州</li>
<li class="aui-list-view-cell" data-tags="binzhou">滨州</li>
<li class="aui-list-view-cell" data-tags="binhai">滨海</li>
<li class="aui-list-view-cell" data-tags="beihai">北海</li>
<li class="aui-list-view-cell" data-tags="baise">百色</li>
<li class="aui-list-view-cell" data-tags="baoshan">保山</li>
<li class="aui-list-view-cell" data-tags="baoji">宝鸡</li>
<li class="aui-list-view-cell" data-tags="baiyin">白银</li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-C" data-group="C">C</li>
<li class="aui-list-view-cell" data-tags="chengde">承德</li>
<li class="aui-list-view-cell" data-tags="cangzhou">沧州</li>
<li class="aui-list-view-cell" data-tags="chifeng">赤峰</li>
<li class="aui-list-view-cell" data-tags="chaoyang">朝阳</li>
<li class="aui-list-view-cell" data-tags="cangzhou">常州</li>
<li class="aui-list-view-cell" data-tags="chizhou">池州</li>
<li class="aui-list-view-cell" data-tags="changsha">长沙</li>
<li class="aui-list-view-cell" data-tags="changde">常德</li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-D" data-group="D">D</li>
<li class="aui-list-view-cell" data-tags="datong">大同</li>
<li class="aui-list-view-cell" data-tags="dalian">大连</li>
<li class="aui-list-view-cell" data-tags="daqing">大庆</li>
<li class="aui-list-view-cell" data-tags="dongying">东营</li>
<li class="aui-list-view-cell" data-tags="dezhou">德州</li>
<li class="aui-list-view-cell" data-tags="dongguan">东莞</li>
<li class="aui-list-view-cell" data-tags="deyang">德阳</li>
<li class="aui-list-view-cell" data-tags="dingxi">定西</li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-E" data-group="E">E</li>
<li class="aui-list-view-cell" data-tags="eerduosi">鄂尔多斯</li>
<li class="aui-list-view-cell" data-tags="ezhou">鄂州</li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-F" data-group="F">F</li>
<li class="aui-list-view-cell" data-tags="fushun">抚顺</li>
<li class="aui-list-view-cell" data-tags="fuxin">阜新</li>
<li class="aui-list-view-cell" data-tags="fuzhou">福州</li>
<li class="aui-list-view-cell" data-tags="fuzhou">抚州</li>
<li class="aui-list-view-cell" data-tags="foshan">佛山</li>
<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-#" data-group="#">#</li>
<li class="aui-list-view-cell"> ^.^</li>
<li class="aui-list-view-cell">!!*_*!!</li>
</ul>
</div>
<div class="aui-indexed-list-toast"></div>
<div class="aui-indexed-list-bar">
<a>
<i class="aui-iconfont aui-icon-search" data-value="search"></i>
</a>
<a>
<i class="aui-iconfont aui-icon-favorfill" data-value="*"></i>
</a>
<a data-value="A">A</a>
<a data-value="B">B</a>
<a data-value="C">C</a>
<a data-value="D">D</a>
<a data-value="E">E</a>
<a data-value="F">F</a>
<a data-value="G">G</a>
<a data-value="H">H</a>
<a data-value="I">I</a>
<a data-value="J">J</a>
<a data-value="K">K</a>
<a data-value="L">L</a>
<a data-value="M">M</a>
<a data-value="N">N</a>
<a data-value="O">O</a>
<a data-value="P">P</a>
<a data-value="Q">Q</a>
<a data-value="R">R</a>
<a data-value="S">S</a>
<a data-value="T">T</a>
<a data-value="U">U</a>
<a data-value="V">V</a>
<a data-value="W">W</a>
<a data-value="X">X</a>
<a data-value="Y">Y</a>
<a data-value="Z">Z</a>
<a data-value="#">#</a>
</div>
<script type="text/javascript" src="../script/aui-tap.js" ></script>
<script type="text/javascript" src="../script/aui-indexed-list.js" ></script>

任何一个app都会有列表类的布局,使用AUI基本可以满足大多数开发者的需求。AUI提供的默认布局样式有普通列表,图文列表,图片列表,计数列表(购物车效果),类似通讯录效果,开发者可以结合栅格系统来布局出更丰富的样式。

学习这块,单凭看是没有多大效果的,建议大家多练习一下。

.aui-list-view 普通列表类的布局容器,.aui-list-view-cell列表项


代码片段

<p class="aui-text-center">.aui-content 普通列表</p>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            单行列表标题效果
        </li>
    </ul>
</div>
<p class="aui-text-center">新增 下划线缩进 15px .aui-in</p>
<div class="aui-content">
    <ul class="aui-list-view aui-in">
        <li class="aui-list-view-cell">
            单行列表标题效果
        </li>
    </ul>
</div>
<p class="aui-text-center">新增 i.aui-iconfont</p>
<div class="aui-content">
    <ul class="aui-list-view aui-in">
        <li class="aui-list-view-cell">
            <i class="aui-iconfont aui-icon-edit aui-bg-info"></i>单行列表标题效果
        </li>
    </ul>
</div>
<p class="aui-text-center">一条数据列表效果</p>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            单行列表标题效果
        </li>
    </ul>
</div>
<p class="aui-text-center">.aui-content-padded</p>
<div class="aui-content-padded">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            卡片式单行列表标题效果
        </li>
    </ul>
</div>
<p class="aui-text-center">.aui-card 圆角卡片有边框</p>
<div class="aui-card">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            卡片式单行列表标题效果
        </li>
    </ul>
</div>
<p class="aui-text-center">.aui-card .aui-noborder 圆角卡片无边框</p>
<div class="aui-card aui-noborder">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            卡片式单行列表标题效果
        </li>
    </ul>
</div>

带有角标或者箭头的列表效果在APP中也是非常常见的。可以参考实例代码来使用

代码片段

<p class="aui-text-center">.aui-content</p>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <div class="aui-arrow-right">带有角标和箭头的列表</div>
        </li>
        <li class="aui-list-view-cell">
            <div class="aui-arrow-right aui-ellipsis-1">
            如果标题太长可以加一个省略来控制一下如果标题太长可以加一个省略来控制一下
            </div>
        </li>
    </ul>
</div>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">
            带有角标和箭头的列表
            <span class="aui-badge">12</span>
            </a>
        </li>
    </ul>
</div>
<p class="aui-text-center">.aui-card .aui-noborder</p>
<div class="aui-card aui-noborder">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">带有角标和箭头的列表</a>
        </li>
    </ul>
</div>
<p class="aui-text-center">.aui-card</p>
<div class="aui-card">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">
                带有角标和箭头的列表
                <span class="aui-badge aui-badge-warning">12</span>
            </a>
        </li>
    </ul>
</div>

带有缩略图的列表效果,在.aui-list-view-cell 增加.aui-img即可实现,可以通过.aui-pull-left来控制图片的位置

代码片段

<p class="aui-text-center">.aui-list-view-cell .aui-img</p>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-img">
            <img class="aui-img-object aui-pull-left" src="../image/demo2.png">
            <div class="aui-img-body">
                图文列表
                <p>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
            </div>
        </li>
        <li class="aui-list-view-cell aui-img">
            <div class="aui-img-body">
                图文列表
                <p class='aui-ellipsis-2'>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
            </div>
        </li>
    </ul>
</div>
<p class="aui-text-center">aui-img-object增加 aui-pull-right</p>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-img">
            <img class="aui-img-object aui-pull-right" src="../image/demo4.png">
            <div class="aui-img-body">
                图文列表
                <p class='aui-ellipsis-2'>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
            </div>
        </li>
    </ul>
</div>
<p class="aui-text-center">aui-card aui-noborder</p>
<div class="aui-card aui-noborder">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-img">
            <img class="aui-img-object aui-pull-left" src="../image/demo4.png">
            <div class="aui-img-body">
                图文列表
                <p class='aui-ellipsis-2'>图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略</p>
            </div>
        </li>
    </ul>
</div>

图片列表效果接住柵格布局决定一行显示数量。.aui-list-view结合.aui-gird-view来使用。

图片布局没有对图片高度进行控制,也就是会按原比例来显示。用户可以根据实际情况来限制下

代码片段

<div class="aui-content">
    <p class="aui-padded-10">全是缩略图的布局样式</p>
    <ul class="aui-list-view aui-grid-view">
        <li class="aui-list-view-cell aui-img aui-col-xs-4">
            <img class="aui-img-object" src="../image/demo3.png">
        </li>
    </ul>
    <p class="aui-padded-10">图片列表 一行两列,借助我们的栅格来实现</p>
    <ul class="aui-list-view aui-grid-view">
        <li class="aui-list-view-cell aui-img aui-col-xs-6">
            <img class="aui-img-object" src="../image/demo4.png">
            <div class="aui-img-body">
                图文列表
            </div>
        </li>
    </ul>
    
</div>

计数列表是模仿一个购物车类的列表实现的效果,。aui-list-view-cell 和 .aui-img aui-counter-list搭配使用。通过使用aui-check和aui-radio来实现选择效果。对于加减号按钮同样可以使用色值里面的说明进行配置。

代码片段

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-img aui-counter-list">
            <input class="aui-pull-left aui-checkbox" type="checkbox">
            <img class="aui-img-object aui-pull-left" src="../image/demo1.png">
            <div class="aui-img-body">
                计数列表
                <div class="aui-counter-box">
                    <div class="aui-pull-left aui-text-danger">¥ 88元</div>
                    <div class="aui-counter aui-pull-right">
                        <div class="aui-counter-minus aui-disabled"></div>
                        <input class="aui-counter-input" type="text" value="1">
                        <div class="aui-counter-plus"></div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-img aui-counter-list">
            <input class="aui-pull-left aui-radio" type="radio" name="demo">
            <img class="aui-img-object aui-pull-left" src="../image/demo4.png">
            <div class="aui-img-body">
                计数列表
                <div class="aui-counter-box">
                    <div class="aui-pull-left aui-text-danger">¥ 88元</div>
                    <div class="aui-counter aui-danger aui-pull-right">
                        <div class="aui-counter-minus aui-disabled"></div>
                        <input class="aui-counter-input" type="text" value="1">
                        <div class="aui-counter-plus"></div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

当然这不仅局限于通讯录的样式,好友类、消息类、附近的人都可以用这个来实现,右侧也可以加上箭头。想要更丰富一点那就自己动手再自定义一下

使用效果跟.aui-list-view是一样的,无非在这我们使用.aui-user-view来完成


代码片段

<div class="aui-content">
    <ul class="aui-user-view">
        <li class="aui-user-view-cell aui-img">
            <img class="aui-img-object aui-pull-left" src="../image/demo4.png">
            <div class="aui-img-body">
                <span>流浪男<em>11.1KM</em></span>
                <p class='aui-ellipsis-1'>北京轻元素网络科技</p>
            </div>
        </li>
    </ul>
</div>
<p class="aui-padded-10">.aui-user-view同级加入.aui-in可实现下划线缩进</p>
<div class="aui-content">
    <ul class="aui-user-view aui-in">
        <li class="aui-user-view-cell aui-img">
            <img class="aui-img-object aui-pull-left" src="../image/demo4.png">
            <div class="aui-img-body">
                <span>流浪男<em>11.1KM</em></span>
                <p class='aui-ellipsis-1'>北京轻元素网络科技</p>
            </div>
        </li>
    </ul>
</div>

AUI里面定义了一套九宫格的样式,貌似现在大屏手机使用九宫格显得有些空虚,就顺便弄了个十六宫格,使用.aui-grid-nine.aui-grid-sixteen来布局。宫格类的操作因为加了线条分割的样式,所以在布局的时候最好为9或16的倍数,并且最大为9或16个块,最少为3或4。同样的也可以结合.aui-card

代码片段

<p>九宫格</p>
<div class="aui-content">
    <ul class="aui-grid-nine">
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-edit aui-text-primary"></span>
            <p>栏目</p>
        </li>
    </ul>
</div>
<p>十六宫格</p>
<div class="aui-content">
    <ul class="aui-grid-sixteen">
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-pay aui-text-primary"></span>
            <p>栏目</p>
        </li>
    </ul>
</div>

TAB切换样式

色调主题有:默认配色及aui-tab-success, aui-tab-info, aui-tab-warning, aui-tab-danger, aui-tab-dark

代码片段

/*底部带有边框样式*/
<div class="aui-tab">
    <ul class="aui-tab-nav">
        <li class="active">标签一</li>
        <li>标签二</li>
        <li>标签三</li>
    </ul>
</div>
/*有边框的样式*/
<div class="aui-content-padded">
    <div class="aui-tab">
        <ul class="aui-tab-nav aui-tab-border">
            <li class="active">标签一</li>
            <li>标签二</li>
            <li>标签三</li>
            <li>标签四</li>
        </ul>
    </div>
</div>
/*其它色系*/
<div class="aui-tab aui-tab-success">
    <ul class="aui-tab-nav">
        <li class="active">标签一</li>
        <li>标签二</li>
        <li>标签三</li>
    </ul>
</div>

表单效果进行了全面优化,使用.aui-form定义表单容器,.aui-input-row来布局行。

.aui-input-addon为输入框名称(label),可以在其内插入字体图标,使用.aui-pull-left  .aui-pull-righ控制位置。

.aui-input  定义输入框效果。

代码片段

/*普通样式*/
<div class="aui-content">
    <div class="aui-form">
        <div class="aui-input-row aui-warning">
            <label class="aui-input-addon">name</label>
            <input type="text" class="aui-input" value="错误警告"/>
            <i class="aui-input-addon aui-iconfont aui-icon-warnfill"></i>
        </div>
        <div class="aui-input-row aui-success">
            <label class="aui-input-addon">name</label>
            <input type="text" class="aui-input" value="输入"/>
            <i class="aui-input-addon aui-iconfont aui-icon-roundcheckfill"></i>
        </div>
        <div class="aui-input-row">
            <span class="aui-input-addon">pass</span>
            <input type="password" class="aui-input" placeholder="password"/>
        </div>
        <div class="aui-input-row">
            <span class="aui-input-addon">age</span>
            <div class="aui-range">
                <input type="range" class="aui-range-primary" value="30" max="100" min="1" step="1" id="range" />
            </div>
        </div>
        <div class="aui-btn-row">
            <div class="aui-btn aui-btn-success" onclick="return false;">确认</div>&nbsp;&nbsp;
            <div class="aui-btn aui-btn-warning" onclick="return false;">取消</div>
        </div>
    </div>
</div>
/*带图标的表单*/
<div class="aui-content">
    <div class="aui-form">
        <div class="aui-input-row">
            <i class="aui-input-addon  aui-iconfont aui-icon-people"></i>
            <input type="text" class="aui-input" placeholder="name"/>
        </div>
        <div class="aui-btn-row">
            <div class="aui-btn aui-btn-success" onclick="return false;">确认</div>&nbsp;&nbsp;
            <div class="aui-btn aui-btn-warning" onclick="return false;">取消</div>
        </div>
    </div>
    
</div>
/*带图标的表单*/
<div class="aui-content">
    <div class="aui-form">
        <div class="aui-input-row">
            <i class="aui-input-addon  aui-iconfont aui-icon-people"></i>
            <input type="text" class="aui-input" placeholder="name"/>
        </div>
    </div>
</div>
/*圆角名片样式,带有边框*/
<div class="aui-card">       
    <div class="aui-form">
        <div class="aui-input-row">
            <span class="aui-input-addon">name</span>
            <input type="text" class="aui-input" placeholder="name"/>
        </div>
        <div class="aui-btn-row">
            <div class="aui-btn aui-btn-block aui-btn-success" onclick="return false;">确认</div>
        </div>
    </div>
</div>
/*圆角名片样式,无边框*/
<div class="aui-card aui-noborder">       
    <div class="aui-form">
        <div class="aui-input-row">
            <span class="aui-input-addon">name</span>
            <input type="text" class="aui-input" placeholder="name"/>
        </div>
    </div>
</div>

checkbox多选框,根据色值说明选择样式,有选中、未选和禁止选择效果,可以结合.aui-pull-left  .aui-pull-right来控制位置

代码片段

<div class="aui-content">
    <div class="aui-form">
        <div class="aui-input-row">
            <label class="aui-input-addon">checkbox</label>
            <div class="aui-pull-right">
                <input class="aui-checkbox" type="checkbox">
                <div class="aui-checkbox-name">选项一</div>
                <input class="aui-checkbox" type="checkbox">
                <div class="aui-checkbox-name">选项二</div>
            </div>    
        </div>
        <div class="aui-input-row">
            <label class="aui-input-addon">checkbox</label>
            <input class="aui-pull-right aui-checkbox aui-checkbox-info" type="checkbox">
        </div>
    </div>
</div>

radio单选框,可根据色值修改样式,通过使用.aui-pull-left  .aui-pull-right可以控制位置

代码片段

<div class="aui-content">
    <div class="aui-form">
        <div class="aui-input-row">
            <label class="aui-input-addon">radio</label>
            <div class="aui-pull-right">
                <input class="aui-radio" type="radio" name="demo1" checked><div class="aui-radio-name">选项一</div>
                <input class="aui-radio" type="radio" name="demo1"><div class="aui-radio-name">选项二</div>
            </div>
        </div>
        <div class="aui-input-row">
            <label class="aui-input-addon">radio</label>
            <input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
        </div>
    </div>
</div>

结合css3 动画制作的一款基于checkbox复选框开关效果,在列表.aui-list-view中使用,根据色值说明进行样式选择。

代码片段

<div class="aui-content aui-card">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-switch-body">
            <div class="aui-switch-title">开关样式1</div>
            <input type="checkbox" class="aui-switch aui-switch-success aui-pull-right" checked>
        </li>
    </ul>
</div>

大多数的app已经加入了社交元素,会话界面用到的还是瞒多的,就一块封装了进去如果想自定义气泡颜色,修改.aui-chat-receiver-cont背景和.aui-chat-left-triangle的border-color

.aui-chat-sender为发送消息的容器,也就是你的

.aui-chat-receiver为接受到的消息容器

.history-date 定义了个时间的效果,可以结合p标签来使用


代码片段

<div class="aui-content aui-content-padded" id="message-content">
    <p class="aui-text-center history-date">7-16 20:00</p>
    <div class="aui-chat-sender">
        <div class="aui-chat-sender-avatar"><img src="../image/demo1.png"></div>
        <div class="aui-chat-sender-cont">
            <div class="aui-chat-right-triangle"></div>
            <span>Hello!!</span>
        </div>
    </div>
    <div class="aui-chat-receiver">
        <div class="aui-chat-receiver-avatar"><img src="../image/demo2.png"></div>
        <div class="aui-chat-receiver-cont">
            <div class="aui-chat-left-triangle"></div>
            <span>你好!</span>
        </div>
    </div>
</div>

UI为用户提供了200个线型字体图标,使用字体图标的好处就是大小和颜色可以自由控制,同时还能方便的增加背景等效果。使用图标时请确保字体文件和css文件在同一目录下。

使用方法: <i class="aui-iconfont aui-icon-menu"></i>

图标的对应可以使用参考代码演示,在图标名称下方都有对应的名称,修改.aui-icon-*即可。

同时AUI也是支持自定义图标的,但是需要避免名称的重复。


弹出对话框样式,具体样式可参考app演示

代码片段

<div class="aui-dialog aui-hidden" id="dialog">
        <div class="aui-dialog-header">弹出提示</div>
        <div class="aui-dialog-body aui-text-left">
            自定义弹出框样式
        </div>
        <div class="aui-dialog-footer">
            <div class="aui-dialog-btn aui-text-danger" tapmode onclick="cancel()">取消</div>
            <div class="aui-dialog-btn aui-text-info" tapmode onclick="confirm()">确定</div>
        </div>
    </div>

toast里面提供了两种形式,有对号的默认形式及加载中样式,对应class为 aui-toast,在APICloud项目中使用时,弹出过程中可以将当前窗口的弹动关闭,toast隐藏后恢复弹动。需自行结合js来实现弹出,案例代码如下:

代码片段

<div class="aui-toast" style="display:none" id="default">
    <i class="aui-iconfont aui-icon-check"></i>
    <div class="aui-toast-content">提交成功</div>
</div>
<div class="aui-toast"  style="display:none" id="loading">
    <div class="aui-toast-loading"></div>
    <div class="aui-toast-content">加载中</div>
</div>
<p class="aui-text-center">TOAST</p>
<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault()">默认样式(toast)</div>
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showLoading()">弹出loading样式(toast)</div>
</div>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    function showDefault(){
        $api.css($api.byId("default"),"display:block");
        setTimeout(function(){
            $api.css($api.byId("default"),"display:none");
        },2000)
    }
    function showLoading(){
        $api.css($api.byId("loading"),"display:block");
        setTimeout(function(){
            $api.css($api.byId("loading"),"display:none");
        },2000)
    }
        
</script>

有6种色系的提示条样式,可以自定义左右图标,案例代码如下:

代码片段

<div class="aui-tips" id="tips-1">
    <div class="aui-tips-content aui-ellipsis-1" >
        <i class="aui-iconfont aui-icon-warnfill"></i>
        消息提示条消息提示条消息提示
        <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="closeTips()"></i>
    </div>
</div>

带有数值显示的滑块样式,完成数值监听需结合aui-range.js

代码片段

<body>
    <div class="aui-content">
        <p>带有提示的滑块:<span id="value-1">30</span></p>
        <div class="aui-range" style="margin-top:30px;">
            <input type="range" class="aui-range-danger" value="30" max="100" min="1" step="1" id="range" />
        </div>
    </div>
    <div class="aui-content">
        <p>带有提示的滑块:<span id="value-2">40</span></p>
        <div class="aui-range" style="margin-top:30px;">
            <input type="range" value="40" max="100" min="1" step="1" id="range2" />
        </div>
    </div>
    <div class="aui-content">
        <p>普通滑块:<span id="value">50</span></p>
        <div class="aui-range"><input type="range" value="50" max="100" min="1" class="aui-range-primary demo" /></div>
        <div class="aui-range"><input type="range" value="50" max="100" min="1" class="aui-range-info demo" /></div>
        <div class="aui-range"><input type="range" value="50" max="100" min="1" class="aui-range-warning demo" /></div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-range.js" ></script>
<script type="text/javascript">
$aui.range($api.byId("range"),function(ret){
    $api.text($api.byId("value-1"),ret);
})
$aui.range($api.byId("range2"),function(ret){
    $api.text($api.byId("value-2"),ret);
})
var demo = $api.domAll(".demo");
for(var i=0,len=demo.length;i<len;i++){
    demo[i].addEventListener("change",function(){
        $api.text($api.byId("value"),this.value);
    });
}
</script>

时间轴样式,具体案例代码如下:

代码片段

<div class="aui-content">
    <ul class="aui-timeline">
        <li class="aui-time-label">
            <span class="aui-bg-info">
            2015.11.21
            </span>
        </li>
        <li>
            <div class="aui-time-label aui-bg-info">11-21</div>
            <div class="aui-timeline-item">
                <span class="aui-timeline-time"><i class="aui-iconfont aui-icon-time"></i> 12:05</span>
                <h3 class="aui-timeline-header">标题标题标题标题标题</h3>
                <div class="aui-timeline-body">时间轴内容时间轴内容时间轴内容时间轴内容时间轴内容</div>
                <div class="aui-timeline-footer">
                    底部信息
                </div>
            </div>
        </li>
    </ul>
</div>

不同粗细的进度条样式

代码片段

/*.aui-progress 默认最粗*/
<div class="aui-progress aui-progress aui-clearfix">
    <div class="aui-progress-bar" style="width: 60%;"></div>
</div>
/*.aui-progress-sm 中等*/
<div class="aui-progress aui-progress-sm">
    <div class="aui-progress-bar" style="width: 60%;"></div>
</div>
/*.aui-progress-xs 较细*/
<div class="aui-progress aui-progress-xs">
    <div class="aui-progress-bar" style="width: 60%;"></div>
</div>
/*.aui-progress-xxs 最细*/
<div class="aui-progress aui-progress-xxs">
    <div class="aui-progress-bar" style="width: 60%;"></div>
</div>
/*.aui-progress-bar.aui-progress-primary 其它色系*/
<div class="aui-progress aui-progress">
    <div class="aui-progress-bar aui-progress-primary" style="width: 60%;"></div>
</div>

v1.2.1中对新版本做了重新架构,调用方法有所变化,参考案例代码:

[新增] 日历效果,使用时需另外引用日历样式表及js文件;可以控制开始日期、结束日期及当前月开始日期之前日期是否可点击

js:aui-calendar.js

aui-tap.js(监听tap事件,用于消除300ms点击延迟)

css: aui-calendar.css

案例代码如下:

代码片段

<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-calendar.css" />
<script type="text/javascript" src="../script/aui-tap.js"></script>
<script type="text/javascript" src="../script/aui-calendar.js"></script>
<script type="text/javascript">
    var todayDate = new Date();
    var startDate = todayDate.getFullYear()+'-'+(todayDate.getMonth()+1)+'-'+todayDate.getDate();
    var endDate = (todayDate.getFullYear())+'-'+(todayDate.getMonth()+5);
    var calendar = new auiCalendar({
        container:document.getElementById("calendar"), //容器
        startDate:startDate,//开始日期
        endDate:endDate,//结束日期
        lunarShow:true,//是否显示农历
        dateActive:dateActive,//点击日期后回调
        beforeStartDateClick:false//设置今天之前日期是否可点击
    });
    function dateActive(date){
        document.getElementById("result").textContent = date;
    }
</script>

[新增]可上下滑动的全屏幻灯效果,使用时需另外引用样式表及js文件

js:aui-slider-up.js

css: aui-slider-up.css

需要注意:在APICloud的项目中,需要关闭窗口的弹动

案例代码如下:

代码片段

<link rel="stylesheet" href="../css/aui-slider-up.css" />
<div class="aui-slider-close" tapmode onclick="closeWin()">关闭</div>
<div class="aui-slider-nav" id="sliderNav">
<ul>
<li class="aui-bg-primary first aui-text-center">
<h1>AUI</h1>
<p>让移动布局更简单</p>
<p>—— { www.auicss.com } ——</p>
</li>
<li>
<img src="../image/2.png" alt=""/>
</li>
<li>
<img src="../image/1.png" alt=""/>
</li>
</ul>
<span class="aui-up-slide">
<i class="aui-iconfont aui-icon-fold"></i>
</span>
</div>
<script src="../script/api.js"></script>
<script src="../script/aui-slider-up.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
   $aui.sliderUp($api.byId("sliderNav"));
}
function closeWin(){
        api.closeWin({
        name:'slider_up_win',
        animation:{
        type:'push',
                subType:'from_top'
            }
        });
    }
</script>

可以上下滑动的日历效果,使用方法同普通日历,需另外引入文件:

js: aui-calendar-slide.js

aui-tap.js(监听tap事件,用于消除300ms点击延迟)

css:aui-calendar-slide.css

需要注意:在APICloud的项目中,需要关闭窗口的弹动

代码片段

<div id="calendar" class="aui-calendar"></div>
<script type="text/javascript" src="../script/aui-tap.js"></script>
<script type="text/javascript" src="../script/aui-calendar-slide.js"></script>
<script type="text/javascript">
    apiready = function(){
        /**
        * 日历
        * $aui.calendar(el,opts,callback);
        * startDate = '2016-03-20'开始日期,不传时为今天,当没有天传入时,默认从当月开始日期
        * endDate = '2016-04-28' 结束日期
        * beforeStartDateClick 默认false,开始日期之前的当月是否允许点击
        * 当开始日期和结束日期都为空时,默认显示当月日历
        * 返回数据为点击某天后结果,格式 {status:'success',date:'2016-01-01'}
        **
        $aui.calendar($api.byId("calendar"),{
            startDate:'2016-03',
            endDate:'2016-08',
            beforeStartDateClick : false
        },function(ret){
            if(ret){
                // 返回点击的日期
                // alert(JSON.stringify(ret));
            }
        })
        */
        var todayDate = new Date();
        var startDate = todayDate.getFullYear()+'-'+(todayDate.getMonth()+1)+'-'+todayDate.getDate();
        var endDate = (todayDate.getFullYear())+'-'+(todayDate.getMonth()+5);
        $aui.calendar($api.byId("calendar"),{
            startDate : startDate,
            endDate : endDate,
            beforeStartDateClick : false // 是否允许开始日期之前的可以点击,默认为false
        },function(ret){
            if(ret){
                // 返回点击的日期
                alert(JSON.stringify(ret));
            }
        })
    }
</script>

aui-tap.js为监听tap事件的js组件,可以用监听tap事件取代click事件,消除移动端点击时300ms的延迟

代码片段

<script>
el.addEventListener('tap', function(e){
console.log(e);
}, false);
</script>

一个css动画做的loading效果,具体样式可参考app演示

AUI提供了功能强大的轮播组件,用户可以自由扩展,设置分页器样式,控制滑动速度,设置是否循环等,同时支持无缝循环播放,单页面多个轮播调用。

参数说明:

container  容器

width   宽度

height  高度

speed  滑动速度

pageShow  是否显示分页器

pageStyle  分页页样式,dot、line两种类型

loop  是否循环

dotPosition  当分页页样式为dot时控制分页器位置,left、center、right

currentPage  回调方法,获取当前页

var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":260,
        "speed":300,
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center',
        currentPage:currentFun
    })


可以使用slide.pageCount()来获取总页数,

在v1.2.1中我们新增了利用轮播组件制作的引导页,开发者可以进行二次扩展。

案例代码


代码片段

<link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript">
    var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":260,
        "speed":300,
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center',
        currentPage:currentFun
    })
    // 当前页
    function currentFun(index) {
        console.log(index);
    }
    // 获取总页数
    console.log(slide3.pageCount());
</script>
AUICSS.com
@流浪男
QQ: 343757327
www.auicss.com
返回顶部