按钮组工具栏

使用按钮组工具栏需要先载入JS文件：

<script src="/static/auicss/script/aui-tab.js"></script>

使用按钮组工具栏之前需要先实例化对象 var tab = new auiTab(options, callback);，支持参数如下：

options 参数如下：

options: {
    element: '', // 按钮组工具栏对象
    index: 1, // 默认选中
    repeatClick: true, // 是否允许重复点击
}

callback 回调参数如下：

function callback(res) {
    res.index // 点击按钮组的序号，从1开始记数
    res.dom // 当前点击的DOM对象
}

示例源码

<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">Item</div>
            <div class="aui-bar-btn-item">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">Item</div>
            <div class="aui-bar-btn-item">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">Item</div>
        <div class="aui-bar-btn-item">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">Item</div>
            <div class="aui-bar-btn-item">Item</div>
        </div>
    </div>
</header>
<script type="text/javascript" src="/static/auicss/script/aui-tab.js" ></script>
<script type="text/javascript">
    var bar = document.querySelectorAll(".aui-bar-btn");
    if(bar){
        for(var i=0; i < bar.length; i++){
            var d = bar[i];
            var tab = new auiTab({
                element:bar[i],
                repeatClick:true
            },function(ret){
                if(ret.dom.parentNode.getAttribute("type") && ret.dom.parentNode.getAttribute("type")=="count"){
                    var count = parseInt(document.getElementById("count").value);
                    if(ret.index==2)return;
                    if(ret.index==1){
                        document.getElementById("count").value = count-1;
                    }
                    if(ret.index==3){
                        document.getElementById("count").value = count+1;
                    }
                }
            });
        }
    }
</script>