底部分享盒子

使用底部弹出框需要先载入JS文件：

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

使用弹窗之前需要先实例化对象 var sharebox = new auiSharebox();，支持方法如下：

• init(options, callback)：显示带成功图标的弹窗

options 参数如下：

options: {
    col: '', // 列数，默认5等分，可选1~12，建议3~5列
    buttons:[{ // 可选菜单项,记数从1开始
        image:'', // 分享平台图片
        text:'', // 文字描述
        value:''// （可选）菜单对应值
    }],
    cancelTitle: '', //（可选）关闭按钮，支持文字和HTML代码
}

callback 回调参数如下：

function callback(res) {
    res.buttonIndex // 点击的菜单序号，从1开始记数
    res.buttonValue // 点击的菜单对应的值，buttons中未设置返回空
}

示例源码

<section class="aui-content-padded">
    <div class="aui-btn" tapmode onclick="openSharebox()">打开分享</div>
</section>
<section class="aui-content-padded">
    <p>点击了第<strong class="aui-text-danger" id="button-index"></strong>个按钮（buttonIndex）</p>
    <p>点击按钮的值为<strong class="aui-text-danger" id="button-value"></strong>(buttonValue)</p>
</section>
<script type="text/javascript" src="/static/auicss/script/aui-sharebox.js" ></script>
<script type="text/javascript">
    var sharebox = new auiSharebox();
    function openSharebox(){
        sharebox.init({
            buttons:[{
                image:'/static/auicss/img/share/wx.png',
                text:'微信',
                value:'wx'//可选
            },{
                image:'/static/auicss/img/share/wx-circle.png',
                text:'朋友圈',
                value:'wx-circle'
            },{
                image:'/static/auicss/img/share/qq.png',
                text:'QQ好友',
                value:'qq'
            },{
                image:'/static/auicss/img/share/qzone.png',
                text:'QQ空间',
                value:'qq-qzone'
            },{
                image:'/static/auicss/img/share/qq-weibo.png',
                text:'QQ微博'
            },{
                image:'/static/auicss/img/share/sina-weibo.png',
                text:'新浪微博'
            },{
                image:'/static/auicss/img/share/message.png',
                text:'短信'
            }],
            col:5,
            cancelTitle:'关闭'//可选,当然也可以采用下面的方式使用图标
            // cancelTitle:'<i class="aui-iconfont aui-icon-close aui-font-size-16"></i>'//可选
        },function(ret){
            if(ret){
                document.getElementById("button-index").textContent = ret.buttonIndex;
                document.getElementById("button-value").textContent = ret.buttonValue;
            }
        })
    }
</script>