计数列表

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



    <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" />
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />

<style>
html { background: #f7f9f8;}
</style><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="/Public/Image/aui/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>
            <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="/Public/Image/aui/demo2.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>
            <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="/Public/Image/aui/demo3.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="/Public/Image/aui/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>
            <li class="aui-list-view-cell aui-img aui-counter-list">
                <input class="aui-pull-left aui-radio aui-radio-warning" type="radio" name="demo" checked="" />
                <img class="aui-img-object aui-pull-left" src="/Public/Image/aui/demo5.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-warning 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>
            <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="/Public/Image/aui/demo2.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-info 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><script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
</script>