直接贴代码吧,复制的功能是用的ZeroClipboard插件,一键分享的功能是用的百度分享里的api.
<script type="text/javascript" charset="utf-8" src="{config.webpath}scripts/ZeroClipboard.min.js"></script> 复制功能需要引用的js文件
<div class="form-box">
<div style="font-size: 16px;font-weight: 600;">
方式一:复制链接
</div>
<div>
<input id="shareurl" type="text" class="input txt" value="<%getfulllink("go_reg",{userModel.user_name})%>" style="width:80%"/>
<a href="#" id="clipbutton" data-clipboard-target="shareurl">复制</a>
</div>
<div style="font-size: 16px;font-weight: 600;margin-top: 15px;">
方式二:一键分享
</div>
<div>
<!-- Baidu Button BEGIN -->
<div class="bdsharebuttonbox" data-tag="share_1">
<a class="bds_qzone" data-cmd="qzone" href="#"></a>
<a class="bds_tsina" data-cmd="tsina"></a>
<a class="bds_tqq" data-cmd="tqq"></a>
<a class="bds_weixin" data-cmd="weixin"></a>
<a class="bds_baidu" data-cmd="baidu"></a>
<a class="bds_renren" data-cmd="renren"></a>
<a class="bds_more" data-cmd="more"></a>
</div>
<script>
window._bd_share_config = {
common: {
bdText: '我成为了兰生投资的投客,邀请你也来参加!',
bdDesc: '',
bdUrl: '<%getfulllink("go_reg",{userModel.user_name})%>'
},
share: [{
"bdSize": 32
}],
image: [{
viewType: 'list',
viewPos: 'top',
viewColor: 'black',
viewSize: '32',
viewList: ['qzone', 'tsina', 'tqq', 'renren', 'weixin']
}],
selectShare: [{
"bdselectMiniList": ['weixin', 'qzone', 'tsina', 'tqq', 'renren']
}]
}
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
</div>
<script type="text/javascript">
// 定义一个新的复制对象
var clip = new ZeroClipboard(document.getElementById("clipbutton"), {
moviePath: "{config.webpath}scripts/ZeroClipboard.swf"
});
// 复制内容到剪贴板成功后的操作
clip.on('complete', function (client, args) {
alert("复制成功");
});
</script>
</div>
效果图如下: