AUI 2.0是一套全新的AUI框架,在1.X基础上进行了重新架构。结合实际项目出发,站在开发者和项目的角度,重新定义AUI框架。在2.0中使用了大量弹性响应式布局,采用容器+布局结构+控件的嵌套形式,方便开发者快速布局样式。我们充分吸取了AUI使用者的反馈意见和借鉴了市场上其他优秀UI框架,完成了2.0版本的开发。2.0遵循Google Material 设计规范,使用MIT开源协议。

在2.0中,全局使用rem控制尺寸,完美适应不同分辨率移动设备;新加入的主题样式表方便开发者自定义基础颜色样式,完成APP主题的定制。完美兼容IOS 5.1+ 到Android 4.2+。

rem说明

html默认定义的尺寸为20px,那么1rem=20px;开发者在定义尺寸及字号时可以根据此比例来控制,比如,14px = 0.7rem*20。

<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>AUI快速完成布局</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />

2.0版本中布局结构更要严谨和灵活。

aui-content和aui-content-padded作为AUI整个框架中的外层容器

aui-list和aui-card-list为列表类布局容器

aui-row 栅格布局容器

aui-grid 宫格布局容器

aui-bar 定义工具栏类

......

同时我们也提供了一些常用的样式来辅助布局

aui-ellipsis-1 单行文字,超出自动省略

aui-ellipsis-2 两行文字,超出自动省略

aui-hr 水平线

aui-padded-位置-数值 : 控制某个方向的内边距剧,位置有t(顶部),b(顶部),l(左侧),r(右侧),数值有0,5,10,15

aui-margin-位置-数值,控制某个方向的外边距,位置有t(顶部),b(顶部),l(左侧),r(右侧),数值有0,5,10,15

aui-font-size-数值,文字大小,数值有12,14,16,18,20

aui-text-颜色名,字体颜色,颜色名有 default,primary,success,info,warning,danger,pink,purple,indigo

aui-bg-颜色名,背景颜色,颜色名有 default,primary,success,info,warning,danger,pink,purple,indigo

aui-pull-left 左对齐

aui-pull-right 右对齐

aui-show 显示

aui-hide 隐藏(隐藏容器不占空间)

aui-invisible 隐藏(隐藏后继续占用布局空间)

aui-mask 遮罩层,层序为8

 

常用色值的对应

default      #212121

primary      #00bcd4

success      #009688

info              #03a9f4

warning      #ffc107

danger       #e51c23

pink             #e91e63

purple         #673ab7

indigo          #3f51b5

2.0中内容容器有.aui-content和.aui-content-padded,建议在所有外层容器中使用

.aui-content
.aui-content-padded 有0.75rem(15px)的外边距
对比1.x版本,aui-content去掉了margin-bottom的15px;

基础文本样式.

同时按照Google Material色彩规范提供了几个固定色值

.aui-text-default      #212121
.aui-text-primary     #00bcd4
.aui-text-success     #009688
.aui-text-info            #03a9f4
.aui-text-warning    #ffc107
.aui-text-danger     #e51c23
.aui-text-pink           #e91e63
.aui-text-purple       #673ab7
.aui-text-indigo       #3f51b5

<section class="aui-content-padded">
        <h1>标题一 H1</h1>
        <h2>标题二 H2</h2>
        <h3>标题三 H3</h3>
        <h4>标题四 H4</h4>
        <h5>标题五 H5</h5>
        <h6>标题六 H6</h6>
        <p>P标签字体,默认为14px</p>
        <div class="aui-content">
            内容区域,AUI 2.0色彩及尺寸按照Material Design标准设计
        </div>
</section>

2.0版本中导航栏分蓝色调和浅色调,支持嵌套按钮,tab切换栏等其他控件。

为了兼容APICloud状态栏沉浸式的处理,当导航栏中只有中间文字或者tab等时,请不要使用.aui-title

案例代码

<header class="aui-bar aui-bar-nav">顶部导航栏</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">fixStatusBar效果</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>返回
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-menu"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>

aui-bar + aui-bar-tab组合实现,可以实现固定在底部的工具栏,可以结合aui-tab.js来使用

aui-bar-tab-item为子级元素

aui-active选中时样式

<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-star"></i>
        <div class="aui-bar-tab-label">收藏</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-badge">99</div>
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-dot"></div>
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>

aui-bar + aui-bar-btn组合使用,结合aui-tab.js可以实现有切换功能的按钮组,也可以实现数字增减器的效果,具体实例可以查看代码

aui-bar-btn-item为子级容器

aui-bar + aui-bar-btn + aui-bar-btn-full 为满屏效果

aui-bar + aui-bar-btn + aui-bar-btn-sm 小号按钮组

aui-bar + aui-bar-btn + aui-bar-btn-round 两侧为半圆形

在顶部导航栏使用时,考虑到APICloud状态栏沉浸式样式的兼容,当导航栏只有该按钮组是直接aui-bar容器内放置按钮组。当出现左右图标时需放置在aui-title容器内。具体效果可以参考代码使用

<div class="aui-bar aui-bar-btn aui-bar-btn-full">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn aui-bar-btn-sm aui-bar-btn-full">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn" style="width:80%;">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn" style="width:80%;" type="count" id="demo">
    <div class="aui-bar-btn-item aui-font-size-20">
        <i class="aui-iconfont aui-icon-minus"></i>
    </div>
    <div class="aui-bar-btn-item">
        <input type="number" class="aui-input aui-text-center" id="count" value="1">
    </div>
    <div class="aui-bar-btn-item aui-font-size-20">
        <i class="aui-iconfont aui-icon-plus"></i>
    </div>
</div>
<div class="aui-bar aui-bar-btn aui-bar-btn-round" style="width:45%;">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<header class="aui-bar aui-bar-nav aui-margin-b-15">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
            <div class="aui-bar-btn-item">栏目三</div>
        </div>
    </div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
        </div>
    </div>
</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <div class="aui-bar aui-bar-btn aui-bar-btn-round">
        <div class="aui-bar-btn-item aui-active">栏目一</div>
        <div class="aui-bar-btn-item">栏目二</div>
    </div>
</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
        </div>
    </div>
</header>

aui-tab 是一种比较常见的切换菜单样式,可以结合aui-tab.js来使用

aui-tab为外层容器

aui-tab-item 为子级容器

aui-active为选中时样式

<div class="aui-tab" id="tab">
    <div class="aui-tab-item aui-active">Item1</div>
    <div class="aui-tab-item"><div></div>Item2</div>
    <div class="aui-tab-item">Item3</div>
    <div class="aui-tab-item">Item4</div>
</div>

信息条 aui-info 实现的效果在大多数APP中是比较常见的,在AUI中可以放置其他列表容器内使用。比如可以实现有头像,昵称,其他信息的横向布局样式。

默认使用垂直居中。具体效果可以查看APP演示中的案例

<div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <img src="../../image/demo2.png" style="width:1.5rem" class="aui-img-round" /><span class="aui-margin-l-5">AUI</span>
        </div>
    <div class="aui-info-item">2015-07-13 22:31</div>
</div>

2.0中按钮按照Google Material 设计规范提供了多个色值的样式

aui-btn 默认按钮

aui-btn + aui-btn-primary 使用主题样式

aui-btn + aui-btn-block 块级按钮

aui-btn + aui-btn-outlined 边框按钮

aui-btn + aui-btn-block + aui-btn-sm 小号块级按钮

其他组合可以参考实例代码

<div class="aui-content-padded">
    <p>普通按钮</p>
    <p><div class="aui-btn">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger">默认按钮(danger)</div></p>

    <p><div class="aui-btn aui-btn-info"><span class="aui-iconfont aui-icon-edit"></span>图标按钮</div></p>
    <p><div class="aui-btn aui-btn-info">图标按钮</div></p>
    <p>块按钮类</p>
    <p><div class="aui-btn aui-btn-block">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block">默认按钮(danger)</div></p>

    <p>块按钮类 - 默认增加10px底部外边距</p>
    <p><div class="aui-btn aui-btn-block aui-btn-outlined">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined">默认按钮(danger)</div></p>
    <p>块按钮类(aui-btn-sm)</p>
    <p><div class="aui-btn aui-btn-block aui-btn-sm">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block aui-btn-sm">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm">默认按钮(danger)</div></p>
    <p>块按钮类 - 默认增加10px底部外边距(aui-btn-sm)</p>
    <p><div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(danger)</div></p>
</div>

aui-label 同按钮一样,默认提供了几个色值

aui-label + aui-label-primary  使用主题样式

aui-badge  右上角浮动角标,

aui-dot 右上角圆点

<section class="aui-content-padded">
    <p>标签</p>
    默认:<div class="aui-label">标签</div>
    <Br />
    info:<div class="aui-label aui-label-info">标签</div>
    <Br />
    primay:<div class="aui-label aui-label-primary">标签</div>
    <Br />
    danger:<div class="aui-label aui-label-danger">标签</div>
    <Br />
    success:<div class="aui-label aui-label-success">标签</div>
    <Br />
    warning:<div class="aui-label aui-label-warning">标签</div>
    <Br />
    outlined:<div class="aui-label aui-label-outlined"><i class="aui-iconfont aui-icon-my"></i> 线条样式的标签</div>
    <Br />
    outlined:<div class="aui-label aui-label-danger aui-label-outlined">标签</div>
