开始使用 布局容器和栅格系统 文字样式 背景颜色 按钮 标签、角标、红点 图标 单选、多选、开关 进度条 顶部导航 底部工具栏 底部工具栏扩展 表单 列表 卡片列表 宫格布局 弹性布局 时间轴 聊天气泡 信息条 提示条 仿微信首页 仿微信朋友圈 仿今日头条 仿知乎首页 仿淘宝首页 会员中心首页一 会员中心首页二 订单列表首页 弹窗 Dialog 弹窗 Toast 弹出菜单 底部弹出框 底部分享盒子 下拉刷新 轮播组件 滚动监听 按钮组工具栏 搜索条 滑块 Tab切换栏 折叠面板 图片懒加载 自定义主题样式 列表左滑删除

底部分享盒子

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

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

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

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>