底部分享盒子
使用底部弹出框需要先载入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>