</section>
<section class="aui-content-padded">
    <p>角标</p>
    <div class="aui-badge"></div><Br />
    <div class="aui-badge">8</div><Br />
    <div class="aui-badge">88</div><Br />
</section>
<section class="aui-content-padded">
    <p>红点</p>
    dot:<div class="aui-dot"></div>
</section>

aui-list为简单的列表布局容器,结合aui-meida-list、aui-form-list、aui-select-list

可以实现媒体列表布局,表单及选择器列表。

下面用图片结构的形式来介绍布局列表的使用

 

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            简单的列表布局
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">Item1</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">Item2</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">Item3</div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            带有右侧箭头
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">Item1</div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">Item2</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">Item3</div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            带有其他元素的列表
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">text</div>
                <div class="aui-list-item-right">信息</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">label</div>
                <div class="aui-list-item-right">
                    <div class="aui-label aui-label-info">标签</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">dot</div>
                <div class="aui-list-item-right">
                    <div class="aui-dot" style="position:relative;top:0; right:0"></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">badge</div>
                <div class="aui-list-item-right">
                    <div class="aui-badge" style="position:relative;top:0; left:0">88</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">badge</div>
                <div class="aui-list-item-right">
                    <div class="aui-badge" style="position:relative;top:0; left:0"></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">progress</div>
                <div class="aui-list-item-right">
                    <div class="aui-progress aui-progress aui-progress-xxs" style="width:5rem;">
                        <div class="aui-progress-bar" style="width: 60%;"></div>
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">range</div>
                <div class="aui-list-item-right">
                    <div class="aui-range">
                        <input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">switch</div>
                <div class="aui-list-item-right">
                    <input type="checkbox" class="aui-switch" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">radio</div>
                <div class="aui-list-item-right">
                    <input type="radio" class="aui-radio" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">checkbox</div>
                <div class="aui-list-item-right">
                    <input type="checkbox" class="aui-checkbox" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">bar-btn</div>
                <div class="aui-list-item-right">
                    <div class="aui-bar aui-bar-btn aui-bar-btn-sm" style="width:60%;float:right">
                        <div class="aui-bar-btn-item">
                            <i class="aui-iconfont aui-icon-minus"></i>
                        </div>
                        <div class="aui-bar-btn-item">
                            <input type="number" class="aui-input aui-text-center" value="1" >
                        </div>
                        <div class="aui-bar-btn-item">
                            <i class="aui-iconfont aui-icon-plus"></i>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">带有图标、底线缩进</li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-home"></i>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-edit"></i>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-camera"></i>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
            </div>
        </li>
    </ul>
</div>

媒体布局aui-media-list是与aui-list结合使用的一种形式,可以实现有图片,多行文字等的布局样式,结合栅格系统可以实现更多布局效果

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-header">
            图文列表
        </li>
        <li class="aui-list-item aui-list-item-arrow">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表一</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text aui-ellipsis-2">
                        这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src="../../image/demo1.png">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表二</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        在下方我们加入了aui-info信息条
                    </div>
                </div>
            </div>
            <div class="aui-info" style="padding-top:0">
                <div class="aui-info-item">
                    <img src="../../image/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">流浪男</span>
                    </div>
                <div class="aui-info-item">2015-07-14 10:31</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src="../../image/demo1.png">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表二</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                    </div>
                    <div class="aui-info aui-margin-t-5" style="padding:0">
                        <div class="aui-info-item">
                            <img src="../../image/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">流浪男</span>
                            </div>
                        <div class="aui-info-item">2015-07-14 10:31</div>
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">媒体项右侧显示</div>
                    <div class="aui-list-item-text">
                        这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img src="../../image/demo4.png">
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">多张图片列表一</div>
                <p>借助栅格来实现图片列表</p>
                <div class="aui-row aui-row-padded">
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo1.png"/>
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo2.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo3.png" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">多张图片列表一</div>
                <p>借助栅格来实现图片列表</p>
                <div class="aui-row aui-row-padded">
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo1.png"/>
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo2.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo3.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo1.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo2.png" />
                    </div>
                    <div class="aui-col-xs-4">
                        <img src="../../image/demo3.png" />
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-header">
            通讯录样式列表
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/demo5.png" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">AUI</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        www.auicss.com
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/liulangnan.png" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    流浪男
                </div>
            </div>
        </li>
    </ul>
</div>

aui-form-list是与aui-list结合实现的表单列表的布局形式

 

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-header">带有输入框</li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Text
                </div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Password
                </div>
                <div class="aui-list-item-input">
                    <input type="password" placeholder="Password">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Number
                </div>
                <div class="aui-list-item-input">
                    <input type="number" placeholder="Number">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Radio
                </div>
                <div class="aui-list-item-input">
                    <label><input class="aui-radio" type="radio" name="demo1" checked> 选项一</label>
                    <label><input class="aui-radio" type="radio" name="demo1"> 选项二</label>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Select
                </div>
                <div class="aui-list-item-input">
                    <select>
                        <option>Option1</option>
                        <option>Option2</option>
                        <option>Option3</option>
                    </select>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Switch
                </div>
                <div class="aui-list-item-input">
                    <input type="checkbox" class="aui-switch" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Range
                </div>
                <div class="aui-list-item-input">
                    <div class="aui-range">
                        <input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Textarea
                </div>
                <div class="aui-list-item-input">
                    <textarea placeholder="Textarea">

aui-select-list和aui-list结合可以实现带有选择器的列表布局样式

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-select-list">
        <li class="aui-list-header">带有单选或多选框的列表</li>
        <li class="aui-list-item">
            <div class="aui-list-item-label">
                <input class="aui-radio" type="radio" name="radio" checked>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
                <div class="aui-list-item-text">
                    这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio" checked> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" disabled type="radio" name="radio"> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio"> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio2" checked> 选项一</label>
                <label><input class="aui-radio" type="radio" name="radio2"> 选项二</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" type="radio" name="checkbox" checked> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" disabled checked="" type="radio" name="checkbox"> 禁止选择</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" type="radio" name="checkbox"> 这是一个列表项</label>
            </div>
        </li>
    </ul>
</div>

卡片列表在APP中是比较常见的布局样式,可以结合栅格系统实现漂亮的布局样式,如知乎等页面方式。

<section class="aui-content-padded">
    <div class="aui-card-list">
        <div class="aui-card-list-header">
            卡片布局头部区域
        </div>
        <div class="aui-card-list-content-padded">
            内容区域,卡片列表布局样式可以实现APP中常见的各类样式
        </div>
        <div class="aui-card-list-footer">
            底部区域
        </div>
    </div>
</section>
<section class="aui-content">
    <div class="aui-card-list">
        <div class="aui-card-list-header">
            卡片布局头部区域
        </div>
        <div class="aui-card-list-content">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-card-list-footer">
            2016年7月12日
        </div>
    </div>
    <div class="aui-card-list">
        <div class="aui-card-list-header">
            卡片布局头部区域
        </div>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div class="aui-row aui-row-padded">
                <div class="aui-col-xs-4">
                    <img src="../../image/l1.png" />
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../image/l2.png" />
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../image/l3.png" />
                </div>
            </div>
        </div>
        <div class="aui-card-list-footer">
            <div><i class="aui-iconfont aui-icon-star"></i></div>
            <div><i class="aui-iconfont aui-icon-laud"></i></div>
            <div><i class="aui-iconfont aui-icon-note"></i></div>
        </div>
    </div>
    <div class="aui-card-list">
        <div class="aui-card-list-header aui-card-list-user aui-border-b">
            <div class="aui-card-list-user-avatar">
                <img src="../../image/demo4.png" class="aui-img-round" />
            </div>
            <div class="aui-card-list-user-name">
                <div>AUI</div>
                <small>1天前</small>
            </div>
            <div class="aui-card-list-user-info">北京朝阳</div>
        </div>
        <div class="aui-card-list-content-padded">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-card-list-footer aui-border-t">
            <div><i class="aui-iconfont aui-icon-note"></i> 666</div>
            <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
            <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
        </div>
    </div>
    <div class="aui-card-list">
        <div class="aui-card-list-header">
            <div><i class="aui-iconfont aui-icon-my aui-text-danger"></i><span class="aui-text-danger"> 最近联系人</span></div>
            <i class="aui-iconfont aui-icon-more"></i>
        </div>
        <div class="aui-card-list-content">
            <ul class="aui-list aui-media-list">
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media">
                            <img src="../../image/demo5.png" class="aui-img-round aui-list-img-sm">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">AUI</div>
                                <div class="aui-list-item-right">08:00</div>
                            </div>
                            <div class="aui-list-item-text">
                                www.auicss.com
                            </div>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media">
                            <img src="../../image/liulangnan.png" class="aui-img-round aui-list-img-sm">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            流浪男
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="aui-card-list-footer aui-text-center">
            查看更多
        </div>
    </div>
</section>

aui-popup为弹出菜单样式,结合aui-popup.js来使用控制。弹出菜单考虑到用户自定义性,并没有封装到js里面,js里面只是关联了弹出效果。需要给

按钮增加aui-popup-for="弹出层容器id"属性来关联弹出菜单。

具体效果参考代码:

<section class="aui-content-padded">
    <div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div>
    <div class="aui-btn aui-btn-primary" aui-popup-for="top">顶部中间</div>
    <div class="aui-btn aui-btn-primary" aui-popup-for="top-right">右上角</div>
</section>
<section class="aui-content-padded">
    <div class="aui-btn aui-btn-info" aui-popup-for="bottom-left">左下角</div>
    <div class="aui-btn aui-btn-info" aui-popup-for="bottom">底部中间</div>
    <div class="aui-btn aui-btn-info" aui-popup-for="bottom-right">右下角</div>
</section>
<div class="aui-popup aui-popup-top-left" id="top-left">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-top" id="top">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-top-right" id="top-right">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-bottom" id="bottom">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-bottom-left" id="bottom-left">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-bottom-right" id="bottom-right">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../../script/aui-popup.js" ></script>
<script type="text/javascript">
    var popup = new auiPopup();
    function showPopup(){
        popup.show(document.getElementById("top-right"))
    }
</script>

栅格系统在2.0版本中做了改进。栅格系统采用12等分布局

aui-row 栅格外层容器,子级无间距

aui-row-padded 栅格外层容器,子级有间距

aui-col-xs-(1-12)

默认12等分布局中无法直接实现5等分,为此加入了aui-col-5 为实现五等分效果

宫格布局是结合栅格系统实现的一种布局方式

aui-grid 宫格容器

<section class="aui-grid aui-margin-b-15">
    <div class="aui-row">
        <div class="aui-col-xs-4">
            <div class="aui-badge">88</div>
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-grid-label">首页</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-gear"></i>
            <div class="aui-grid-label">设置</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-map"></i>
            <div class="aui-grid-label">地图</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-calendar"></i>
            <div class="aui-grid-label">日历</div>
        </div>
        <div class="aui-col-xs-4">
            <div class="aui-badge"></div>
            <i class="aui-iconfont aui-icon-date"></i>
            <div class="aui-grid-label">日期</div>
        </div>
        <div class="aui-col-xs-4">
            <div class="aui-dot"></div>
            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-grid-label">购物车</div>
        </div>
    </div>
</section>
<section class="aui-grid">
    <div class="aui-row">
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-grid-label">首页</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-gear"></i>
            <div class="aui-grid-label">设置</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-map"></i>
            <div class="aui-grid-label">地图</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-calendar"></i>
            <div class="aui-grid-label">日历</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-date"></i>
            <div class="aui-grid-label">日期</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-grid-label">购物车</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-paper"></i>
            <div class="aui-grid-label">发现</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-video"></i>
            <div class="aui-grid-label">视频</div>
        </div>
    </div>
</section>
<div class="aui-searchbar" id="search">
    <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="请输入搜索内容" id="search-input">
        </form>
    </div>
    <div class="aui-searchbar-cancel" tapmod>取消</div>
</div>

进度条去掉了之前的多种色值

aui-progress 默认

aui-progress-sm 小号

aui-progress-xs 特小

aui-progress-xxs  极小

<div class="aui-content-padded">
    <p>.aui-progress</p>
    <div class="aui-progress aui-progress">
        <div class="aui-progress-bar" style="width: 60%;"></div>
    </div>
    <p>.aui-progress-sm</p>
    <div class="aui-progress aui-progress-sm">
        <div class="aui-progress-bar" style="width: 60%;"></div>
    </div>
    <p>.aui-progress-xs</p>
    <div class="aui-progress aui-progress-xs">
        <div class="aui-progress-bar" style="width: 60%;"></div>
    </div>
    <p>.aui-progress-xxs</p>
    <div class="aui-progress aui-progress-xxs">
        <div class="aui-progress-bar" style="width: 60%;"></div>
    </div>
</div>

参考《JS组件-aui-toast 》使用方法

<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="showDefault('success')">默认样式(toast)</div>
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('fail')">失败(toast)</div>
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('custom')">自定义</div>
    <div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="showDefault('loading')">弹出loading样式(toast)</div>
</div>
<script type="text/javascript" src="../../script/aui-toast.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var toast = new auiToast({
    })
    function showDefault(type){
        switch (type) {
            case "success":
                toast.success({
                    title:"提交成功",
                    duration:2000
                });
                break;
            case "fail":
                toast.fail({
                    title:"提交失败",
                    duration:2000
                });
                break;
            case "custom":
                toast.custom({
                    title:"提交成功",
                    html:'<i class="aui-iconfont aui-icon-laud"></i>',
                    duration:2000
                });
                break;
            case "loading":
                toast.loading({
                    title:"加载中",
                    duration:2000
                },function(ret){
                    console.log(ret);
                    setTimeout(function(){
                        toast.hide();
                    }, 3000)
                });
                break;
            default:
                // statements_def
                break;
        }
    }

</script>

参考《JS组件 - aui-dialog》使用方法

<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="openDialog('text')">基本dialog</div>
</div>
<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block aui-btn-primary" tapmode onclick="openDialog('callback')">带有回调的dialog</div>
</div>
<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="openDialog('input')">带有输入框的dialog</div>
</div>
<script type="text/javascript" src="../../script/aui-dialog.js" ></script>
<script type="text/javascript">
    var dialog = new auiDialog({})
    function openDialog(type){
        switch (type) {
            case "text":
                dialog.alert({
                    title:"弹出提示",
                    msg:'这里是内容',
                    buttons:['取消','确定']
                },function(ret){
                    console.log(ret)
                })
                break;
            case "callback":
                dialog.alert({
                        title:"弹出提示",
                        msg:'这里是内容',
                        buttons:['取消','确定']
                    },function(ret){
                        if(ret){
                            dialog.alert({
                                title:"提示",
                                msg:"您点击了第"+ret.buttonIndex+"个按钮",
                                buttons:['确定']
                            });
                        }
                    })
                break;
            case "input":
                dialog.prompt({
                    title:"弹出提示",
                    text:'默认内容',
                    buttons:['取消','确定']
                },function(ret){
                    if(ret.buttonIndex == 2){
                        dialog.alert({
                            title:"提示",
                            msg: "您输入的内容是:"+ret.text,
                            buttons:['确定']
                        });
                    }
                })
                break;
            default:
                break;

        }
    }
</script>
<section class="aui-chat">
    <div class="aui-chat-header">2016年7月13日</div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="../../image/demo2.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                Hello AUI 2.0!
            </div>
            <div class="aui-chat-status aui-chat-status-refresh">
                <i class="aui-iconfont aui-icon-correct aui-text-success"></i>
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-right">
        <div class="aui-chat-media">
            <img src="../../image/liulangnan.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">流浪男</div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                你好!
            </div>
            <div class="aui-chat-status">
                <i class="aui-iconfont aui-icon-info aui-text-danger"></i>
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="../../image/demo2.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                <img src="../../image/l1.png" />
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-right">
        <div class="aui-chat-media">
            <img src="../../image/liulangnan.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">流浪男</div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                以前拍摄的牛背山星空
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="../../image/demo2.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                <img src="../../image/l2.png" />
            </div>
        </div>
    </div>

</section>

参考《JS组件-aui-pull-refresh》 使用方法

<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
<section class="aui-refresh-content">
    <div class="aui-content">
        <div id="demo">
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域,卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
        </div>
    </div>
</section>
<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var pullRefresh = new auiPullToRefresh({
        container: document.querySelector('.aui-refresh-content'),
        triggerDistance: 100
    },function(ret){
        if(ret.status=="success"){
            setTimeout(function(){
                var wrap = document.getElementById("demo")
                var lis = wrap.querySelectorAll('.aui-card-list');
                for (var i = lis.length, length = i + 10; i < length; i++) {
                    var html = '<div class="aui-card-list">'+
                            '<div class="aui-card-list-header">'+
                                '卡片布局头部区域'+(i+1)+''+
                            '</div>'+
                            '<div class="aui-card-list-content-padded">'+
                                '内容区域,卡片列表布局样式可以实现APP中常见的各类样式'+
                            '</div>'+
                            '<div class="aui-card-list-footer">'+
                                '底部区域'+
                            '</div>'+
                        '</div>';
                    wrap.insertAdjacentHTML('afterbegin', html);
                }
                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
            },1500)
        }
    })
</script>

一个常见的提示条样式

<div class="aui-tips aui-margin-b-15" id="tips-1">
    <i class="aui-iconfont aui-icon-info"></i>
    <div class="aui-tips-title">消息提示条消息提示条消息提示</div>
    <i class="aui-iconfont aui-icon-close"></i>
</div>

参考《JS组件- aui-slide》使用方法

<link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
<div id="aui-slide">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node">
            <div class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-4">
                        <div class="aui-badge">88</div>
                        <i class="aui-iconfont aui-icon-home"></i>
                        <div class="aui-grid-label">首页</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-gear"></i>
                        <div class="aui-grid-label">设置</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-map"></i>
                        <div class="aui-grid-label">地图</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-calendar"></i>
                        <div class="aui-grid-label">日历</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <div class="aui-badge"></div>
                        <i class="aui-iconfont aui-icon-date"></i>
                        <div class="aui-grid-label">日期</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <div class="aui-dot"></div>
                        <i class="aui-iconfont aui-icon-cart"></i>
                        <div class="aui-grid-label">购物车</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content-padded">
                <span class="aui-text-danger">AUI Slide</span> 轮播组件不只局限于放置图片,可以自定义内容,分页样式有圆点(dot),线条(line),结合AUI Flex来实现图片及内容的水平、垂直居中
            </div>
        </div>
        <div class="aui-slide-node aui-bg-warning aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content-padded">
                <span class="aui-text-danger">AUI Slide</span>提供了常用的配置属性,可以自定义宽度,高度,自动播放,分页器样式等,支持无缝循环轮播
            </div>
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l1.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l3.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide3">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l1.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l3.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<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);
    }
    var slide2 = new auiSlide({
        container:document.getElementById("aui-slide2"),
        // "width":300,
        "height":240,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "loop":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
    var slide3 = new auiSlide({
        container:document.getElementById("aui-slide3"),
        // "width":300,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'line',
        'dotPosition':'center'
    })
    console.log(slide3.pageCount());
</script>
<secton class="aui-grid">
    <div class="row aui-text-center">
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-menu"></i>
            <p>menu</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-paper"></i>
            <p>paper</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-info"></i>
            <p>info</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-question"></i>
            <p>question</p>
        </div>

        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-left"></i>
            <p>left</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-top"></i>
            <p>right</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-right"></i>
            <p>top</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-down"></i>
            <p>down</p>
        </div>

        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-correct"></i>
            <p>correct</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-close"></i>
            <p>close</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-plus"></i>
            <p>plus</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-minus"></i>
            <p>minus</p>
        </div>

        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-my"></i>
            <p>my</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-home"></i>
            <p>home</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-phone"></i>
            <p>phone</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-mobile"></i>
            <p>mobile</p>
        </div>


        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-laud"></i>
            <p>laud</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-like"></i>
            <p>like</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-star"></i>
            <p>star</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-comment"></i>
            <p>comment</p>
        </div>


        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-share"></i>
            <p>share</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-pencil"></i>
            <p>pencil</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-edit"></i>
            <p>edit</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-search"></i>
            <p>search</p>
        </div>

        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-image"></i>
            <p>image</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-camera"></i>
            <p>camera</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-video"></i>
            <p>video</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-mail"></i>
            <p>mail</p>
        </div>

        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-more"></i>
            <p>more</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-trash"></i>
            <p>trash</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-recovery"></i>
            <p>recovery</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-refresh"></i>
            <p>refresh</p>
        </div>



        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-cart"></i>
            <p>cart</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-gear"></i>
            <p>gear</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-map"></i>
            <p>map</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-location"></i>
            <p>location</p>
        </div>


        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-forward"></i>
            <p>forward</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-back"></i>
            <p>back</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-lock"></i>
            <p>lock</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-unlock"></i>
            <p>unlock</p>
        </div>


        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-calendar"></i>
            <p>calendar</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-date"></i>
            <p>date</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-display"></i>
            <p>display</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-hide"></i>
            <p>hide</p>
        </div>

        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-flag"></i>
            <p>flag</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-cert"></i>
            <p>cert</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-qq"></i>
            <p>qq</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-wechat"></i>
            <p>wechat</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-wechat-circle"></i>
            <p>wechat-circle</p>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-weibo"></i>
            <p>weibo</p>
        </div>
    </div>
</section>

自定义主题皮肤是2.0中的一个亮点,在2.0中我们抛弃了一些组件的多种色调并分离了皮肤样式,结合aui-skin.js可以实现APP主题的切换功能。

使用方法参考《JS组件-aui-skin》来使用。

aui-dialog.js为对话框组件,可以实现弹出对话框效果

参数说明:

{

title:"弹出提示",//标题

msg:"消息内容",//内容文字

buttons:['取消','确定'],

input:false //是否有input输入框

}

返回参数:

{

buttonIndex:1,//当前点击按钮

text:""//输入的内容

}

使用方法:

var dialog = new auiDialog();

dialog.alert({
    title:"弹出提示",
    msg:'这里是内容',
    buttons:['取消','确定']
},function(ret){
    console.log(ret)
})

aui-popup.js 为弹出菜单组件

使用方法

给按钮增加 aui-popup-for="top"属性,属性值对应弹出菜单容器ID,

引入js文件并加载

var popup = new auiPopup();

popup.show(el)  手动设置显示弹出层

使用案例:

 

<div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div>
<div class="aui-popup aui-popup-top-left" id="top-left">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../../script/2.0/aui-popup.js" ></script>
<script type="text/javascript">
    var popup = new auiPopup();
</script>

aui-toast.js为弹出提示类的组件

使用方法:

var toast = new auiToast();

成功类:

toast.success({
    title:"提交成功",
    duration:2000
});

失败类:
toast.fail({
    title:"提交失败",
    duration:2000
});

自定义图标:
toast.custom({
    title:"成功给了一个赞",
    html:'<i class="aui-iconfont aui-icon-laud"></i>',
    duration:2000
});

加载中:
toast.loading({
    title:"加载中",
    duration:2000
},function(ret){
    console.log(ret);
    setTimeout(function(){
        toast.hide();
    }, 3000)
});

<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="showDefault('success')">默认样式(toast)</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('fail')">失败(toast)</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('custom')">自定义</div>
<div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="showDefault('loading')">弹出loading样式(toast)</div>
<script type="text/javascript" src="../../script/2.0/aui-toast.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var toast = new auiToast();
    function showDefault(type){
        switch (type) {
            case "success":
                toast.success({
                    title:"提交成功",
                    duration:2000
                });
                break;
            case "fail":
                toast.fail({
                    title:"提交失败",
                    duration:2000
                });
                break;
            case "custom":
                toast.custom({
                    title:"提交成功",
                    html:'<i class="aui-iconfont aui-icon-laud"></i>',
                    duration:2000
                });
                break;
            case "loading":
                toast.loading({
                    title:"加载中",
                    duration:2000
                },function(ret){
                    console.log(ret);
                    setTimeout(function(){
                        toast.hide();
                    }, 3000)
                });
                break;
            default:
                // statements_def
                break;
        }
    }

</script>

aui-tab.js为切换类的组件

参数说明

{

element:,容器

index:1,默认选中

repeatClick:false //是否允许重复点击,(设置为true时可以实现数量增加的功能)

}

返回:

{

index:1,当前点击的位置,默认为1

dom:el 当前点击的dom对象

}

<script type="text/javascript" src="../../script/2.0/aui-tab.js" ></script>
<script type="text/javascript">
    var tab = new auiTab({
        element:document.getElementById("footer"),
        index:1,
        repeatClick:false
    },function(ret){
        console.log(ret);
    });
</script>

aui-slide.js  轮播组件

var slide = new auiSlide({
    container:document.getElementById("aui-slide3"), //容器
    // "width":300, //宽度
    "height":240, //高度
    "speed":500, //速度
    "autoPlay": 3000, //自动播放
    "loop":true,//是否循环
    "pageShow":true,//是否显示分页器
    "pageStyle":'line', //分页器样式,分dot,line
    'dotPosition':'center' //当分页器样式为dot时控制分页器位置,left,center,right
})

aui-skin.js为控制皮肤主题样式显示的插件

参数说明

var skin = new auiSkin({
    name:"night", //皮肤样式名字,不能为中文
    skinPath:'../../css/aui-skin-night.css', //皮肤样式表路径
    default:false,//是否默认立即使用
    beginTime:"20:00",//开始时间
    endTime:"07:00"//结束时间
})

当default为true时,beginTime和endTime参数无效。使用beginTime和endTime,可以控制自定义皮肤使用时间,请注意时间格式的正确性

skin.setSkin(); //手动设置立即使用主题

skin.removeSkin(); //手动设置取消当前主题

aui-range.js滑块类插件

var range = new auiRange({
    element:document.getElementById("range") //滑块容器
},function(ret){
    console.log(ret)
})

aui-pull-refresh.js 下拉刷新组件

var pullRefresh = new auiPullToRefresh({
    container: document.querySelector('.aui-refresh-content'), //下拉容器
    triggerDistance: 100 //下拉高度
},function(ret){
    if(ret.status=="success"){
            pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
        },1500)
    }
})

aui-scroll.js为监听滚动条的插件,可以实时监听返回滚动高度和判断是否到达底部

var scroll = new auiScroll({
    listen:true, //是否监听滚动高度,开启后将实时返回滚动高度
    distance:200 //判断到达底部的距离,isToBottom为true
},function(ret){
   console.log(ret)
});

返回值

{

scrollTop:"",//滚动高度

isToBottom:true//是否到达底部,true,false

}